HTML-код:
Пример исходного кода
<div id="nav">
<ул>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的首页
<div class="список">
<a href="http://www.onlygrape.com/">葡提子</a><br />
<a href="#">Нажмите на кнопку</a><br />
<a href="#">Нажмите на кнопку</a><br />
<a href="#">Нажмите на кнопку</a><br />
<a href="#">Обозначение</a><br />
<a href="#">Обозначение</a><br />
</div>
</li>
<li class=”menu2″ onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社区圈子
<div class="список">
<a href="http://www.onlygrape.com/">葡提子</a><br />
<a href="#">Нажмите на кнопку</a><br />
<a href="#">Нажмите на кнопку</a><br />
<a href="#">Обозначение</a><br />
<a href="#">Обозначение</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的短信
<div class="список">
<a href="http://www.onlygrape.com/">葡提子</a><br />
<a href="#">Обозначение</a><br />
<a href="#">Обозначение</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">账户管理
<div class="список">
<a href="http://www.onlygrape.com/">葡提子</a><br />
<a href="#">Нажмите на кнопку</a><br />
<a href="#">Нажмите на кнопку</a><br />
<a href="#">Обозначение</a><br />
<a href="#">Обозначение</a><br />
<a href="#">Нажмите на кнопку</a><br />
<a href="#">Обозначение</a><br />
<a href="#">Обозначение</a><br />
</div>
</li>
</ul>
</div>
Пример исходного
кода
.
класс = «меню2»
onMouseOver="this.className='menu1'”
onMouseOut="this.className='menu2'"
下面看CSS代码:
Пример исходного кода
тело{
цвет фона: белый;
размер шрифта: 12 пикселей;
семейство шрифтов: Arial, Helvetica, без засечек;
поле: 0 пикселей;
отступ: 0 пикселей;
цвет:белый;
}
ул, ли {
поле: 0 пикселей;
отступ: 0 пикселей;
}
ли {
дисплей: встроенный;
стиль списка: нет;
позиция в стиле списка: снаружи;
выравнивание текста: по центру;
шрифт-вес: жирный;
плавать: влево;
}
а:ссылка{
цвет: #336601;
текстовое оформление: нет;
плавать: влево;
ширина: 100 пикселей;
отступы: 3px 5px 0px 5px;
}
а:посетил{
цвет: #336601;
текстовое оформление: нет;
плавать: влево;
отступы: 3px 5px 0px 5px;
ширина: 100 пикселей;
}
а:наведите{
цвет:белый;
плавать: влево;
отступ: 3 пикселя 3 пикселя 0 пикселей 20 пикселей;
ширина: 88 пикселей;
текстовое оформление: нет;
цвет фона: #539D26;
}
а:активный{
цвет:белый;
плавать: влево;
отступ: 3 пикселя 3 пикселя 0 пикселей 20 пикселей;
ширина: 88 пикселей;
текстовое оформление: нет;
цвет фона:#BD06B4;
}
#nav{
ширина: 600 пикселей;
высота: 30 пикселей;
нижняя граница: 0 пикселей;
отступ: 0 пикселей 5 пикселей;
позиция: абсолютная;
z-индекс: 1;
слева: 198 пикселей;
верх: 25 пикселей;
}
.список{
высота строки: 20 пикселей;
выравнивание текста: по левому краю;
отступ: 4 пикселя;
вес шрифта: нормальный;
}
.menu1{
ширина: 120 пикселей;
высота: авто;
поле: 6 пикселей 4 пикселя 0 пикселей 0 пикселей;
граница: 1 пиксель, сплошной #9CDD75;
цвет фона:#F1FBEC;
цвет: #336601;
отступ: 6 пикселей 0 пикселей 0 пикселей 0 пикселей;
курсор: рука;
переполнение-y: скрыто;
фильтр: Альфа (непрозрачность = 70);
-moz-непрозрачность: 0,7;
}
.menu2{
ширина: 120 пикселей;
высота: 18 пикселей;
поле: 6 пикселей 4 пикселя 0 пикселей 0 пикселей;
цвет фона: # F5F5F5;
цвет: #999999;
граница: 1 пиксель, сплошной #EEE8DD;
отступ: 6 пикселей 0 пикселей 0 пикселей 0 пикселей;
переполнение-y: скрыто;
курсор: рука;
}