Верстка и веб-дизайн. 3 курс. Практическое занятие №2. Макет страницы с меню и колонками
Вам необходимо создать макет страницы с меню из пяти вкладок и субменю из трех вкладок. Для этого вам потребуется файл стилей CSS и подключение его в HTML. Рекомендуемая тема: Notable Light.
I CSS:
1) Создаем селектор страницы на прозрачном фоне:
body {
background-color: transparent;
margin: 0 auto;
}
2) Указываем идентификатор, в который поместим макет:
#wrapper {
margin: 0 auto;
width: 100%;
text-align: center;
}
3) Задаем селектор меню:
nav {
margin: 0 auto;
margin-top: 3em;
width: 1083px;
}
4) Указываем как будем размещать вкладки меню:
nav ul {
text-align: left;
display: inline;
margin: 0;
padding: 1em 1em 1em 0;
list-style: none;
}
5) И особенности выведения вкладок:
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;
}
6) Ссылки во вкладках и их цвет (замените на свой):
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;
}
7) Вкладки при наведении курсора. Также используйте свои цвета:
nav ul li:hover {
background-color: skyblue;
}
8) Вкладки субменю:
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;
}
9) Фон вкладок субменю и тип отображения:
nav ul li ul li {
background-color: skyblue;
display: block;
color: #ffffff;
text-shadow: 0 1px 0 #000;
}
10) Их цвет при наведении курсора:
nav ul li ul li:hover {
background-color: steelblue;
}
nav ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
11) Теперь задаем общий идентификатор колонок макета. Ширину выставляйте в зависимости от ширины вашего экрана:
#frameset {
width: 145%;
overflow: hidden;
}
12) Это правая колонка:
.right {
float:left;
width:49%;
height: 300px;
background:steelblue;
}
13) А это левая:
.left {
float:left;
width:50%;
height: 300px;
background:blue;
}
14) Задаем футер. Цвет фона и текста измените на свои:
footer {
width: 1062px;
background: grey;
color: white;
}
15) Сохраните CSS, загрузите в Github, конвертируйте ссылку через raw.githack.com
II HTML:
16) Задаем исходные параметры страницы в HTML:
<html lang="en">
<head>
<title>Menu</title>
17) Встройте ваш CSS, закройте </head>
18) Внутри <body> задаем идентификатор макета, открываем меню и блок ссылок в меню (используйте свои):
<div id="wrapper">
<nav>
<ul>
<li><a href="ваша ссылка 1">Блок 1</a></li>
<li><a href="ваша ссылка 2">Блок 2</a></li>
<li><a href="ваша ссылка 3">Блок 3</a>
<ul>
<li><a href="ваша ссылка подменю 1">Подменю 1</a></li>
<li><a href="ваша ссылка подменю 2">Подменю 2</a></li>
</ul>
</li>
<li><a href="ваша ссылка меню 4">Блок 4</a></li>
</ul>
</nav>
</div>
В примере 4 блока вкладок и 2 пункта подменю. У вас должно быть 5 вкладок и 3 пункта подменю.
19) Открываем идентификатор колонок:
<div id="frameset">
<div class="left">Содержимое левой колонки</div>
<div class="right">Содержимое правой колонки</div>
</div>
В примере одна строка с колонками, у вас должно быть две.
20) Закрываем </body>
21) Добавьте футер с произвольным содержимым.
22) Закройте тег </html>
Опубликуйте задание отдельным постом у себя в блоге. Если все верно, ваш макет будет выглядеть следующим образом: https://konoplevtech3.blogspot.com/2023/02/blog-post.html
Ссылки на выполненное задание принимаются в комментариях к данному посту до 15:00 вторника, 5 марта.
https://lolivka.blogspot.com/2024/03/blog-post.html
ОтветитьУдалитьОценка "отлично"
Удалитьhttps://dashamalova.blogspot.com/2024/03/2-0103.html - задание от 01.03.2024
ОтветитьУдалитьhttps://dashamalova.blogspot.com/2024/02/10022024.html - задание от 10.02.2024
Текущее - "отлично". Предыдущее - не принято. Вы снова не переключились в режим HTML, исправьте.
Удалитьhttps://marsgolovnitsky.blogspot.com/2024/03/blog-post.html
ОтветитьУдалитьОценка "отлично"
Удалитьhttps://punkmausisntmaus.blogspot.com/2024/03/blog-post.html
ОтветитьУдалитьОценка "хорошо". В макете нет футера.
Удалитьhttps://markpolohov.blogspot.com/2024/03/1324.html
ОтветитьУдалитьОценка "хорошо", нет второй строки с колонками.
Удалитьhttps://svetlanakocharina.blogspot.com/2024/03/blog-post.html
ОтветитьУдалитьОценка "отлично"
УдалитьЭтот комментарий был удален автором.
ОтветитьУдалитьhttps://aliceplaksina.blogspot.com/2024/03/2.html
ОтветитьУдалитьОценка "хорошо", не все вкладки активны из-за смещения меню вправо.
Удалитьhttps://spckq.blogspot.com/2024/03/blog-post.html
ОтветитьУдалитьОценка "отлично"
Удалить