Уроки CSS |
Теги <li></li> - свойство border CSS |
Помимо типов маркеров – для пунктов расположенных между тегами <li></li> можно задать цвет заднего фона, отступы, длину, а так же цвет и толлщину рамки. С помощью подобных свойств можно сделать полноценное меню.
Для начала сделаем простой пример – тип маркеров будет отключен, пунктам будет задан цвет заднего фона, цвет и толщина рамки и длина, так как иначе длина пункта растянулась бы на всё поле.
<style>
ul.bord li {
list-style-type: none;
background: Green;
border: 2px solid Yellow;
width: 150px;
}
</style>
<ul class="bord">
<li>Раз</li>
<li>Два</li>
<li>Три</li>
<li>Четыре</li>
</ul>
- Раз
- Два
- Три
- Четыре
А теперь сделаем вертикальное меню. Для этого нужно прописать две стилевых группы – для пунктов в обычном состоянии и для пунктов на которые навели курсор мышки – то есть описать событие :hover
<style>
ul.menu_bord li {
list-style-type: none;
background: Green;
border: 1px solid White;
width: 200px;
color: White;
padding: 8px;
}
ul.menu_bord li:hover {
background: White;
border: 1px solid Orange;
border-left: 3px solid Orange;
width: 200px;
color: Black;
padding: 8px;
}
</style>
<ul class="menu_bord">
<li>Главная</li>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
</ul>
Получилось весьма хорошое меню.
◄ Предыдущий урок | Содержание | Следующий урок ► |