Макет сайта на CSS
Сайты обычно делятся на разделы: шапка, меню навигации, область основного содержимого и подвал.
Такая структура из шапки, навигации, содержимого и подвала — одна из самых распространённых, хотя существует и множество других вариантов макетов.
Шапка CSS
Шапка в большинстве случаев располагается в верхней части сайта и обычно содержит логотип или название сайта.
Пример
Prompt
Создайте страницу с элементом header, оформленным светло-серым фоном (#f1f1f1), текстом по центру и отступом 10px. Header должен содержать h1 с текстом "My Header".
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Header Styling</title>
<style>
header {
background-color: #f1f1f1;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<header>
<h1>My Header</h1>
</header>
</body>
</html>
Панель навигации CSS
Посетители ориентируются на вашем сайте с помощью панели навигации, которая содержит список ссылок.
Пример
Prompt
Создайте страницу с горизонтальной панелью навигации, используя неупорядоченный список с классом "topnav". Используйте flexbox для горизонтального отображения элементов. Панель навигации должна иметь тёмный фон (#333333) со ссылками светлого цвета (#f1f1f1), отступ 14px 16px, без подчёркивания и эффект наведения, который меняет фон на светло-серый (#dddddd), а текст на чёрный. Добавьте четыре ссылки: Link1, Link2, Link3, Link4.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Navigation Bar</title>
<style>
ul.topnav {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333333;
}
ul.topnav li a {
display: block;
color: #f1f1f1;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover {
background-color: #dddddd;
color: black;
}
</style>
</head>
<body>
<ul class="topnav">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
</ul>
</body>
</html>
Содержимое макета CSS
То, как отображается содержимое сайта, часто зависит от используемого устройства. Эти макеты самые распространённые:
- Макет в 1 колонку - часто встречается в мобильных браузерах
- Макет в 2 колонки - часто встречается на планшетах и ноутбуках
- Макет в 3 колонки - только для настольных компьютеров
В примере ниже три колонки сворачиваются в одну, когда ширина экрана меньше 600px.
Совет: В главе Медиазапросы CSS правило CSS @media объясняется подробнее.
Совет: В главе CSS Flexbox CSS Flexbox объясняется подробнее.
Пример
Prompt
Создайте страницу с трёхколоночной раскладкой на основе flexbox. Каждая колонка должна содержать заголовок "Column" и абзац текста lorem ipsum. Используйте медиазапрос, чтобы при ширине экрана менее 600px колонки располагались друг под другом вертикально. Каждая колонка должна иметь отступ (margin) 10px.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Three Column Layout</title>
<style>
div.flex-container {
display: flex;
flex-direction: row;
}
div.flex-container > div {
margin: 10px;
}
@media screen and (max-width: 600px) {
div.flex-container {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="flex-container">
<div>
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.</p>
</div>
<div>
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.</p>
</div>
<div>
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.</p>
</div>
</div>
</body>
</html>
Простой и фиксированный подвал CSS
Внизу веб-страницы находится подвал, который обычно содержит такие сведения, как авторские права и контактные данные.
Простой подвал
Простое оформление подвала выглядит так.
Prompt
Создайте страницу с некоторым содержимым и элементом футера внизу. Футер должен иметь светло-серый фон (#f1f1f1), выровненный по центру текст, отступ 8px и отображать текст "Footer".
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Basic Footer</title>
<style>
footer {
background-color: #f1f1f1;
text-align: center;
padding: 8px;
}
</style>
</head>
<body>
<h2>Page Content</h2>
<p>Some content above the footer.</p>
<footer>
Footer
</footer>
</body>
</html>
Фиксированный подвал
Как бы далеко вы ни прокрутили страницу, фиксированный подвал остаётся видимым в её нижней части.
Prompt
Создайте страницу с достаточным количеством содержимого для прокрутки и фиксированным футером, который остаётся видимым внизу окна просмотра. Футер должен использовать position fixed, bottom 0, left 0, width 100%, светло-серый фон (#f1f1f1), отступ 8px, текст по центру и z-index 1000. Текст футера должен гласить "Fixed Footer".
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Fixed Footer</title>
<style>
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #f1f1f1;
padding: 8px;
text-align: center;
z-index: 1000;
}
body {
margin-bottom: 50px;
}
</style>
</head>
<body>
<h2>Scroll Down</h2>
<p>This page has a fixed footer that stays at the bottom of the viewport.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<footer>
Fixed Footer
</footer>
</body>
</html>
Адаптивный сайт на CSS
В этом примере медиазапросы объединяются с flexbox, чтобы создать адаптивный сайт с гибкой панелью навигации и гибким содержимым.
Пример
Prompt
Создайте адаптивную раскладку сайта с заголовком, горизонтальной панелью навигации, которая становится вертикальной на маленьких экранах, областью содержимого на основе flex с боковой навигацией и основным разделом статьи, а также футером. Используйте медиазапросы, чтобы раскладка адаптировалась для экранов шириной менее 600px, располагая элементы вертикально друг под другом.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Responsive Website</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #666;
padding: 30px;
text-align: center;
color: white;
font-size: 30px;
}
ul.topnav {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
overflow: hidden;
}
ul.topnav li a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover {
background-color: #ddd;
color: black;
}
.content-container {
display: flex;
flex-direction: row;
}
nav {
flex: 1;
background-color: #f1f1f1;
padding: 20px;
}
nav a {
display: block;
padding: 8px;
text-decoration: none;
color: black;
}
nav a:hover {
background-color: #ddd;
}
article {
flex: 3;
background-color: white;
padding: 20px;
}
footer {
background-color: #f1f1f1;
text-align: center;
padding: 10px;
}
@media screen and (max-width: 600px) {
ul.topnav {
flex-direction: column;
}
.content-container {
flex-direction: column;
}
}
</style>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<ul class="topnav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<div class="content-container">
<nav>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</nav>
<article>
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque augue quam, ultricies at erat vitae, lobortis ultrices urna.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec accumsan, nibh vel tincidunt sagittis, urna eros hendrerit orci, id elementum sem arcu ac libero.</p>
</article>
</div>
<footer>
Footer
</footer>
</body>
</html>