- index.html
- style.css
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Создание сетки страницы</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">Логотип и меню</div>
<div class="left-column">Основное содержание страницы</div>
<div class="right-column">Боковая колонка</div>
<div class="footer">Подвал</div>
</body>
</html>
CSS
div {
margin-bottom: 15px;
padding: 10px 25px 10px 25px;
background-color: #dff0d8;
}
.left-column {
width: 50%;
min-height: 100px;
background-color: #fcf8e3;
}
.right-column {
width: 25%;
min-height: 100px;
background-color: #d9edf7;
}
.footer {
}
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
ЗадачиВыполнено
0
Завершим сетку страницы:
- Добавьте в CSS-правило для класса
left-columnсвойствоfloat: left;. - В CSS-правило для
right-columnсвойствоfloat: right;. - В CSS-правило для
footerсвойствоclear: both;.
Используемые свойства детально разобраны в курсе «Сетки».