Css html верстка: Как сверстать веб-страницу. Часть 1 / Хабр

CSS 2

Затем в 1998 году был выпущен CSS 2, и он включал правила позиционирования контента. Например, вы можете установить для свойства float элемента значение 9.0097 левый или правый , чтобы он отображался слева или справа от других элементов, и вы можете установить для свойства display элемента значение block или inline-block , чтобы изменить расположение других элементов. вокруг него. Вы также можете установить положение элемента вручную, если хотите.

Плавающие элементы

Вот как можно создать левую навигацию, используя плавающие элементы:

Редактор кода ?

См. Pen от Happy Coding (@KevinWorkman) на CodePen.

Плавающие элементы по-прежнему широко используются в макетах CSS, хотя у них есть несколько недостатков. Браузер воспринимает плавающие элементы так, как будто они не занимают места, поэтому блок содержимого имеет левое поле. Попробуйте удалить этот стиль, чтобы посмотреть, что произойдет. Затем попробуйте добавить нижний колонтитул на страницу, чтобы понять, почему с плавающими элементами может быть сложно работать.

Блоки

А вот как вы можете сделать это со встроенными блоками:

Редактор кода ?

См. Pen от Happy Coding (@KevinWorkman) на CodePen.

Как и поплавки, встроенные блоки все еще используются в макетах CSS, но у них есть и свои недостатки. Например, браузеры будут переносить встроенный блок на следующую строку, если содержимое становится слишком широким. Попробуйте добавить длинный текст в блок содержимого, а затем уменьшите ширину браузера, чтобы понять, что я имею в виду!

После CSS 2 история CSS стала довольно сложной, в основном потому, что CSS был разделен на кучу разных модулей со своими историями. Короче говоря, CSS 3 был построен поверх CSS 2, и одной из функций, добавленных в CSS 3, был flexbox в 2017 году.0003

Flexbox позволяет определить отношения между родительскими и дочерними элементами. Само по себе это может показаться не очень полезным, но это чрезвычайно мощный инструмент, когда вы пытаетесь разместить кучу контента на своей странице. Например, с помощью flexbox вы можете указать браузеру отображать несколько элементов подряд, и вы можете задать каждому дочернему элементу разные правила относительно того, как изменять свой размер. А всю остальную работу за вас сделает браузер!

Чтобы использовать flexbox, установите display: flex для родительского элемента (элемента, который содержит другие элементы), а затем установите другие свойства flex для родительского и дочернего элементов, чтобы настроить макет.

Например, вот приведенный выше пример навигации слева, на этот раз с использованием flexbox:

Редактор кода ?

См. Pen от Happy Coding (@KevinWorkman) на CodePen.

Свойства Flex

Чтобы использовать flexbox, установите display: flex для родительского элемента (элемента, который содержит другие элементы), а затем установите другие свойства flex для родительского и дочернего элементов, чтобы настроить макет.

Вот несколько общих свойств flex:

display: flex

Это свойство, с которого все начинается. Установите это для родительского элемента (часто div), чтобы указать ему использовать правила гибкости для размещения его дочерних элементов (элементов, которые он содержит).

 .контейнер {
  дисплей: гибкий;
}
 

Редактор кода ?

См. Pen от Happy Coding (@KevinWorkman) на CodePen.

flex-direction

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

 .контейнер {
  дисплей: гибкий;
  flex-направление: столбец;
}
 

Редактор кода ?

См. Pen от Happy Coding (@KevinWorkman) на CodePen.

flex-wrap

По умолчанию flex-контейнеры размещают свои дочерние элементы в одной строке или столбце. Если контейнер содержит больше элементов, чем может поместиться в одну строку, эти элементы сглаживаются.

Чтобы обернуть дочерние элементы вместо их сглаживания, установите flex-wrap на wrap .

 .контейнер {
  дисплей: гибкий;
  flex-wrap: обернуть;
}
 

Редактор кода ?

См. Pen от Happy Coding (@KevinWorkman) на CodePen.

Значение по умолчанию: , сейчас .

