Табличная верстка Создаётся с помощью обычной таблицы, таблица делится на колонки, а колонки на ячейки, в каждой ячейке можно расположить т

flex-grow- Применяется к: дочернему элементу. Определяет для flex-элемента возможность «вырастать» при необходимости.

flex-shrink- Применяется к: дочернему элементу. Определяет для flex-элемента возможность «сжиматься» при необходимости.

Align-self – выравнивание отдельного элемента(Применяется к: дочернему элементу)

1.63M

Категория:

Программное обеспечение

Похожие презентации:

Flexbox

Flexbox. Главная задумка flex - вёрстки

Работа с макетом сайта

Введение в язык разметки HTML

Верстка сайтов HTML5+CSS3

HTML-верстка

Вёрстка и дизайн газетной статьи

Блочно-иерархический подход к проектированию

Симметричный блочный алгоритм шифрования данных IDEA

Блочная вёрстка

1. Блочная вёрстка

Данильченко Анна Александровна
Преподаватель кафедры программного
обеспечения систем ЖГТУ

2. Виды верстки

Блочная
верстка
Табличная
Верстка
верстка
flexbox

3. Табличная верстка Создаётся с помощью обычной таблицы, таблица делится на колонки, а колонки на ячейки, в каждой ячейке можно расположить т

Табличная верстка
Создаётся с помощью обычной таблицы, таблица делится на
колонки, а колонки на ячейки, в каждой ячейке можно расположить
то, что вам требуется шапка, меню, контент, подвал и всё что
должно быть по задумке на сайте.
<body>
<table width="100%" cellpadding="5" cellspacing="0">
<tr> <td height="30" colspan="3" bgcolor="#F0FC0A"> Заголовок сайта </td></tr>
<tr> <td bgcolor="#990033" valign="top"> Левая колонка </td> <td bgcolor="#999966" valign="top">
Контент </td> <td bgcolor="#09EDD6" valign="top"> Правая колонка </td> </tr>
<tr> <td height="30" colspan="3" bgcolor="#cccccc"> Подвал страницы </td> </tr>
<table>

4. Блочная верстка

5. Табличная верстка

+
сама по себе верстка простая
+ легко обеспечить одинаковый
вид во всех браузерах
+ резиновая верстка, при
изменении разрешения экрана,
таблица формируется
автоматически, растягивая и
сжимая ячейки.
- много лишнего кода,
большой вес страниц
-не каждый дизайн возможно
создать
- медленная загрузка страниц

6. Блочная верстка

+
компактный код, небольшой вес
страниц
+ отличная индексация
поисковиками
+ слои можно накладывать друг
на друга
+ быстрая загрузка страниц
сама по себе верстка сложная
-трудно обеспечить одинаковый
вид во всех браузерах
-- при уменьшении разрешения
экрана/браузера блоки съезжают
друг на друга (нужна настройка в
стилях под разрешения экрана)

7. Блочная верстка

<div> - является блочным элементом и
предназначен для выделения
фрагмента документа с целью
изменения вида содержимого. Как
правило, вид блока управляется с
помощью стилей.
</div> - Обязателен!

8.

9.

10. 11. float

Left - Выравнивает элемент по левому краю, а все остальные элементы, вроде текста,
обтекают его по правой стороне.
Right - Выравнивает элемент по правому краю, а все остальные элементы обтекают его по
левой стороне.
None -Обтекание элемента не задается. (по умолчанию)
Inherit - Наследует значение родителя.

12. Пример

float:left;
нижняя граница предыдущего плавучего блока
А если высота первого пункта оказалась бы больше

13. position

Absolute
-
абсолютно позиционирован, при этом другие элементы
отображаются на веб-странице словно абсолютно позиционированного
элемента и нет
Положение элемента задается свойствами:
left
top
right
bottom

14. fixed

привязывается к указанной
свойствами left, top, right и bottomточке
на экране и не меняет своего положения
при прокрутке веб-страницы

15. relative

Положение элемента устанавливается относительно его
исходного места. Добавление
свойств left, top, right и bottom изменяет позицию
элемента и сдвигает его в ту или иную сторону от
первоначального расположения.
Absolute
relative

16. static

inherit
Элементы отображаются как обычно.
Использование
свойств left, top, right и bottom не приводит к
каким-либо результатам.
Наследует значение
родителя.

17. z-index

Любые позиционированные элементы на вебстранице могут накладываться друг на друга в
определенном порядке, имитируя тем самым
третье измерение, перпендикулярное экрану.
Каждый элемент может находиться как ниже,
так и выше других объектов веб-страницы, их
размещением по z-оси и управляет z-index.
Для position задано как absolute, fixed или relative.

18. z-index: число | auto | inherit

Число - Чем больше значение, тем выше находится элемент по
сравнению с теми элементами, у которых оно меньше.
auto — порядок элементов в этом случае строится
автоматически, исходя из их положения в коде HTML
inherit указывает, что оно наследуется у родителя.

