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

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

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

Выравнивание таблицы

Сделайте таблицу, как показано на рис. 1. Ширина таблицы составляет 80% и она выровнена по центру. Обратите внимание, что содержимое третьей колонки выровнено по центру.

Рис. 1

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

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

Рис. 1

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

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

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

font-family: Oswald, sans-serif;