Для гибких контейнеров с обернутыми дочерними элементами вы также можете установить свойство align-content , чтобы указать интервал между обернутым содержимым.

justify-content

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

Чтобы изменить способ размещения дочерних элементов, установите свойство justify-content .

 .контейнер {
  дисплей: гибкий;
  выравнивание содержимого: пространство вокруг;
}
 

Есть несколько значений на выбор:

• flex-start по умолчанию
• center размещает детей в центре без пробелов между ними
• пробел между добавляет пробел между дочерними элементами, но не перед первым элементом и не после последнего элемента
• space-around добавляет пробел между дочерними элементами, в том числе перед первым элементом и после последнего элемента
• space-evenly добавляет пространство между дочерними элементами и делает так, чтобы первый и последний элементы имели такое же пространство, как средние дочерние элементы

Попробуйте изменить этот код, чтобы увидеть разницу:

Редактор кода ?

См. Pen от Happy Coding (@KevinWorkman) на CodePen.

align-items

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

Чтобы изменить способ выравнивания дочерних элементов, установите свойство align-items .

 .контейнер {
  дисплей: гибкий;
  выравнивание элементов: по центру;
}
 

Есть несколько вариантов на выбор:

• растянуть по умолчанию
• flex-start выравнивает дочерние элементы вверху (или слева для контейнеров с flex-direction:column ), но не растягивает их, чтобы заполнить оставшееся пространство
• flex-end выравнивает дочерние элементы по низу (или справа), но не растягивает их, чтобы заполнить оставшееся пространство
• центр выравнивает детей по центру

Попробуйте изменить этот код, чтобы увидеть разницу:

Редактор кода ?

См. Pen от Happy Coding (@KevinWorkman) на CodePen.

gap

По умолчанию гибкие контейнеры не добавляют пробелов между своими дочерними элементами. Вы можете изменить это с помощью justify-content , align-items и align-content . Вы также можете вручную установить зазор имущество.

 .контейнер {
  дисплей: гибкий;
  зазор: 25 пикселей;
}
 

Редактор кода ?

См. Pen от Happy Coding (@KevinWorkman) на CodePen.

flex-grow

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

Вы можете указать элементу заполнить любое дополнительное пространство, используя свойство flex-grow .

 .контейнер {
  дисплей: гибкий;
}
. ребенок {
  гибкий рост: 1;
}
 

Свойство flex-grow принимает число, которое представляет, насколько этот дочерний элемент вырастет по сравнению с его братьями и сестрами.

Это немного сбивает с толку, поэтому вот пример:

Редактор кода ?

См. Pen от Happy Coding (@KevinWorkman) на CodePen.

В этом примере класс .red имеет значение по умолчанию flex-grow 0 , что означает, что он вообще не растет. Затем .blue и Классы .green имеют flex-grow значений 1 и 2 соответственно, что означает, что .green будет расти вдвое больше, чем .blue .

Попробуйте изменить код, чтобы увидеть эффект от разных значений.

flex-shrink

По умолчанию, если flex-контейнер недостаточно широк (или достаточно высок для контейнеров с flex-direction:column ) для размещения всех его дочерних элементов, то все эти дочерние элементы сжимаются одинаково.

Чтобы разные дочерние элементы сжимались с разной скоростью, установите их свойство flex-shrink .

 .контейнер {
  дисплей: гибкий;
}
.ребенок {
  гибкая термоусадка: 2;
}
 

Это похоже на flex-grow в том, что значение представляет собой число, которое показывает, насколько дочерний элемент уменьшится по сравнению с его братьями и сестрами. Значение по умолчанию — 1 , но вы можете установить его на 0 , чтобы никогда не сжимать, или на более высокое число, чтобы уменьшить его больше.

Редактор кода ?

См. Pen от Happy Coding (@KevinWorkman) на CodePen.

flex-basis

По умолчанию элементы внутри flex-контейнеров устанавливают свои собственные размеры либо через свойства width и height , либо из их содержимого.

Вместо того, чтобы полагаться на собственный размер элемента, вы можете установить его начальный размер, используя свойство flex-basis .

 .контейнер {
  дисплей: гибкий;
}
.ребенок {
  flex-база: 200px;
}
 

Редактор кода ?

См. Pen от Happy Coding (@KevinWorkman) на CodePen.

flex

Возможности flex-grow , flex-shrink и flex-basis могут быть неочевидны. Почему вы должны использовать их вместо установки свойств width и height ?

Есть несколько причин:

1. Вы не всегда будете знать размер окна браузера пользователя. Будут ли они на ноутбуке? На широкоформатном мониторе? На телефоне? Убедиться, что ваш контент подходит для каждого экрана, очень сложно!
2. Вы не всегда будете знать размер собственного контента. Это может показаться удивительным, но хотите ли вы настраивать ширину каждого элемента на странице при каждом изменении контента? Это особенно верно, если вы получаете контент из других мест (например, API или бэкэнд), а не пишете его самостоятельно.

С помощью flexbox вы можете установить свойства flex-grow , flex-shrink и flex-basis , чтобы сообщить вашему контенту, как его размещать. Что должно расти при просмотре на широкоформатном мониторе? Что должно уменьшаться при просмотре на телефоне? Какого размера все должно быть по умолчанию, прежде чем увеличиваться и уменьшаться?

На самом деле эти три свойства настолько полезны, что их можно объединить в одно свойство с именем flex .

Итак, если у вас есть этот CSS:

 .child {
  гибкий рост: 1;
  гибкая термоусадка: 2;
  flex-база: 300px;
}
 

Вы можете сократить его до этого:

 .child {
  гибкий: 1 2 300 пикселей;
}
 

Чтобы понять, почему это полезно, попробуйте изменить ширину родительского элемента div в этом примере:

Редактор кода ?

См. Pen от Happy Coding (@KevinWorkman) на CodePen.

(Может помочь просмотр полноэкранной версии.)

Все дети начинают с определенных размеров, благодаря их свойствам flex-basis .

Когда вы увеличиваете родительский элемент div, красный дочерний элемент вообще не растет, потому что его flex-grow равен 0 . Зеленый дочерний элемент растет быстрее синего дочернего элемента, поскольку его свойства flex-grow равны 2 и 1 .

Когда вы уменьшаете родительский элемент div, красный дочерний элемент сжимается быстрее, чем синий дочерний элемент, потому что их 9Свойства 0097 flex-shrink : 2 и 1 . Зеленый ребенок вообще не сжимается, потому что его flex-shrink равен 0 .

Это означает, что вы можете установить эти свойства, а затем не беспокоиться о точном размере вашего контента или о точном размере окна браузера пользователя.

Дополнительные сведения

Выше мы рассмотрели основы flexbox, но есть и другие свойства и значения, которые вы можете использовать. Чтобы узнать о них больше, ознакомьтесь с полным руководством по Flexbox по CSS-трюкам.

И, конечно же, не бойтесь искать в Интернете, если вы в чем-то не уверены. Там много отличных ресурсов!

Flexbox наиболее полезен, когда у вас есть одна строка (или столбец) содержимого. Контейнеры Flexbox могут упаковывать свое содержимое в несколько строк (или столбцов) с помощью свойства flex-wrap , но у вас нет большого контроля над выравниванием этих элементов.

Это, вероятно, подходит для многих макетов, но если вы хотите больше контролировать расположение элементов, вы можете использовать сетка макет.

Чтобы представить макет сетки в историческом контексте, технически он еще официально не выпущен, но по состоянию на 2022 год почти каждый браузер уже поддерживает его. CSS странный!

Вот приведенный выше пример навигации слева с использованием сетки:

Редактор кода ?

См. Pen от Happy Coding (@KevinWorkman) на CodePen.

Свойства сетки

Чтобы использовать сетку, задайте display: grid для родительского элемента, а затем установите другие свойства сетки для родительского и дочернего элементов, чтобы настроить макет.

display: grid

Это свойство, с которого все начинается. Установите это для родительского элемента (часто div), чтобы указать ему использовать правила сетки для размещения его дочерних элементов (элементов, которые он содержит).

 .контейнер {
  отображение: сетка;
}
 

Редактор кода ?

См. Pen от Happy Coding (@KevinWorkman) на CodePen.

Само по себе это не очень интересно, потому что по умолчанию сетка представляет собой один столбец элементов.

сетка-шаблон-столбцы

По умолчанию сетка представляет собой один столбец элементов.

Чтобы разделить сетку на несколько столбцов, используйте свойство grid-template-columns .

 .контейнер {
  отображение: сетка;
  столбцы сетки-шаблона: 100px 1fr 2fr;
}
 

Редактор кода ?

См. Pen от Happy Coding (@KevinWorkman) на CodePen.

Свойство grid-template-columns принимает список размеров, разделенных пробелами, и размещает содержимое в указанном количестве столбцов с этими размерами.

Размерами могут быть несколько различных типов значений:

• Конкретные длины, такие как 100px или 10em , которые дают столбцу предопределенную ширину.
• Длины в процентах, такие как 50% , которые указывают столбцу занимать этот процент ширины родителя.
• Дробные длины, такие как 1fr или 2fr , которые указывают столбцу занимать ширину относительно других столбцов в сетке. Вы можете думать об этом как о том, как flex-grow работал выше: столбец с 2fr будет занимать примерно в два раза больше ширины, чем столбец с 1fr .
• auto указывает размеру столбца на основе элементов в нем, а также размера контейнера и других столбцов в контейнере.

См. grid-template-columns на MDN для других типов значений.

Приведенный выше пример из grid-template-columns: 100px 1fr 2fr создает три столбца: один из 100px шириной , а затем средний столбец, который будет занимать примерно половину ширины третьего столбца.

grid-template-rows

Подобно grid-template-columns , grid-template-rows позволяет указать высоту каждой строки.

Определив grid-template-columns и grid-template-rows , вы можете создать сетку содержимого!

 .контейнер {
  отображение: сетка;
  столбцы сетки-шаблона: 1fr 2fr;
  строки шаблона сетки: 100 пикселей 50 пикселей 100 пикселей;
}
 

Редактор кода ?

См. Pen от Happy Coding (@KevinWorkman) на CodePen.

Попробуйте изменить этот код, чтобы вместо него было 3 столбца и 2 строки!

Размещение элементов в сетке

По умолчанию элементы занимают одну ячейку в своей родительской сетке и отображаются в том порядке, в котором они указаны в HTML-коде.

Вы можете заставить элемент занимать более одной ячейки, используя следующие свойства:

• grid-column-start и grid-column-end сообщить ячейке, какие столбцы занимать
• grid-row-start и grid-row-end сообщить ячейке, какие строки занимать

 .контейнер {
  отображение: сетка;
  столбцы сетки-шаблона: 1fr 2fr;
  строки шаблона сетки: 100 пикселей 50 пикселей 100 пикселей;
}
.ребенок {
  начало столбца сетки: 1;
  сетка-столбец-конец: 3;
}
.другой ребенок {
  сетка-строка-начало: 2;
  сетка-ряд-конец: 4;
}
 

Вот пример:

Редактор кода ?

См. Pen от Happy Coding (@KevinWorkman) на CodePen.

Красный div начинается со столбца 1 и продолжается до столбца 3, поэтому он занимает оба столбца. Зеленый блок начинается со строки 2 и продолжается до строки 4, поэтому он занимает строки 2 и 3.

Также обратите внимание, что зеленый блок появляется перед синим блоком, хотя в HTML он идет после него. Это может быть удобно для того, чтобы ваш основной контент был первым в вашем HTML, что может помочь с такими вещами, как программы чтения с экрана и SEO.

Вы также можете использовать сетку , столбец и сетку , ряд 9.0098 сокращение:

 .container {
  отображение: сетка;
  столбцы сетки-шаблона: 1fr 2fr;
  строки шаблона сетки: 100 пикселей 50 пикселей 100 пикселей;
}
.ребенок {
  сетка-столбец: 1/3;
}
.другой ребенок {
  сетка-ряд: 2/4;
}
 

