Порядок выполнения работы

2019-11-13

272

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 123 4 5 6 7 8 9 10 Следующая ⇒

Используя язык разметки гипертекста html5 и каскадную таблицу стилей CSS3 разработать Web станицу формирования меню, содержащее главную ленту с графическим элементом и двумя пунктами с выпадающими подменю, рисунок 1.1, согласно варианту задания, таблица 1.1. В качестве образца можно использовать приведенный ниже вид меню, рисунок 1.1, а таекже html5 и CSS3 коды, листинги 1.1 и 1.2.

Рисунок 1.1 – Вид меню

Листинг 1.1 – html-код станицы

<!DOCTYPE html> <html> <head> <title>Меню</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <div id="mainmenu"> <ul id="nav"> <li id="settings"> <a href="#"><img src="images/settings.png"></a> </li>

<li><a href="">Пункт-1</a> <ul> <li><a href="#">Команда 1-1</a></li> <li><a href="#">Команда 1-2</a></li> </ul> </li> </ul> </div> </body> </html>

Листинг 1.2 – CSS-код страницы

#mainmenu { float:left; } #mainmenu ul { margin: 10; /* отступ ленты меню сверху*/ padding: 5; /* отступ ленты меню слева*/ list-style: none; } #mainmenu ul li { position: relative; float:left; } #mainmenu ul li ul, #mainmenu ul li ul li { width:130px; color:red; /* */ } #mainmenu li ul { position: absolute; left: 0; top: 29px; display: none; float:left; } #mainmenu ul li a { float:left; color:blue; /*Цвет текста глав меню */ width:80px; /*Длина ленты глав меню */ font-size:16px;

padding: 10px 0 10px 0; text-align:center; background: #00f0f0;/*цвет фона гл меню*/ } #mainmenu li ul li a { padding:5px 0 3px 10px; text-align:left; font-size:12px; width:80px; background: #EEEEEE; /*Цвет поля группы выбр-го пoдменю*/ } #mainmenu li ul li a:hover { background: #0ffff0; /*Цвет фона подменю */ color:blue; } #settings a { /*Графич-й эл-т */ padding: 18px; height: 19px; /*Высота графич эл-та */ font-size: 10px; line-height: 24px; } * html #mainmenu ul li {float: left; height: 1%;} * html #mainmenu ul li a { height: 1%; } #mainmenu li:hover ul, #mainmenu li.over ul { display: block; }

Порядок выполнения работы: выполнить задания приведены в колонках: 2, 3, 4 и 5 таблицы 1.1. В колонке 2 указаны темы, для которых необходимо разработать Web станицу формирования меню, в колонке 3 – параметры главной ленты меню: направление главной ленты меню (гориз – горизонтальное, верт – вертикальное); фон – цвет фона ленты меню; текст – цвет текста пунктов меню. В колонках 4 и 5 указано количество пунктов второго и третьего подменю (2 или 3), цвет фона подменю и цвет текста его пунктов.

Главное меню должно отстоять от верхней границы окна браузера на 20 px, слева – на 12 px и содержать слева графический элемент.

Таблица 1.1 – Варианты заданий

№ ва-рианта	Тема	Главная лента меню: фон/текст	Подменю 1: пунктов/фон/текст	Подменю 2: пунктов/фон/текст
1	2	3	4	5
1	Торговая фирма	Гориз/Pink/Red	3/Blue/Blue	2/Aqua/Violet
2	Ремонт авто	Верт/Coral/Blue	2/Navy/Navy	3/Olive/Aqua
3	Расписание занятий	Гориз/Gold/Navy	3/Olive/Aqua	2/Navy/Navy
4	Летняя одежда	Верт/Khaki/Aqua	2/Aqua/Violet	3/Blue/Blue
5	Ремонт компьютеров	Гориз/Plum/Black	3/Black/Red	2/Tan/Gold
6	Швейное ателье	Верт/Purple/Violet	2/Tan/Gold	3/Violet/Blue
7	Ремонт телевизоров	Гориз/Indigo/Tan	3/Violet/Blue	2/Purple/Navy
8	Головные уборы	Верт/Peru/Coral	2/Purple/Navy	3/Blue/Red
9	Зимняя одежда	Гориз/Gray/Gold	3/Blue/Red	2/Olive/Aqua
10	Продукты питания	Верт/Red/Plum	2/Olive/Aqua	3/Peru/ Gold
11	Детские игрушки	Гориз/Lime/Peru	3/Peru/ Gold	2/Pink/ Blue
12	Модели авто	Верт/Aqua/Gray	2/Pink/ Blue	3/Blue/Blue

Контрольные вопросы

1 Какие программные средства используются для создания Web-страниц?

2 Для чего используются CSS в Web программировании?

3 Какова структура объявления стиля?

4 Из каких разделов состоит html-документ?

5 Как изменить параметры текста в html-документе (размер, цвет, стиль)?

6 Как создать таблицу в html-документе и вставить рисунок в ее ячейку?

7 Как построить гиперссылку, заголовок и список в html-документе?

8 Как построить гиперссылку на графическом элементе?

9 Как установить параметры ленты меню Web-страницы?

10 Как подключить таблицу CSS стилей к html-документу?

2019-11-13

272

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 123 4 5 6 7 8 9 10 Следующая ⇒

Обсуждение в статье: Порядок выполнения работы

Обсуждений еще не было, будьте первым... ↓↓↓