Верстка и веб-дизайн. 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 марта.

Комментарии

  1. Анастасия Федякина https://nastuuuuuushk.blogspot.com/2025/02/2.html

    ОтветитьУдалить
  2. Ответы
    1. Поставьте ширину колонок по ширине меню - сейчас у вас width: 49%;
      margin-left: 110px; Должно быть примерно 140% ширина и 15px отступ

      Удалить
    2. https://smotrikisa.blogspot.com/2025/02/blog-post_28.html

      Удалить
  3. https://halfcontent.blogspot.com/2025/02/html-langru-menu-body-background-color.html

    ОтветитьУдалить
    Ответы
    1. Оценка "хорошо", нет пятой вкладки в меню, колоночный макет задан неверно - вы просто удвоили идентификатор frameset.

      Удалить
  4. https://smotrikisa.blogspot.com/2025/02/blog-post_28.html

    ОтветитьУдалить
  5. Этот комментарий был удален автором.

    ОтветитьУдалить
    Ответы
    1. Уберите из кода текст задания - он всю верстку и сносит, и сделайте пять вкладок и три блока подменю.

      Удалить
  6. Шагивалеев
    https://danyashagivaleyevlll.blogspot.com/2025/02/blog-post_28.html

    ОтветитьУдалить
  7. https://kovalvlad369.blogspot.com/2025/02/1-2-3-1-2-3-4-5-1-1-2-2.html

    ОтветитьУдалить
    Ответы
    1. Не принято. Смените тему, на указанную в задании, а также добавьте пятую вкладку в меню и третью в подменю, как требуется по условиям.

      Удалить
  8. https://albinazhipovacoding.blogspot.com/2025/03/2.html (с компьютера итоговый вариант опять открывается сломано, хотя в предпросмотре все нормально. с телефона та же ситуация, открывается)

    ОтветитьУдалить
    Ответы
    1. Это уже дело в браузере. В Google Chrome все в порядке. Оценка "отлично".

      Удалить

Популярные сообщения