УРОК "CSS для верстання веб-сторінки"

УРОК "CSS для верстання веб-сторінки" - завдання 1

Post on 22 квітня 2018

by Super User

in Уроки CSS

Завдання 1 для уроку "CSS для верстання веб-сторінки".

1. Скачати архів зі сайтом "Онлайн Кінотеатр" http://it-shkola.in.ua/images/css-lessons/22-04-18-les.zip і розпакувати його.

2. Створити файл із зовнішньою таблицею стиів і назвати його style.css

3. Підлючити файл стилів.

4. Перенести у нього внутрішні стилі.

5. Перенести у нього вбудовані стилі (за бажанням).

6. Після головного заголовка зробити головне горизонтальне меню

- додати абзац

- вставити три посилання, для них вказати налаштування: без підкреслювання, стан a:hover - колір жовтий, стан a:active - колір зелений

Головна посилання на файл index.html

Анонси посилання на файл anons.html

Про сайт посилання на файл about.html

- між посиланнями вставити пробіли

7. Відформатувати текст за допомогою зовнішньої таблиці стилів:

1) усі заголовки фільмів - заголовки h2, колір #FFA07A, розмір 50px; вирівнювання по центру, лінія над текстом, насиченість bold

2) назва фільму англійською - на білому фоні, гугл-шрифт Gugi, колір шрифта FireBrick, вирівнювання по центру, лінія під текстом

3) рядок "Прем'єра в Україні" - жовтим кольором, стиль накреслення - курсив

4) кожне речення опису фільму зробити як новий рядок

5) афіша до фільмів:

- у папці img розібратись, які картинки підходять для якого фільму,

- вставити зображення-афішу у перший абзац опису,

- вказати ширину 150px

- вказати відступ справа 5px (підказка margin-right: 5px; )

- вказати у атрибуті стилів для зображення обтікання float:left;

8. Після кожного кінофільму вставити горизонтальну лінію.

9. Створити файл about.html

- скопіювати вміст файлу index.html

- створити новий файл і вставити у нього скопійований вміст index.html

- зберегти файл під іменем about.html

8. Підготовка about.html

- видалити частину файлу між рядками

та

- замість видаленого тексту вставити абзац з текстом, який описує тематику сайту.

Результат: http://it-shkola.in.ua/images/css-lessons/site-1.jpg

Main menu

Мітки

Базовий html-код

Кольори html

Google Fonts

УРОК "CSS для верстання веб-сторінки" - завдання 1

Свіже