Сайт визитка
Многостраничный сайт содержит более одной страницы. Многостраничные сайты на чистом html+css называют сайтами-визитками. В которых несколько страниц: главная, портфолио, цены, контакты и тому подобное.
Рассмотрим простой пример многостраничного сайта-визитки.
Для начала нам нужно придумать макет (шаблон) сайта и чтобы он был адаптивным, то есть хорошо смотрелся как на мониторе, так и на смартфоне.
Связь между страницами сайта происходит через ссылки. В качестве примера создадим сайт из двух страниц (при необходимости страницы можно добавить), чтобы понять, как они взаимодействуют с друг другом.
В корневой папке создадим папку assets и поместим туда файлы logo.png и style.css.
Загаловок сайта
style.css
/* для блока - шапка */
header{
text-align: left; /* Выравнивание внутреннего контента по левому краю */
width: 95%; /* Ширина блока и общая ширина*/
height: 90px; /* Высота блока */
margin-right: auto; /* Авто-отступ справа */
margin-left: auto; /* Авто-отступ слева */
padding: 10px; /* Внутренние поля вокруг содержимого */
background: #eeeeff; /* Цвет фона */
}
/* для контейнера */
#container {
width: 97%;/* Ширина слоя или ширина макета+20px */
margin-right: auto; /* Авто-отступ справа */
margin-left: auto; /* Авто-отступ слева */
}
/* для блока - меню */
aside {
width: 27%; /* Ширина слоя */
float: left; /* Обтекание с соседним слоем */
padding: 5px; /* Внутренние поля вокруг содержимого */
background: #dddddd; /* Цвет фона */
right: 0px; /* Координата от правого края окна */
top: 0px; /* Координата от верхнего края окна */
}
/* для блока - контент */
article { /* Правая колонка*/
width: 70%;/* Ширина слоя */
float: left; /* Обтекание с соседним слоем */
padding: 10px; /* Внутренние поля вокруг содержимого */
background: #eeeeee; /* Цвет фона */
}
/* для блока - подвал */
footer{
width:95%; /* Ширина слоя */
clear:left; /* возвращаем блочность и располагаем слой слева */
padding: 10px; /* Внутренние поля вокруг содержимого */
background:#aaa;
color:#fff;
margin-right: auto; /* Авто-отступ справа */
margin-left: auto; /* Авто-отступ слева */
}
@media screen and (max-width: 768px) {
aside, article, footer, header, #container {
margin-left:0px;
margin-top:0px;
width:100%;
margin-right: auto; /* Авто-отступ справа */
margin-left: auto; /* Авто-отступ слева */
}
aside {
padding: 10px;
}
}
Это папка будет служить для хранения различных ресурсов.
В корневой папке создадим файлы index.html и page.html и вставим туда код.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8"/>
<title>Мой первый сайт</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="assets/style.css" />
</head>
<body>
<header>
<a href="./index.html"><img src="./assets/logo.png" title="Мой первый сайт" alt="Мой первый сайт"></a>
</header>
<div id="container">
<main>
Задает содержание сайта вроде новости, статьи, записи блога, форума, анонсов и другой информации..
</main>
<aside>
<b>Меню</b>
<ul>
<li><a href="/">Главная</a></li>
<li><a href="page.html">Страница</a></li>
</ul>
</aside>
</div>
<footer><center>© 2022</center></footer>
</body>
</html>
main
Блок где располагается содержимое страницы.
aside
Тут располагается меню на другие страницы сайта.
Роман
8/8/2023 1:49