РАЗРАБОТКА МАКЕТОВ Web-страниц С ИСПОЛЬЗОВАНИЕМ CSS-СТИЛЕЙ

Сентябрь 2, 2022

Главная
Алгебра
РАЗРАБОТКА МАКЕТОВ Web-страниц С ИСПОЛЬЗОВАНИЕМ CSS-СТИЛЕЙ

Содержание

2. Основные типы CSS-макетов CSS-макеты создаются на основе: позиционирования position плавающего размещения float смешанные – позиционирование и
3. Макет с фиксацией крайних колонок в окне браузера Левый столбец – положение и ширина зафиксированы: {position:
4. Макет с верхним и нижним колонтитулами и 3 колонками В макете используется только плавающее размещение без
5. Макет с фиксированной шириной и выравниванием по центру Колонка с фиксированной шириной и выравниванием по центру
6. Макет с плавающей шириной и выравниванием по центру Колонка с фиксированной шириной и выравниванием по центру
8. Скачать презентацию

Слайд 2

Основные типы CSS-макетов
CSS-макеты создаются на основе:
позиционирования position
плавающего размещения float
смешанные –

позиционирование и плавающее размещение

Слайд 3

Макет с фиксацией крайних колонок в окне браузера
Левый столбец – положение

и ширина зафиксированы:
{position: absolute; top: 10px; left: 10px; width: 200px;}
Правый столбец - положение и ширина зафиксированы:
{position: absolute; top: 10px; right: 10px; width: 200px;}
Центральный столбец – ширина рассчитывается относительно текущего размера окна браузера:
{margin-left:210px; margin-right:210px; margin-top:10px;}

Слайд 4

Макет с верхним и нижним колонтитулами и 3 колонками
В макете используется

только плавающее размещение без фиксации блоков.
Блок верхнего колонтитула:
style=“width: 100%;”
З центральных блока:
style=“float: left; width: 30%;”
style=“float: left; width: 50%;”
style=“float: left; width: 20%;”
Блок нижнего колонтитула:
style=“width: 100%;”

Слайд 5

Макет с фиксированной шириной и выравниванием по центру
Колонка с фиксированной шириной

и выравниванием по центру окна браузера.
Общий контейнер:
{position: absolute; left: 50%; width: 600px; margin-left: -300px;}
Блок колонки внутри контейнера:
{ margin-top: 100px;}
Заголовок:
{position: fixed; top:0; width: 600px;}

Слайд 6

Макет с плавающей шириной и выравниванием по центру
Колонка с фиксированной шириной

и выравниванием по центру окна браузера.
Общий контейнер:
{margin-left: 300px; margin-right: 300px; }
Блок колонки внутри контейнера:
{ margin-top: 100px;}
Заголовок:
{position: fixed; top:0;}