Верстка и веб-дизайн. 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) Теперь задаем общий идентификатор колонок макета. В нем также нужно указать ширину (width) и отступ слева (margin-left) - первую в процентах (%), второй - в пикселях (px). Выставляя эти значения ориентируйтесь на размеры меню вверху.
#frameset {
overflow: hidden;
}
12) Это класс правой колонки в верстке:
.right {
float:left;
width:49%;
height: 300px;
background:steelblue;
}
13) А это левой:
.left {
float:left;
width:50%;
height: 300px;
background:blue;
}
14) Задаем футер. Используйте свой цвет фона и шрифта, также укажите отступ и ширину, ориентируясь на идентификатор frameset. в данном случае значения могут немного отличаться.:
footer {
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/2025/02/blog-post.html
Ссылки на выполненное задание принимаются в комментариях к данному посту до 15:00 1 марта.
Анастасия Федякина https://nastuuuuuushk.blogspot.com/2025/02/2.html
ОтветитьУдалитьОценка "отлично"
Удалитьhttps://elizavetauharskih25.blogspot.com/2025/02/2.html
ОтветитьУдалитьОценка "отлично"
Удалитьhttps://smotrikisa.blogspot.com/2025/02/blog-post.html
ОтветитьУдалитьПоставьте ширину колонок по ширине меню - сейчас у вас width: 49%;
Удалитьmargin-left: 110px; Должно быть примерно 140% ширина и 15px отступ
https://smotrikisa.blogspot.com/2025/02/blog-post_28.html
УдалитьОценка "отлично"
Удалитьhttps://halfcontent.blogspot.com/2025/02/html-langru-menu-body-background-color.html
ОтветитьУдалитьОценка "хорошо", нет пятой вкладки в меню, колоночный макет задан неверно - вы просто удвоили идентификатор frameset.
Удалитьhttps://linislamova.blogspot.com/2025/02/2.html
ОтветитьУдалитьОценка "отлично"
Удалитьhttps://smotrikisa.blogspot.com/2025/02/blog-post_28.html
ОтветитьУдалитьhttps://yanniiish.blogspot.com/2025/02/2_13.html
ОтветитьУдалитьОценка "отлично"
УдалитьЭтот комментарий был удален автором.
ОтветитьУдалитьУберите из кода текст задания - он всю верстку и сносит, и сделайте пять вкладок и три блока подменю.
УдалитьШагивалеев
ОтветитьУдалитьhttps://danyashagivaleyevlll.blogspot.com/2025/02/blog-post_28.html
Оценка "отлично"
Удалитьhttps://kovalvlad369.blogspot.com/2025/02/1-2-3-1-2-3-4-5-1-1-2-2.html
ОтветитьУдалитьНе принято. Смените тему, на указанную в задании, а также добавьте пятую вкладку в меню и третью в подменю, как требуется по условиям.
Удалитьhttps://polinagorbunova.blogspot.com/2025/03/28022025.html
ОтветитьУдалитьОценка "отлично"
Удалитьhttps://albinazhipovacoding.blogspot.com/2025/03/2.html (с компьютера итоговый вариант опять открывается сломано, хотя в предпросмотре все нормально. с телефона та же ситуация, открывается)
ОтветитьУдалитьЭто уже дело в браузере. В Google Chrome все в порядке. Оценка "отлично".
Удалить