Именованные ячейки

В приведенных выше примерах числа используются для указания того, какие ячейки занимает элемент.

Вместо этого вы можете назвать свои ячейки, а затем указать расположение элементов, используя эти имена.

Сначала добавьте имена в столбцы и строки вашего контейнера, используя [] квадратных скобок:

 .container {
  отображение: сетка;
  столбцы сетки-шаблона: [слева] 1fr 2fr [справа];
  grid-template-rows: 100 пикселей [посередине] 50 пикселей 100 пикселей [внизу];
}
 

На самом деле вы называете строк между ячейками. Это тот же CSS, что и выше, за исключением того, что теперь несколько строк между ячейками имеют имена.

Затем используйте эти имена для размещения дочерних элементов:

 .red {
  цвет фона: красный;
  начало столбца сетки: слева;
  конец столбца сетки: справа;
 /* Можно сократить до grid-column: left/right; */
}
.зеленый {
  цвет фона: салатовый;
  сетка-строка-начало: середина;
  конец строки сетки: нижний;
  /* Можно сократить до grid-row: middle/bottom; */
}
 

Вот полный код:

Редактор кода ?

См. Pen от Happy Coding (@KevinWorkman) на CodePen.

Другие свойства сетки

У сетки много других свойств и сокращений для написания меньшего количества строк кода. Вместо того, чтобы пытаться перечислить их все здесь, я рекомендую вам прочитать Полное руководство по сетке в CSS Tricks, CSS Grid Layout в W3Schools и CSS Grid Layout в MDN.

Что еще более важно, я призываю вас попробовать! Если вы хотите поэкспериментировать с макетом сетки (или с флексбоксом, или с чем-то еще), то лучшее, что вы можете сделать, это создать рабочий файл или проект CodePen и попробовать! Получите что-нибудь работающее, а затем посмотрите, есть ли другие способы написать свой код.

Один из макетов настолько популярен, что ему дали имя: Святой Грааль.

Макет «Святой Грааль» — это веб-сайт с заголовком, левой боковой панелью, областью основного содержимого, правой боковой панелью и нижним колонтитулом. Вероятно, вы можете назвать несколько веб-сайтов, использующих этот макет.

Вот несколько примеров макета Святого Грааля:

Использование flexbox:

Редактор кода ?

См. Pen от Happy Coding (@KevinWorkman) на CodePen.

Использование сетки:

Редактор кода ?

См. Pen от Happy Coding (@KevinWorkman) на CodePen.

Если вам нужен вызов и если вы хотите понять, что делает flexbox и сетку такими популярными, попробуйте реализовать макет Святого Грааля, используя только числа с плавающей запятой или блоки!

Выше я перечислил несколько подходов к созданию макетов, но вам не обязательно выбирать только один! Фактически, большинство веб-сайтов используют комбинацию всего вышеперечисленного.

Например, вы можете использовать сетку для создания внешнего макета, в котором размещаются заголовок, боковая панель, основное содержимое и нижний колонтитул. Ваш заголовок может использовать flexbox для создания ряда навигационных ссылок. Основной контент может содержать изображения, плавающие влево или вправо.

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

Обеспечение того, чтобы ваш веб-сайт работал на всех мониторах, было важной частью верстки и дизайна с первых дней существования HTML.

Но в конце 2000-х и начале 2010-х это стало еще сложнее, когда мобильные телефоны стали более популярными для просмотра веб-страниц. Как сделать так, чтобы ваш веб-сайт хорошо выглядел на маленьком мобильном телефоне, широкоэкранном мониторе и т. д.?

Одним из популярных способов думать об этом является адаптивный дизайн . Адаптивный дизайн — это идея, что ваш сайт должен реагировать на изменения размера экрана. Возможно, ваша страница показывает только основной контент на узких устройствах, но добавляет левую боковую панель на устройствах среднего размера и разбивает контент на несколько столбцов на широкоэкранных устройствах.

Вот пример:

