Верстка тренировочного макета. Часть 1 Шапка/Header, меню.

Наконец-то добрались до верстки! Исходя из моего прошлого поста, надеюсь, вы выбрали понравившийся макет и уже готовы приступить к его верстке. Будем идти от простого к сложному. Сегодня будем верстать шаблон, который я приводила как пример в моем прошлом посте. Страница будет статической, так что будем указывать статические отступы и размеры.
Предположим, вы уже знаете HTML/CSS, ну а если нет, рекомендую прочесть пост об онлайн курсах, которые вам очень пригодятся для понимая всего здесь происходящего!

1. Создадим заготовку для веб-страницы и подключим файл с CSS кодом, а так же добавим заголовок нашего сайта.

<!DOCTYPE html>
<html>
   <head>
 <link rel="stylesheet" href="css.css">
 <title>Мой сайт</title>
   </head>

   <body>
       <div id="wrapper">
  <--основной блок сайта>
           <--Основная часть-->
       </div>
</body>
</html>

2. Верстка любого макета начинается сверху вниз!
Как мы видим, на макете шапки (будем вводить профессиональные термины - header) вверху слева расположен логотип, а справа - меню.
Сперва создадим общий div для шапки и зададим ему класс "header". Внутри него разместим блок с классами "container" (чтобы задать фиксированную ширину повторяющимся блокам) и "clearfix" (позволяет избежать проблем с схлопывающимися верхними отступами в современных браузерах).
Затем внутри контейнера поместим блок для логотипа с классом "logo", укажем ссылку главной страницы сайта и пропишем сам путь к логотипу, то есть при нажатии на логотип, пользователь будет переходить на Главную.
Меню представляет собой список с ссылками. Внутри тэга "ul" располагаются несколько тэгов "li" с ссылками на другие страницы сайта.

<div class="header">
       <div class="container clearfix">
            <div class="logo">
         <a href="#"><img src="img/logo.png"></a>
            </div>
<ul class="nav">
<li><a href="#">DESIGN</a></li>
<li><a href="#">WEB DESIGN</a></li>
<li><a href="#">GRAPHIC DESIGN</a></li>
<li><a href="#">PRINT DESIGN</a></li>
<li><a href="#">VIDEO DESIGN</a></li>
</ul>
</div>
</div>

HTML код мы написали, осталось оформить с помощью CSS. Зададим основные стили для страницы.

body{
 font:12px/18px 'Times New Roman', Times, sans-serif;
 background-color: #FFF;
}
ol,ul {
 list-style: none
}
a, a:hover{
 text-decoration:none;
}
.cleatfix:before,
.clearfix:after{
 content:" ";
 display:table;
}
.clearfix:after{
 clear:both;
}

Теперь зададим стили блоку "header" и классам внутри него.

/*общие стили для header*/
.header{
 position: absolute;
 width:1550px;
 top: 40px;
}
/* задаем ширину контейнера */
.container{
 width: 1550px;
 margin: 0 auto;
}
/* позиция логотипа */
.logo{
 float:left;
 margin-left:295px;
}
/* позиция блока меню */
.nav{
 float:right;
 margin-right:296px;
}
/* позиция элементов меню */
.nav li{
 float:left;
 margin-right:30px;
}
.nav li:last-child{
 margin-right: 0;
}
/* оформление ссылок */
.nav a{
 text-transform: uppercase;
 color: #4f4d6a;
}
/* эффекты при наведении на ссылки */
.nav a:hover{
 text-decoration: underline;
 color: #363548;
}

Верхняя часть шапки сайта ГОТОВА! У вас должно получиться так:

В следующем уроке мы продолжим верстать шапку, а пока, пишите в комментариях получилось у вас или нет и какие возникли трудности! Удачи)

Верстка тренировочного макета. Часть 1 Шапка/Header, меню.

Поделиться:

Комментарии

3 коммент.: