Изучение HTML. Вёрстка сайта из PSD шаблона. Часть 2 (навигация)

Изучение HTML. Вёрстка сайта из PSD шаблона. Часть 2 (навигация)

0_HTML

Для создания навигации понадобится тег <nav>. Внутри этого тега следует поместить список. Тип списка – любой. В данном примере – маркированный список.

Каждый элемент списка – ссылка

HTML:

[raw]

<nav>

<ul>

<li><a href="#">Главная</a></li>

<li><a href="#">Каталог</a></li>

<li><a href="#">Доставка</a></li>

<li><a href="#">Контакты</a></li>

<li><a href="#">Личный кабинет</a></li>

</ul>

</nav>

[/raw]

001

В style.css для тега <ul> маркеры убирать не надо. Они уже убраны в reset.css. Для этого тега стоит установить лишь выравнивание по центру.

[raw]

nav ul{

text-align: center;

}

[/raw]

002

Для каждого элемента списка нужно установить высоту, а также свойство display:inline-block. Последнее для того, чтобы блочные элементы выстроились в одну линию как линейные.

[raw]

nav ul li{

height: 27px;

display: inline-block;

}

[/raw]

003

Ссылку необходимо сделать блочным элементом, т. к. для неё отступ сверху.

[raw]

nav ul li a{

background-color: #7fc56b;

font-size: 18px;

color: #FFF;

text-decoration: none;

display: block;

border-radius: 0px 0px 10px 10px;

padding: 5px 30px 5px 70px;

}

[/raw]

004

Для ссылки, на которую навели указатель мыши нужно отображать изображение лапы. Можно изменить цвет текста.

[raw]

nav ul li a:hover{

color: #CCC;

background-image: url(../img/lapa.png);

background-repeat: no-repeat;

background-position: 25px 2px;

&nbsp;

}

[/raw]

005

Вот и все наше меню готово. В третей части  мы сделаем следующий фрагмент сайта – контент и правая часть сайта

Отставить отзыв

Ваш e-mail не будет опубликован. Обязательные поля помечены *