Адаптивный дизайн означает, что вы показываете разные макеты на разных размерах экрана. Вы можете думать об этом как о сокрытии частей вашего веб-сайта на небольших экранах, но другой способ думать об этом состоит в том, что меньшие экраны содержат весь необходимый контент, а большие экраны показывают «дополнительный» контент, который не является строго обязательным.

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

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

Вы можете узнать больше об адаптивном дизайне на страницах Адаптивный дизайн — MDN и Адаптивный веб-дизайн — Википедия.

Медиа-запросы

Чтобы отобразить другой макет в зависимости от размера экрана, вы можете использовать функцию CSS под названием медиазапросы .

Медиа-запрос использует ключевое слово @media , затем тип носителя (возможно, вам нужен screen , но вы также можете настроить внешний вид вашего веб-сайта при печати с помощью print ), затем мультимедийную функцию , которая позволяет вы устанавливаете правила для различных видов дисплеев. Затем внутри { } фигурных скобок вы указываете любые правила, которые хотите применить к вашему запросу. Вот пример:

Редактор кода ?

См. Pen от Happy Coding (@KevinWorkman) на CodePen.

(Может помочь просмотр полноэкранной версии.)

По умолчанию класс .content имеет тонкую сплошную черную рамку и голубой фон. Но на экранах шире 700 пикселей класс .content будет иметь салатовый фон. Поскольку мы не меняем границу на широких экранах, по умолчанию сохраняется тонкий сплошной черный цвет.

Вот более сложный пример, в котором контент отображается в одном столбце по умолчанию, а на устройствах с разрешением более 600 пикселей — в удобном макете:

Редактор кода ?

См. Pen от Happy Coding (@KevinWorkman) на CodePen.

(Может помочь просмотр полноэкранной версии.)

В этом примере также полностью скрыта левая боковая панель на мобильных устройствах.

Дополнительную информацию см. в руководстве для начинающих по медиа-запросам в MDN и CSS @media Rule в W3Schools.

Инструменты разработчика

Когда вы создаете и отлаживаете макеты в CSS, вашим лучшим другом являются инструменты разработчика вашего браузера! Они могут помочь вам понять, почему объекты выравниваются определенным образом или откуда берутся эти дополнительные несколько пикселей пространства.

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

Вот несколько ресурсов, которые помогут вам узнать больше о макетах в CSS:

• Старый CSS, новый CSS — это отличное описание истории CSS, которое помогает поместить все в контекст. (Внимание: содержит нецензурную лексику.)
• Краткая история CSS — это более официальная версия событий.
• Примеры сетки миниатюр — это исследование того, как реализовать сетку миниатюр, используя многие из вышеперечисленных подходов к компоновке.
• Полное руководство по Flexbox на CSS Tricks содержит отличную инфографику о различных свойствах flex.
• A Complete Guide to Grid on CSS Tricks, CSS Grid Layout в W3Schools и CSS Grid Layout в MDN — хорошие источники, чтобы узнать больше о сетке.
• Адаптивный дизайн — MDN и Адаптивный веб-дизайн — Википедия содержит описания адаптивного дизайна.
• Руководство для начинающих по медиа-запросам в MDN и CSS @media Rule в W3Schools содержит дополнительную информацию о медиа-запросах.
• CSS Zen Garden показывает, как один и тот же HTML-контент может быть размещен совершенно по-разному, путем изменения CSS.

Happy Coding — это сообщество людей, которые так же, как и вы, изучают программирование.
У вас есть комментарий или вопрос? Опубликуйте это здесь!

Предыдущий: CSS Далее: Хостинг

Практические занятия по CSS3 — изучите CSS, HTML и адаптивный веб-дизайн с Рассом Уикли из Max Design

Макеты CSS

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

Бесплатный стартовый шаблон Bootstrap

Базовый стартовый шаблон Bootstrap 3. Загрузите этот шаблон и используйте его как есть, не загружая дополнительные ресурсы Bootstrap.

Посмотреть Скачать

Бесплатный стартовый шаблон Bootstrap с изображением логотипа

Аналогичен базовому стартовому шаблону Bootstrap 3, но с изображением логотипа сайта.

