Самостоятельная

Здесь отдельно представлены задачи из учебных курсов для самостоятельного решения. Как правило, такие задачи можно решать разными методами, для одного приводится решение и даётся ответ.

relative и absolute

Создайте веб-страницу, показанную на рис. 1. Вид в браузере IE может несколько отличаться.

Рис. 1

relative и absolute 2

Создайте веб-страницу, показанную на рис. 1. Поверх фотографии в правом нижнем углу выводится картинка с полупрозрачным фоном (прозрачность 50%).

Рис. 1

Абсолютное позиционирование

Используя absolute выведите карты на расстоянии 50% слева и 50 пикселей сверху, как показано на рис. 1.

Рис. 1

Абсолютное позиционирование 2

Создайте ве-страницу, как показано на рис. 1.

Рис. 1

Блочные элементы

Создайте веб-страницу, показанную на рис. 1.

Рис. 1

Блочные элементы 2

Создайте веб-страницу, показанную на рис. 1. Вся строка в списке является ссылкой и меняет свой вид при наведении на неё курсора.

Рис. 1

Введение в CSS

Перейдите на сайт Plunker и отредактируйте файлы index.html и style.css, чтобы они соответствовали примерам 1 и 2. Остальные имеющиеся файлы удалите. После этого нажмите чёрную кнопку Run. Если всё сделано правильно, то вы увидите результат, похожий на рис. 1.

Plunker

Рис. 1. Plunker

Для дальнейшей работы можете сохранить код или скачать его на свой компьютер в виде архива.

Жирность шрифта

Создайте веб-страницу, как показано на рис. 1.

Рис. 1

Для подключения шрифта используйте следующую ссылку:

<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700" rel="stylesheet">

Сам шрифт в стилях указывается так:

font-family: 'Oswald', sans-serif;

Липкое позиционирование

Создайте веб-страницу, как показано на рис. 1, чтобы при прокрутке документа меню прилипало к верхнему краю браузера.

Рис. 1

Липкое позиционирование 2

Создайте веб-страницу, как показано на рис. 1, чтобы при прокрутке документа блок с картинками социальных сетей прилипал к верхнему краю браузера.

Рис. 1