Многостраничный сайт в HTML и CSS это сайт, который состоит из нескольких страниц с разным содержимым. Вот как создать многостраничный сайт:
- Создайте отдельный файл HTML для каждой страницы. Например, index.html, about.html, contact.html и т.д.
- Добавьте на каждую страницу общие элементы, такие как меню навигации, заголовки, подвал и т.д.
- Создайте файл CSS, который будет содержать общие стили для всех страниц. Например, стили для шрифтов, цветов, фона и т.д.
- Добавьте отдельный файл CSS для каждой страницы, который будет содержать уникальные стили для этой страницы. Например, стили для размещения контента на странице, фона, шрифта и т.д.
- С помощью HTML-тега
<a>
создайте ссылки на другие страницы сайта. Например, переместите ссылку на страницу «О нас» на главной странице, что пользователь мог перейти на страницу «О нас» по клику на ссылку.
Пример кода для приведенных выше шагов:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Главная страница</title>
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Главная страница</a></li>
<li><a href="about.html">О нас</a></li>
<li><a href="contact.html">Контакты</a></li>
</ul>
</nav>
<header>
<h1>Добро пожаловать на наш сайт!</h1>
<p>Здесь вы найдете все, что вас интересует.</p>
</header>
<main>
<p>Какой-то текст на главной странице</p>
<a href="about.html">Узнать больше</a>
</main>
<footer>
<p>© 2020 Наш сайт</p>
</footer>
</body>
</html>
about.html
<!DOCTYPE html>
<html>
<head>
<title>О нас</title>
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="about.css">
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Главная страница</a></li>
<li><a href="about.html">О нас</a></li>
<li><a href="contact.html">Контакты</a></li>
</ul>
</nav>
<header>
<h1>О нашей компании</h1>
</header>
<main>
<p>Какой-то текст на странице "О нас"</p>
</main>
<footer>
<p>© 2020 Наш сайт</p>
</footer>
</body>
</html>
contact.html
<!DOCTYPE html>
<html>
<head>
<title>Контакты</title>
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="contact.css">
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Главная страница</a></li>
<li><a href="about.html">О нас</a></li>
<li><a href="contact.html">Контакты</a></li>
</ul>
</nav>
<header>
<h1>Связаться с нами</h1>
</header>
<main>
<p>Какой-то текст на странице "Контакты"</p>
<ul>
<li>Email: example@example.com</li>
<li>Телефон: +7 (123) 456-78-90</li>
</ul>
</main>
<footer>
<p>© 2020 Наш сайт</p>
</footer>
</body>
</html>
common.css
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
background-color: #333;
}
nav ul li {
display: inline-block;
margin-right: 10px;
}
nav ul li a {
display: block;
color: #fff;
font-weight: bold;
padding: 10px;
text-decoration: none;
}
header {
background-color: #f2f2f2;
padding: 30px;
}
header h1 {
margin: 0;
}
main {
padding: 30px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
}
index.css
main p {
font-size: 20px;
line-height: 1.5;
}
main a {
display: block;
font-size: 24px;
font-weight: bold;
text-align: center;
color: #fff;
background-color: #333;
padding: 10px;
margin-top: 20px;
text-decoration: none;
}
about.css
main p {
font-size: 24px;
line-height: 1.5;
}
contact.css
main ul {
list-style: none;
padding: 0;
font-size: 24px;
line-height: 1.5;
}
main ul li {
margin-bottom: 10px;
}
Таким образом, создание многостраничного сайта сводится к созданию отдель