Разработка адаптивного сайта

Август 8, 2022

Главная
Информатика
Разработка адаптивного сайта

Содержание

3. Оформление контента сайта
4. Продолжайте работу с сайтом, созданном в лабораторной работе 8 (можно взять из папки test9). Добавьте ниже
5. В файле style.css добавьте одну команду, чтобы блоки разместились как на рисунке:
6. Добавьте стили для оформления текста: У заголовка блока добавьте тень
7. Добавьте стили для того, чтобы элементы формы расположились в столбик (используя flex-верстку)
8. Добавьте стили для оформления элементов формы. Добавьте стили для размещения всей формы по центру правого блока
9. Добавьте медиа-запросы для адаптивной верстки. В примере .content – это класс всей секции, .content_form – для
10. Оформление меню сайта
11. Добавьте в нужное место семантический блок для меню. Поместите в данный блок маркированный список со ссылками
12. Залейте меню градиентной заливкой Добавьте стили, чтобы ссылки меню расположились как на рисунке: Добавьте оформление для
13. Ссылки-якоря Для каждого добавьте произвольное id У ссылок в значении адреса укажите соответствующие якоря (id) Например,
14. Создание статичного меню Для создания статичного меню в стили меню добавьте следующие строки:
16. Скачать презентацию

Слайд 2

Слайд 3

Оформление контента сайта

Слайд 4

Продолжайте работу с сайтом, созданном в лабораторной работе 8 (можно взять

из папки test9).
Добавьте ниже еще одну секцию, задайте ей произвольный класс
Внутрь данной секции поместите еще 2 блока.
Первый внутренний блок должен содержать произвольный текст (заголовок и несколько абзацев).
Второй внутренний блок должен содержать два поля ввода и кнопку Отправить.
Добавьте стили, обязательные для блока.

Слайд 5

В файле style.css добавьте одну команду, чтобы блоки разместились как на

рисунке:

Слайд 6

Добавьте стили для оформления текста:
У заголовка блока добавьте тень

Слайд 7

Добавьте стили для того, чтобы элементы формы расположились в столбик (используя

flex-верстку)

Слайд 8

Добавьте стили для оформления элементов формы.
Добавьте стили для размещения всей формы

по центру правого блока

Слайд 9

Добавьте медиа-запросы для адаптивной верстки.
В примере .content – это класс всей

секции, .content_form – для правого блока (вам нужно поправить на свои названия классов)

Слайд 10

Оформление меню сайта

Слайд 11

Добавьте в нужное место семантический блок для меню.
Поместите в данный

блок маркированный список со ссылками меню

Слайд 12

Залейте меню градиентной заливкой
Добавьте стили, чтобы ссылки меню расположились как на

рисунке:

Добавьте оформление для ссылок и для ссылок при наведении.

Слайд 13

Ссылки-якоря
Для каждого добавьте произвольное id
У ссылок в значении адреса укажите соответствующие

якоря (id)
Например, для блока Галерея задано id=“gallery”
В меню указывается соответствующий якорь:

Проверьте работу ссылок

Слайд 14

Создание статичного меню
Для создания статичного меню в стили меню добавьте следующие

строки: