Создание шапки

Если у вас все получилось то можно удалить все что находится между тегами <body> и </body>. Также отчистить файл style.css. А в теге </title> напишем «главная страница»

Шапка нашего сайта будет состоять из логотипа который расположен слева и телефона расположенного справа.

Для реализации задуманного вставим между тегами <body> и </body> следующий код:

<div class="shapka">
<div class="logo">
</div>
<div class="kont">
</div>
</div>

Мы создали контейнер с помощью элемента <div> с классом "shapka". Внутри этого контейнера созданы еще два контейнера. Один контейнер предназначен для логотипа, а во втором будут контактные данные.

В контейнер с классом «logo» вставим логотип в виде картинки. Для примера я нарисовал следующий логотип:

Это изображение в формате png и размером 410 на 115 пикселей. Разместим его в папке которую сейчас создадим. В папке где находятся файлы index.html и style.css создадим новую папку которую назовем images. В этой папке будет располагаться все изображения применяемые для сайта.

Следующим шагом нужно отобразить это изображение на сайте. Сделаем мы это с помощью тега <img>:

<img src = "images/logo1.png" >

В контейнер предназначенный для контактов пропишем выдуманные телефон и электронную почту:

Тел: +7(343)0000000
<br>
Почта: qqqq@wwwwwww.ru

для переноса на новую строку используем тег <br> и если все собрать то получается это:

<div class="shapka">
<div class="logo">
<img src = "images/logo1.png" >
</div>
<div class="kont">
Тел: +7(343)0000000
<br>
Почта: qqqq@wwwwwww.ru
</div>
</div>

Это все из-за того что мы не использовали стили. Давайте это исправим. Откроем файл style.css и пропишем стили.

В данный момент у нас используется три селектора: shapka, logo и kont.

.shapka{
width: 90%;/*указывает ширину контейнера shapka*/
margin: 0 auto;/*выравнивает контейнер по середине*/
height: 120px;/*устанавливает высоту контейнера*/
}
.logo{ float : left;/*перемещает контейнер с логотипом в лево*/
}
.kont{
float : right;/*перемещает контейнер с телефоном и электропочтой вправо*/
margin : 5px;/**/
margin-top : 40px;/**/
}
Введение <<Назад Меню Далее>> Создание меню