HTML и CSS списки

CSS горизонтальные списки

Урок 19. HTML и CSS списки

CSS атрибуты и значения, определяющие свойства списков

В этом уроке мы познакомимся с горизонтальными списками.


HTML списки | Пример:

CSS списки | Пример ниже:

<title>Пример горизонтального CSS списка</title>
<style type="text/css">
* {font-family: Arial, Helvetica, sans-serif}
#nav_menu {padding: 0; width: 762px; margin: 0 auto}
#nav_menu ul {list-style: none; margin: 0; padding: 0}
#nav_menu li {display: inline}
#nav_menu a {
float: left;
width: 125px;
height: 30px;
background-color: #cc0033;
border-left: 2px solid #ffffff;
text-decoration: none;
text-align: center;
padding: 0;
padding-top: 10px;
font-size: 18px;
color: #ffffff
}
#nav_menu a:hover {background-color: #990033; color: Tomato}
</style>
</head>
<body>
<div id="nav_menu">
<ul>
<li><a href="#">Sony</a></li>
<li><a href="#">Asus</a></li>
<li><a href="#">Dell</a></li>
<li><a href="#">Toshiba</a></li>
<li><a href="#">Acer</a></li>
<li><a href="#">Lenovo</a></li>
</ul>
</div>

Результат: CSS списки ⇒ горизонтальное меню

Атрибуты и значения

Ширина блока подсчитана так: 762 = 125 * 6 + 2 * 6, где 125 * 6 → длина 6-ти ссылок, 2 * 6 → общая ширина атрибута border-left.

Дата публикации: Октябрь 2009 | Обновление: Август 2014

Урок 18. CSS таблицы   CSS списки   Урок 20. CSS списки и изображения

    Сохранить в сервисы и закладки