19. Пример

<p>Слой 1 наверху</p>
<div id="layer1"><a href="mmm.php">Ссылка
1</a></div>
<div id="layer2"><a href="222.php">Ссылка
2</a></div>
<p>Слой 4 наверху</p>
<div id="layer3">Слой 3</div>
<div id="layer4">Слой 4</div>
#layer1 { z-index: 2; }
#layer2 { z-index: 1; }
#layer3 { z-index: 3; }
#layer4 { z-index: 4; }
#layer1, #layer2, #layer3, #layer4 {
position: relative; /* Относительное позиционирование */

20. Пример

21. Пример

Жесткая HTML & CSS верстка блоками

22. Пример

Резиновая HTML & CSS верстка блоками

23. Flexbox

Главная задумка flex-вёрстки в наделении контейнера
способностью изменять ширину/высоту (и порядок) своих
элементов для наилучшего заполнения пространства (в
большинстве случаев — для поддержки всех видов
дисплеев и размеров экранов). Flex-контейнер
растягивает элементы для заполнения свободного места
или сжимает их, чтобы предотвратить выход за границы.

24. Оси

25. Оси

26.

27.

28. 29. display: flex | inline-flex;

Применяется к: родительскому элементу flex-контейнера.
Определяет flex-контейнер (инлайновый или блочный в зависимости от
выбранного значения), подключает flex-контекст для всех его
непосредственных потомков.

30. 31. Пример

HTML
<div class="flex">
<div><h1>Я ПЕРВЫЙ</h1></div>
<div><h1>Я ВТОРОЙ</h1></div>
<div><h1>Я ТРЕТИЙ</h1></div>
<div><h1>Я ЧЕТВЕРТЫЙ</h1></div>
</div>
.flex {
height:640px;
}
.flex div {
float:left;
background:#039;
border-radius:5px;
padding:5px;
margin-left:10px;
}
.flex div:first-child {
background:#090;
}
.flex div:last-child {
background:#C00;
}

32. Включим flexbox

.flex {
height:640px;
display:flex;
}

33. 34. Меняем направление по оси

.flex {
height:640px;
display:flex;
background: #838283;
flex-direction:row-reverse;
}

35. Поворачиваем саму ось

.flex {
height:640px;
display:flex;
background: #838283;
flex-direction:column;
}

36. Меняем направление по оси

.flex {
height:640px;
display:flex;
background: #838283;
flex-direction:column-reverse;
}

37. 38. Пример

.flex {
height:640px;
display:flex;
background: #838283;
}
.flex {
height:640px;
display:flex;
background: #838283;
justify-content:flex-end;
}
.flex {
height:640px;
display:flex;
background: #838283;
justify-content:center;
}

39. 40. Пример

.flex {
height:640px;
display:flex;
background: #838283;
justify-content:center;
align-items:flex-end;
}
.flex {
height:640px;
display:flex;
background: #838283;
justify-content:center;
align-items:stretch;
} .flex {
height:640px;
display:flex;
background: #838283;
justify-content:center;
align-items:center;
}

41. Перестановка

Применяется к: дочернему элементу
order: <integer>

42.

.flex div:first-child {
background:#090;
order:2;
}
.flex div:last-child {
background:#C00;
order:1;
}
.flex div:nth-child(2) {
order:3;
}

43. flex-grow- Применяется к: дочернему элементу. Определяет для flex-элемента возможность «вырастать» при необходимости.

flex-grow- Применяется к: дочернему
элементу. Определяет для flex-элемента
возможность «вырастать» при
необходимости.
flex-grow: <number> (по умолчанию 0)
.flex div:first-child {
background:#090;
flex-grow:1;
}
.flex div:last-child {
background:#C00;
}
.flex div:nth-child(2) {
flex-grow:2;
}

44. flex-shrink- Применяется к: дочернему элементу. Определяет для flex-элемента возможность «сжиматься» при необходимости.

flex-shrink- Применяется к: дочернему элементу.
Определяет для flex-элемента возможность «сжиматься»
при необходимости.
flex-basis- Применяется к: дочернему элементу. Определяет размер по
умолчанию для элемента перед распределением пространства в контейнере.

45. Align-self – выравнивание отдельного элемента(Применяется к: дочернему элементу)

Align-self – выравнивание отдельного
элемента(Применяется к: дочернему элементу)
.flex {
height:640px;
display:flex;
background: #838283;
justify-content:center;
align-items:stretch;
}
.flex div:nth-child(2) {
flex-grow:1;
align-self:flex-start;
}
align-self: auto | flex-start | flex-end | center | baseline | stretch

46.

47.

Читать
Поддержка Flexbox в браузерах
Таблица соответствия F09 и F11
Таблица соответствия F09 и F11 для IE10
CSS3 Flexplorer
Использование Flexbox от Mozilla
Руководство по Flexbox от Microsoft

48. Задание

49. Вопросы

English Русский Правила