Простой шаблон для сайта на HTML и CSS

Рассмотрим простой шаблон с горизонтальным многоуровневым меню на HTML и CSS. HTML отвечает за структуру веб-страницы, а CSS – за её внешний вид. Сразу скажу, что шаблон проверялся на работоспособность только в последних версиях браузеров Firefox и Chrome. Возможно, в других браузерах могут возникнуть проблемы с меню, а точнее с его отображением, но это всё поправимо с помощью CSS. А вот, собственно, и сам источник, откуда было взято меню, и переделано под свои нужды.

Структура веб-страницы

Итак, начнём с самого главного — структуры HTML-документа. Для этого создадим файл с именем index.html в кодировке UTF-8 и добавим в него следующее содержимое:

index.html

Структура HTML-документа хорошо и подробно описана на других сайтах, и нет смысла повторятся. Но если вы не знакомы с этой структурой, то вам для экспериментов необходимо знать следующее:

<header> – «чердак» сайта, там, где у вас размещён логотип;
<nav> – навигационная панель, по-простому меню сайта;
<main> – основной контент документа;
<footer> – «подвал» сайта, обычно тут размещают контактную информацию и другие вещи, например, ссылки на соцсети.

Внешний CSS-файл

Внешний CSS-файл подключается с помощью метатега link, и выглядит он следующим образом: <link rel="stylesheet" href="styles.css">. В нашем случае он уже подключён, осталось добавить сам стиль. Создайте новый файл с именем styles.css в кодировке UTF-8 и добавьте в него следующее содержимое:

styles.css


              body {
                  font-family: Arial, sans-serif;  /* Шрифт */
                  font-size: 16px;                 /* Размер шрифта */
                  margin: 0;
                  padding: 0;
              }

              header {
                  background-color: #DFE6EF;       /* Цвет фона чердака */
                  padding: 8px 1px 1px 8px;
              }

              /* Начало меню */
              nav {
                  background: #DFE6EF;             /* Цвет фона меню */
                  z-index: 5;
              }

              nav ul {
                  margin: 0;
                  padding: 0;
                  list-style: none;
              }

              nav ul:after {
                  content: "";
                  display: table;
                  clear: both;
              }

              nav a {
                  text-decoration: none;
                  display: block;
              }

              .topmenu > li {
                  float: left;
                  position: relative;
              }

              .topmenu > li:first-child {
                  border-left: 0;
              }

              .topmenu > li > a {  
                  padding: 10px 10px;
                  font-size: 16px;                 /* Размер шрифта */
                  color: #141414;                  /* Цвет текста меню */
              }

              .submenu a:hover {
                  background-color: #C2CEE0;       /* Цвет выделения подменю */
                  color: #141414;                  /* Цвет текста подменю при выделении */
              }

              .submenu {
                  position: absolute;
                  z-index: 5;
                  min-width: 180px;                /* Длина подменю */
                  background: white;
                  border-top: 1px solid #CBCBCC;
                  border-left: 1px solid #CBCBCC;
                  border-right: 1px solid #CBCBCC;
                  visibility: hidden;
              }

              .submenu li {
                  position: relative;
              }

              .submenu li a {
                  color: #141414;                  /* Цвет текста подменю */
                  padding: 6px 10px;
                  font-size: 16px;                 /* Размер шрифта */
                  border-bottom: 1px solid #CBCBCC;
              }

              .submenu .submenu {
                  position: absolute;
                  left: 100%;
                  top: -1px;
              }

              nav li:hover > .submenu {
                  visibility: visible;
              }

              nav li a:hover {
                  background-color: #C2CEE0;       /* Цвет меню при выделении */
              }
              /* Конец меню */

              main {
                  padding: 1em;
              }

              footer {
                  background-color: #EFEFEF;       /* Цвет фона подвала */
                  color: #141414;                  /* Цвет текста подвала */
                  padding: 1px 0 1px 0;
                  width: 100%;
                  bottom: 0;
              }

              footer a {
                  color: #141414;                  /* Цвет ссылки в подвале */
              }

Теперь веб-страница полностью готова к работе. Не забудьте скопировать файлы index.html и styles.css в одну папку, так как при подключении файла styles.css указан корневой каталог. Если это ваша первая веб-страница, то обязательно разберитесь, за что отвечает тот или иной стиль, это поможет вам лучше понять структуру и взаимосвязь HTML и CSS. Начните с простого редактирования, попробуйте изменить цвет, например, «подвала», короткие подсказки вы найдёте в CSS. Если вам нужен готовый шаблон, то вы его можете скачать в разделе «Файлы».