Web-дизайн и верстка. 2 курс. Лабораторное занятие №2. Простое меню с колонками на HTML и CSS
Для создания простого меню вам нужно перейти в свой блог, создать новое сообщение и переключиться из режима "создать" в режим "HTML". Рекомендованная тема блога - Notable, параметры страницы: сайдбар - тема - настроить - дополнительно - ширина - ширина области с контентом - 1280 px, боковая панель - 320 рх.
Часть 1 - горизонтальное меню.
Часть 1 - горизонтальное меню.
1) Указываем doctype, язык страницы и ее название в теге <title>:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Menu</title>
Далее внутри тега <style> начинаем указывать параметры меню:
2) Содержимое стилей - фон страницы
body {
background-color: transparent;
margin: 0 auto;
}
3) контейнер меню - ширина по странице:
#wrapper {
margin: 0 auto;
width: 100%;
text-align: center;
}
4) Навигационное меню с шириной в пикселях:
nav {
margin: 0 auto;
margin-top: 3em;
width: 1100px;
}
5) Общий уровень навигации - текст слева, блоки - в ряд:
nav ul {
text-align: left;
display: inline;
margin: 0;
padding: 1em 1em 1em 0;
list-style: none;
}
6) Сами блоки и их цвет (замените на свой):
nav ul li {
display: inline-block;
margin-right: .01em;
position: relative;
padding: 1em 3em;
background: blue;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
7) Текст в блоках - шрифт, размер и цвет (можете изменить):
nav li a {
padding-bottom: 1em;
text-decoration: none;
cursor: pointer;
font-size: 14px;
padding: 21px;
text-decoration: none;
font-weight: bold;
font-family: Consolas, monaco, monospace;
color: white;
}
8) Меню при наведении курсора - меняете цвет на свой:
nav ul li:hover {
background-color: skyblue;
}
9) Уровень подменю:
nav ul li ul {
padding: 0;
position: absolute;
top: 3.5em;
left: 0;
width: 16em;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
10) Подменю с цветом вкладок:
nav ul li ul li {
background-color: skyblue;
display: block;
color: #ffffff;
text-shadow: 0 1px 0 #000;
}
11) Подменю с цветом при наведении курсора (замените на свой):
nav ul li ul li:hover {
background-color: steelblue;
}
nav ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
12) Теперь нужно закрыть открытый тег <style> и <head>
Переходим к HTML и в том же порядке указываем те же элементы меню
13) Открываем тег <body>
14) Создаем контейнер, соответствующий тому, что был в CSS:
<div id="wrapper">
15) Открываем навигационное меню и создаем его как список. В примере четыре вкладки и два подменю, у вас должно быть пять вкладок и три подменю.
<nav>
<ul>
<li><a href="#">Блок 1</a></li>
<li><a href="#">Блок 2</a>
<ul>
<li><a href="#">Подменю 1</a></li>
<li><a href="#">Подменю 2</a></li>
</ul>
</li>
<li><a href="#">Блок 3</a></li>
<li><a href="#">Блок 4</a></li>
</ul>
</nav>
16) Закрываете контейнер и все оставшиеся теги:
</div>
</body>
</html>
Часть 2 - простые колонки
17) Для добавления простых колонок нужно добавить на страницу CSS-стиль этих колонок и добавить их в HTML. Для этого после закрытого тега <style> открываем этот же тег с атрибутом type:
<style type="text/css">
18) Создаем идентификатор #maket и указываем в нем атрибут ширины макета в процентах ( в моем примере - 145%). После этого закрываем идентификатор
19) Обозначаем селекторы таблиц-колонок с идентификаторами левой и правой. Ширину вы задаете свою, как и фоновые цвета:
TD {
vertical-align: top;
padding: 5px;
}
TD#leftcol {
width: 800px;
background: #87ceeb;
}
TD#rightcol {
width: 500px;
background: #4169e1;
}
20) После этого задаем подвал сайта с помощью селектора footer и указываем его атрибуты: цвет (background-color), цвет текста (color) и ширину (width) в процентах (равна ширине всего макета)
21) Закрываем селектор футера и тег <style>
22) После закрытой части меню навигации задаем колонки как таблицу с идентификатором макета:
<table cellspacing="0" id="maket">
23) Внутри указываем тело таблицы с идентификатором колонки (левой и правой):
<tbody>
<tr>
<td id="leftcol">содержимое колонки</td>
<td id="rightcol">содержимое колонки</td>
</tr>
</tbody>
</table>
24) Аналогичным образом вы создаете вторую и третью строку колонок - в итоге у вас должен получиться макет из двух колонок и трех строк.
25) После тега </body> вставляете тег подвала страницы <footer> и указываете в нем произвольное содержимое.
17) Для добавления простых колонок нужно добавить на страницу CSS-стиль этих колонок и добавить их в HTML. Для этого после закрытого тега <style> открываем этот же тег с атрибутом type:
<style type="text/css">
18) Создаем идентификатор #maket и указываем в нем атрибут ширины макета в процентах ( в моем примере - 145%). После этого закрываем идентификатор
19) Обозначаем селекторы таблиц-колонок с идентификаторами левой и правой. Ширину вы задаете свою, как и фоновые цвета:
TD {
vertical-align: top;
padding: 5px;
}
TD#leftcol {
width: 800px;
background: #87ceeb;
}
TD#rightcol {
width: 500px;
background: #4169e1;
}
20) После этого задаем подвал сайта с помощью селектора footer и указываем его атрибуты: цвет (background-color), цвет текста (color) и ширину (width) в процентах (равна ширине всего макета)
21) Закрываем селектор футера и тег <style>
22) После закрытой части меню навигации задаем колонки как таблицу с идентификатором макета:
<table cellspacing="0" id="maket">
23) Внутри указываем тело таблицы с идентификатором колонки (левой и правой):
<tbody>
<tr>
<td id="leftcol">содержимое колонки</td>
<td id="rightcol">содержимое колонки</td>
</tr>
</tbody>
</table>
24) Аналогичным образом вы создаете вторую и третью строку колонок - в итоге у вас должен получиться макет из двух колонок и трех строк.
25) После тега </body> вставляете тег подвала страницы <footer> и указываете в нем произвольное содержимое.
Если все верно, то ваше меню будет выглядеть следующим образом: https://konoplevtech3.blogspot.com/2019/02/css.html
Ссылки на выполненное задание принимаются в комментариях до 20:00 20 февраля.
https://olyaalenina.blogspot.com/2019/02/2.html
ОтветитьУдалитьОценка "хорошо". Между меню и колонками поставлен лишний символ.
Удалитьhttps://ekaterinalukasheva.blogspot.com/2019/02/2.html
ОтветитьУдалитьОценка "хорошо". Использована не рекомендованная тема - из-за этого съехала верстка.
Удалитьhttps://babushkink.blogspot.com/2019/02/2.html
ОтветитьУдалитьОценка "хорошо" - ширина колонок и меню не совпадают.
Удалитьhttps://dianaklesch.blogspot.com/2019/02/2.html
ОтветитьУдалитьОценка "хорошо" - видимо вы позаимствовали чужой код с ошибкой - после меню вылез лишний символ.
Удалитьhttps://usowayulya.blogspot.com/2019/02/2.html
ОтветитьУдалитьОценка "отлично"
Удалить