Реферат: CSS Design: Укрощение списков
#tabs ul li {
margin-left: 0;
margin-bottom: 0;
padding: 2px 15px 5px;
border: 1px solid #000;
list-style: none;
display: inline;
}
#tabs ul li.here {
border-bottom: 1px solid #ffc;
list-style: none;
display: inline;
}
Item 1
Item 2
Item 3
Item 4
В данном примере мы добавили класс class="here" к одному из LI, благодаря чему нижняя граница этого пункта списка имеет цвет, совпадающий с фоном. Таким образом в меню мы указываем на текущее положение пользователя на сайте.
Примечание: этот прием был предложен Ренделом Растом (RandalRust), а затем его улучшили подписчики списка рассылки css-discuss
Ссылки-цепочки
Еще один тип ссылок, которые обычно располагаются горизонтально на веб-странице - это известные всем нам ссылки-цепочки (breadcrumblinks). Эти ссылки показывают наглядно, где в иерархии сайта вы сейчас находитесь - весь ваш путь от главной страницы до текущего раздела или страницы. Если вы действительно хотите сделать код вашей страницы семантически правильным, этот тип ссылок следует оформить как серию вложенных списков, так как каждый раздел является частью предыдущего раздела:
<div id="bread"> <ul> <li class="first">Home <ul> <li>» Products <ul> <li>» Computers <ul> <li>» Software</li> </ul></li> </ul></li> </ul></li> </ul> </div>
в результате получаем:
Home
» Products
» Computers
» Software
Применив следующие правила:
#bread {
color: #ccc;