Генератор цветов Уроки C++ Уроки Windows forms Учебники по программированию Уроки HTML Уроки CSS Готовые задания Исходники Полезные программы
регистрация доменов

Дешёвые домены



Уроки 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>



Получилось весьма хорошое меню.



◄ Предыдущий урок Содержание Следующий урок ►