Посмотреть Скачать

Бесплатный стартовый шаблон Bootstrap с адаптивным шрифтом

Аналогичен базовому стартовому шаблону Bootstrap 3, но с адаптивным типом — размер шрифта увеличивается по мере увеличения области просмотра.

Посмотреть Скачать

Бесплатный шаблон сообщения в блоге с правой боковой панелью

Простой загрузочный шаблон сообщения в блоге с правой боковой панелью.

Посмотреть Скачать

Бесплатный шаблон сообщения в блоге с левой боковой панелью

Простой загрузочный шаблон сообщения в блоге с боковой панелью, выровненной по левому краю.

Посмотреть Скачать

Бесплатная двухколоночная галерея изображений Bootstrap

Простой двухколоночный макет Bootstrap, который можно использовать для галереи изображений.

Посмотреть Скачать

Бесплатная трехколоночная галерея изображений Bootstrap

Простая трехколоночная компоновка Bootstrap, которую можно использовать для галереи изображений.

Посмотреть Загрузить

Бесплатная галерея изображений Bootstrap с четырьмя колонками

Простой макет с четырьмя колонками начальной загрузки, который можно использовать для галереи изображений.

Просмотр Скачать

Бесплатная галерея изображений Bootstrap с шестью колонками

Простой макет с шестью колонками начальной загрузки, который можно использовать для галереи изображений.

Посмотреть Скачать

Бесплатный адаптивный макет фиксированной ширины с одним столбцом

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

Посмотреть Скачать

Бесплатный адаптивный макет с одной колонкой во всю ширину

Адаптивный макет с одной колонкой во всю ширину, который можно использовать для блогов и веб-сайтов с одной колонкой.

Просмотр Скачать

Бесплатный адаптивный макет с двумя колонками полной ширины

Адаптивный макет с двумя колонками полной ширины, который можно использовать для блогов и веб-сайтов с одной колонкой.

Посмотреть Скачать

Бесплатный адаптивный макет с тремя колонками полной ширины

Адаптивный макет с тремя колонками полной ширины, который можно использовать для блогов и веб-сайтов с одной колонкой.

Посмотреть Загрузить

Ресурсы CSS

Ряд наборов слайдов CSS и связанных с ними упражнений для самостоятельного обучения.

201: Уровни CSS

38 слайдов, Уровень: Начальный

Эта подборка слайдов дает краткий обзор процесса зрелости спецификации W3C и различных уровней CSS.

ViewDownload

202: Общие термины

180 слайдов, уровень: начальный

В этой подборке слайдов рассматривается ряд терминов, которые обычно используются при определении аспектов CSS.

ViewDownload

203: наборы правил CSS

90 слайдов, уровень: начальный

Эта презентация отвечает на некоторые основные вопросы CSS: Что такое CSS? Что такое наборы правил? Как можно более эффективно писать правила CSS?

ViewDownload

204: Применение CSS

85 слайдов, уровень: начальный

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

ViewDownload

205-01: Простые селекторы

101 слайд, Уровень: Новичок

Простые селекторы позволяют нацеливаться непосредственно на HTML-элементы, а также на элементы, содержащие атрибуты class или ID.

ViewDownload

205-02: Комбинаторы-селекторы

81 слайд, Уровень: Начальный

Комбинаторы позволяют комбинировать отдельные селекторы в новые типы селекторов, включая комбинаторы-потомки, дочерние селекторы, соседние одноуровневые селекторы и общие одноуровневые селекторы.

ViewDownload

205-03: Ссылка на псевдоклассы

36 слайдов, Уровень: Новичок

В этой колоде слайдов показано, как стилизовать : ссылка и : посетили селекторов псевдоклассов.

ViewDownload

205-04: Псевдоклассы действий пользователя

52 слайда, Уровень: Новичок

Псевдоклассы действий пользователя, :focus , :hover и

 <артикул>
  <изображение
    src="http://www.gravatar.com/аватар"
    alt="Имя"
  />
  <дел>
    @handle
    Имя
    3 часа назад