Создадим страницу «О нас» для сайта, сосредоточившись на создании новых страниц и добавлении ссылок. CSS-стили будут рассмотрены кратко.
Создание нового HTML-документа
Создайте новый HTML-документ и сохраните его в той же папке, что и index.html, папка css и папка с изображениями. Назовите файл about.html.
Добавление ссылки на новую страницу
Добавьте ссылку на новую страницу. Структура ссылки аналогична указанию путей к стилям: для файлов в подпапках указывается путь к подпапке.
Копирование кода и адаптация
Для ускорения работы скопируйте код из index.html в about.html. Удалите ненужные элементы, изменяющиеся на разных страницах (контент, оставляя шапку, меню и футер). Оставьте wrapper и articles как родительские элементы.
Добавление блока «О нас» и стилизация
Добавьте блок с помощью тега <div> и ID about-us. В CSS задайте ширину 100%, отступ слева, цвет фона, скругленные углы и рамку. Используйте box-sizing: border-box;, чтобы граница входила в общую ширину блока.
/* Стили для странички "О нас" */
#about-us {
width: 100%;
float: left;
background-color: #fff;
border-radius: 5px;
border: 1px solid #ccc;
box-sizing: border-box;
padding: 10px;
}Добавьте текст внутри блока. Ширину блока можно изменить, например, до 60%.
Добавление бокового меню (необязательно)
Можно добавить боковое меню с помощью <div class=»column»>. Задайте ширину 30% и отступ слева 5%.
.column {
width: 30%;
float: left;
margin-left: 5%;
}Добавьте в меню текст или ссылки.
Результат
Получена страница «О нас» с контентом, общей шапкой и футером, с возможностью добавления бокового меню. Ссылки работают корректно.
Урок показал, как создавать новые страницы, добавлять ссылки и стилизовать контент. Этот метод применим для создания других страниц сайта.