Создадим шапку для сайта. Откроем файл index.php в папке сайта (созданной в предыдущем уроке). Для корректной работы убедитесь, что Denwer обновлён (перезагружен).
index.php: базовая структура
Создадим базовую структуру HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Новости обо всём</title>
<meta charset="utf-8">
</head>
<body>
Привет
</body>
</html>Проверим отображение русских символов, открыв сайт в браузере (например, http://localhost/php_apps.org/). Должно отобразиться «Привет» и «Новости обо всём».
Подключение стилей
Подключим файл стилей style.css:
<link rel="stylesheet" type="text/css" href="style.css">Базовые и дополнительные стили
Создадим файл style.css со следующими стилями:
@charset "utf-8";
* {
margin: 0;
padding: 0;
outline: none;
}
body {
width: 100%;
height: 100%;
background-color: #fff;
color: #333;
font-family: 'Segoe UI', Arial, sans-serif;
}
a {
color: #f00;
text-decoration: none;
transition: color 0.5s ease;
}
a:hover {
color: #ff0;
}
.clear {
clear: both;
}
header {
width: 98%;
float: left;
padding: 1%;
border-bottom: 2px solid silver;
}
#logo {
width: 30%;
float: left;
}
#menu {
width: 40%;
float: left;
margin-right: 3%;
}
#auth {
width: 30%;
float: left;
}
#logo a {
font-size: 2em;
font-weight: bold;
font-family: 'Segoe UI', Arial, sans-serif;
color: #939;
}
#menu a, #auth a {
font-size: 1.2em;
margin-right: 10px;
}
#menu a:hover, #auth a:hover {
background-color: #eee;
border-radius: 5px;
padding: 5px;
color: #333;
}@charset "utf-8"; обеспечивает корректное отображение русских символов. * { margin: 0; padding: 0; outline: none; } сбрасывает отступы и обводку для всех элементов. Стили для body устанавливают ширину, высоту, цвет фона и текста, семейство шрифтов. Стили для a задают цвет ссылок, отсутствие подчеркивания и плавный переход цвета при наведении. clear очищает float. Стили для header, #logo, #menu и #auth определяют расположение и внешний вид элементов шапки.
Разметка шапки
Добавим разметку шапки в index.php:
<header>
<div id="logo">
<a href="/">
<span style="color:#654321;">Н</span>овости
</a>
</div>
<div id="menu">
<a href="#">О нас</a> | <a href="#">Обратная связь</a>
</div>
<div id="auth">
<a href="#">Регистрация</a> | <a href="#">Авторизация</a>
</div>
</header>Теперь шапка сайта содержит логотип, меню и блок авторизации. Цвета, шрифты и размеры элементов можно изменить по желанию.
Мы создали простую шапку сайта. В следующих уроках добавим футер и другие элементы.