БлогNot. Простейший макет сайта в 2 колонки

Простейший макет сайта в 2 колонки

Этот простой учебный макет использует вертикальное меню блочных ссылок, прижатое влево свойством float и обычное вложение блоков по принципу "обёртка-контент", позволяющее растянуть двухколоночный макет вниз, а также задать ему минимальную высоту.

Ниже показана разметка файлов index.html и styles.css, предположительно имеющих кодировку Юникода UTF-8 и сохранённых в одной папке.

Валидаторы HTML и CSS считают код корректным, стиль подробно закомментирован.

Файл index.html
<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <link href="styles.css" rel="stylesheet">
  <title>Макет 2 колонки</title>
 </head>
 <body>

<div class="top">Заголовок сайта</div>
  <div class="menu">
   <a href="#">Ссылка 1</a>
   <a href="#">Ещё ссылка</a>
   <a href="#">Меню</a>
   <a href="#">Такое</a>
  </div>

<div class="wrapper">
  <div class="content">
   <h1>Lorem ipsum dolor sit amet</h1>
   <p>Этот несложный макет сайта использует для отступов абсолютные единицы 
   измерения (пиксели). Это не всегда хорошо при адаптивной вёрстке.</p>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
   nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
   volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution 
   ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
   Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit 
   esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at 
   vero eros et accumsan et iusto odiodignissim qui blandit praesent luptatum 
   zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
  </div>
</div>

  <div class="bottom">
   &copy; Lorem ipsum
  </div>
   
 </body>
</html>
Файл styles.css
html {
 height: 95%; /* высота в процентах */
}
body {
 font-family: Verdana, Arial, sans-serif;
 height: 95%; /* высота в процентах от html */
 overflow: scroll; /* всегда иметь полосу прокрутки справа */
 background-color: #eee; /* Цвет фона */
}
.wrapper {
 min-height: 90%; /* Минимальная высота в процентах от body */
}
.top, .bottom { /* Верхняя и нижняя часть */
 border: dotted 1px black; /* Параметры рамки  */
 padding: 3px; /* Поля вокруг текста */
 color: #111; /* Цвет символов */
}
.top {
 margin-bottom: 15px; /* Расстояние между заголовком и колонками */
 background-color: #ddd; /* Цвет фона */
 font-weight: 600; /* жирность шрифта */
} 
.bottom { /* Нижняя часть */
 font-size: 90%; /* Размер шрифта */
 clear: both; /* Отмена обтекания элемента */
 background-color: #cff; /* Цвет фона */
 margin-top: 15px; /* Расстояние между заголовком и колонками */
}
.menu { /* Навигация по сайту */
 width: 100px; /* Ширина меню */
 border: dotted 1px black; /* Параметры рамки */
 float: left; /* Состыковка с другим слоем по горизонтали */
 padding: 3px; /* Поля вокруг текста */
}
.menu A { /* Ссылки в меню */
 font-size: 90%; /* Размер текста */
 display: block; /* Показывать как блок - вся полоска будет ссылкой */
 padding: 3px 0; /* Дополнительные отступы серху и снизу*/
 background-color: #cdc; /* Цвет фона */
 border-bottom: 2px solid #fff; /* Дополнительный разделитель под пунктом меню */
}
.menu A:hover { /* Активные ссылки в меню */
 text-decoration: none; /* Не подчёркивать */
 color: red; /* Сделать красными */
}
.content { /* Основное содержание страницы */
 border: dotted 1px black; /* Параметры рамки */
 margin-left: 115px; /* Отступ слева */
 margin-bottom: 15px; /* Отступ снизу */
}
h1 { /* Заголовок страницы */
 text-align: center; /* Выравнивание по центру */
 font-size: 120%; /* Размер шрифта */
 font-weight: normal; /* Нормальное начертание */
 padding: 0; /* Убираем значение полей */
 margin: 0; /* Обнуляем значения отступов */ 
}
.content p { 
 font-size: 90%; /* Размер шрифта */
 text-align: justify; /* Выравнивание по ширине */
 padding: 4px; /* Поля вокруг текста */
 margin: 0; /* Обнуляем отступы */
}
Вид этого макетика в браузере
Вид этого макетика в браузере

17.10.2020, 14:56 [1227 просмотров]


теги: учебное html css вебдезигн

К этой статье пока нет комментариев, Ваш будет первым