Верстка и веб-дизайн. 3 курс. Практическое занятие №2. Простой макет страницы с типовым меню
Вам необходимо создать макет страницы, содержащей:
- меню с пятью вкладками основного блока и тремя вкладками подменю;
- заголовок и лидер-абзац (описание);
- иллюстрацию (загрузите в репозиторий);
- кнопку;
- фоновый градиент страницы;
Для этого вам потребуется создать файл стилей CSS и подключить его к HTML.
Для корректного отображения макета измените тему блога на Notable Light и публикуйте задание в разделе страницы. Если предыдущее задание накладывается на текущее - также перенесите его в раздел страницы.
В левом сайдбаре блога выставите следующие настройки:
Тема - настроить - расширенные - заголовок - цвет фона - прозрачный
Тема - настроить - расширенные - отдельное сообщение или страница - цвет фона заголовка сообщений - прозрачный
Настройки - комментарии - скрыть
Тема - настроить - гаджеты - обо мне - скрыть
Тема - настроить - гаджеты - архив блога - скрыть
Тема - настроить - гаджеты - страницы - скрыть
Тема - настроить - гаджеты - популярные сообщения - скрыть
Дизайн - Боковая панель - скрыть
CSS
1) Задаем общий селектор:
* {
box-sizing: border-box;
}
2) В селекторе основой части страницы указываем фоновый градиент. Используйте ваши цвета.
body {
font-family: 'Open Sans', sans-serif;
background: linear-gradient(120deg, цвет1, цвет2,цвет3);
}
3) Указываем параметры цвета для ссылок-вкладок. Укажите ваши цвета:
a {
color: цвет;
}
a:visited {
color: цвет;
}
a:hover {
color: цвет;
}
4) Задаем параметры меню и класс общего контейнера:
ul {
list-style: none;
padding: 0;
margin: 0;
}
.container {
padding-left: 5px;
padding-right: 5px;
margin-left: auto;
margin-right: auto;
margin-top: -70px;
}
5) Параметры адаптивной верстки для мобильных устройств:
@media (min-width: 780px) {
.container {
width: 760px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 767px) {
.container {
width: 1170px;
}
}
.flat-page header {
min-height: 80px;
display: flex;
}
@media (max-width: 767px) {
.flat-page header {
min-height: auto;
display: initial;
}
}
.flat-page header .container {
display: flex;
align-items: center;
justify-content: space-between;
}
@media (max-width: 767px) {
.flat-page header .container {
flex-direction: column;
justify-content: center;
}
}
6) Логику отображения контента и ссылок:
.flat-page header .links {
display: flex;
align-items: center;
}
@media (max-width: 900px) {
.flat-page header .links {
text-align: center;
gap: 20px;
}
}
7) Цвет ссылок по умолчанию. Укажите свой:
.flat-page header .links li {
margin-left: 10px;
color: цвет;
cursor: pointer;
transition: .3s;
}
@media (max-width: 900px) {
.flat-page header .links li {
margin-left: auto;
}
}
8) Цвет кнопок меню по умолчанию. Также выберите свой:
.flat-page header .links li:last-child {
border-radius: 20px;
padding: 10px 20px;
color: #FFF;
background-color: цвет;
}
9) Параметры выравнивания объектов в контейнере:
.flat-page .content .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 140px;
min-height: calc(100vh - 80px);
}
@media (max-width: 767px) {
.flat-page .content .container {
gap: 0;
min-height: calc(100vh - 101px);
justify-content: center;
flex-direction: column-reverse;
}
}
@media (max-width: 767px) {
.flat-page .content .info {
text-align: center;
margin-bottom: 15px
}
}
10) Добавьте цвет заголовка:
.flat-page .content .info h1 {
color: цвет;
font-size: 38px;
}
11) И абзаца:
.flat-page .content .info p {
margin: 0;
line-height: 1.6;
font-size: 15px;
color: цвет;
}
12) Фоновый цвет кнопки внизу и тени под ней:
.flat-page .content .info button {
border: 0;
border-radius: 20px;
padding: 12px 30px;
margin-top: 30px;
cursor: pointer;
color: #FFF;
background-color: цвет;
box-shadow: 0px 4px 8px цветтени;
}
13) Отображаемый размер картинки. Измените при необходимости:
.flat-page .content .image img {
max-width: 120%;
margin-top: 50px;
}
14) Теперь добавляем меню навигации:
nav {
margin: 0 auto;
margin-top: 3em;
width: 1083px;
margin-left: -20px;
}
nav ul {
text-align: left;
display: inline;
margin: 0;
padding: 1em 1em 1em 0;
list-style: none;
}
nav ul li {
display: inline-block;
margin-right: .01em;
position: relative;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
border-radius: 30px 30px 30px 30px;
padding: 1em 2em;
background: #6c63ff;
line-height: 0.8;
box-shadow: 0px 4px 8px lightgreen;
width: 10em;
}
15) Ссылки в меню и их цвет по умолчанию (укажите):
nav li a {
padding-bottom: 1em;
text-decoration: none;
cursor: pointer;
font-size: 14px;
padding: 21px;
text-decoration: none;
font-weight: bold;
font-family: 'Roboto', sans-serif;
color: цвет;
}
16) Цвет вкладок при наведении курсора. Укажите свой:
nav ul li:hover {
background: цвет;
}
17) Отступы и логика раскрытия меню:
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;
}
18) Цвет субменю по умолчанию (укажите):
nav ul li ul li {
background-color: цвет;
display: block;
color: #ffffff;
text-shadow: 0 1px 0 #000;
top: -0.5em;
}
19) И при наведенном курсоре:
nav ul li ul li:hover {
background-color: цвет;
}
20) Блочное отображение макета и его упаковки:
nav ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
#wrapper {
margin: 0 auto;
width: 100%;
text-align: center;
}
21) Сохраните ваш CSS
HTML
22) Открываем основные теги, в хэдере указываем название страницы:
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<title>Ваше название</title>
23) Встраиваем шрифт и библиотеку CSS:
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
24) Теперь ваш CSS. Загрузите его в репозиторий, ссылку из режима raw конвертируйте через http://raw.githack.com/ (development link) и подключите через тег link. Если вам не удается получить доступ к конвертированной ссылке, подключайте стили через тег <style>.
25) Закройте </head> внутри <body> откройте классы страницы, контейнера и идентификатор упаковки макета:
<div class="flat-page">
<header>
<div class="container">
<div id="wrapper">
26) Теперь откройте навигационное меню. В моем примере три вкладки меню и три подменю. У вас должно быть пять вкладок меню и три подменю. используйте свои имена вкладок и ссылки:
<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>
<li><a href="">подменю 3</a>
</li>
</ul>
</li>
<li><a href="">вкладка 3</a></li>
</ul>
27) Закрываем меню и хэдер:
</nav>
</div>
</div>
</header>
28) Открываем класс контента, контейнера и текстовую часть:
<div class="content">
<div class="container">
<div class="info">
29) Добавьте свой заголовок в теге <h1> и лидер-абзац в теге <p>
30) Затем кнопку внизу с вашим текстом:
<button><a href="" target="_blank">текст кнопки</a></button>
</div>
31) Добавляем класс фото и указываем ссылку на фото в репозитории:
<div class="image">
<img src="ссылка на фото">
32) закрываем четыре оставшихся тега </div>
33) Закрываем оставшиеся теги </body> и </html>
Если все верно, то ваша страница будет выглядеть примерно так: https://konoplevdesign3.blogspot.com/p/flat-page-box-sizing-border-box-body.html
Ссылки на выполненное задание принимаются в комментариях к данному посту до 15:00 вторника, 24 февраля.
РЕЗУЛЬТАТЫ (данные обновляются):
Антонова Яна - 5
Буторин Егор - 4
Кадышев Дмитрий - 4
Котельникова Анна - 5
Лежнина Полина - 5
https://yanaantonova.blogspot.com/p/blog-page.html
ОтветитьУдалитьhttps://slavyanskiyzazhim.blogspot.com/2026/02/1-2-3.html
ОтветитьУдалитьhttps://dk-med1a.blogspot.com/2026/02/blog-post_81.html
ОтветитьУдалитьhttps://annyyyyyykot.blogspot.com/p/blog-page.html
ОтветитьУдалитьhttps://paulinellll.blogspot.com/p/picture-box-sizing-border-box-body-font.html
ОтветитьУдалить