Плавающая врезка
Постановка задачи
Создать врезку при помощи плавающего блока.
Примерный вид показан на рисунке слева.
Этапы разработки
Горизонтальное меню
Постановка задачи
Создать горизонтальное меню при помощи плавающих блоков.
Этапы разработки
-
Шаг 1:
example/03/menu/v01/
, index.htm, main.css -
Шаг 2:
example/03/menu/v02/
, index.htm, main.css -
Шаг 3:
example/03/menu/fin/
, index.htm, main.css
Плавающие колонки фиксированной ширины
Постановка задачи
Создать шаблон сайта с двумя колонками фиксированной ширины на базе плавающих блоков.
Этапы разработки
-
Шаг 1:
example/03/maket1/v01/
, index.htm, main.css -
Шаг 2:
example/03/maket1/fin/
, index.htm, main.css
Плавающие пропорциональные колонки
Постановка задачи
Создать шаблон сайта с двумя «резиновыми» колонками на базе плавающих блоков.
Этапы разработки
-
Шаг 1:
example/03/maket2/v01/
, index.htm, main.css -
Шаг 2:
example/03/maket2/fin/
, index.htm, main.css
Cайт «Фотография»
Постановка задачи
Построить сайт с двумя колонками фиксированной ширины по следующему макету:
Этапы разработки
-
Шаг 1:
example/03/foto/v01/
, index.htm -
Шаг 2:
example/03/foto/v02/
, index.htm, main.css -
Шаг 3:
example/03/foto/v03/
, index.htm, main.css -
Шаг 4:
example/03/foto/v04/
, index.htm, main.css -
Шаг 5:
example/03/foto/v05/
, index.htm, main.css -
Шаг 6:
example/03/foto/v06/
, index.htm, main.css -
Шаг 7:
example/03/foto/v07/
, index.htm, main.js -
Шаг 8:
example/03/foto/fin/
, main.js, main.css, work.css
В финальном варианте работают все ссылки в главном (горизонтальном) меню и ссылка «Портрет» на боковой панели.