Примеры верстки сайта


Примеры верстки сайта

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

Готовые шаблоны в сети

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

Фиксированная верстка сайта

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


Как правило, фиксированные сайты делают те, кому не нужен мобильный трафик. Если же он нужен, компания может отдельно сделать мобильную версию сайта. Такого подхода придерживаются многие. Фиксированный шаблон – самый простой пример блочной верстки сайта.

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

Резиновый шаблон

Другой пример блочной верстки сайта – резиновый шаблон. В таком случае размеры основных контейнеров задаются в процентах. Это дает возможность блокам растягиваться в зависимости от ширины окна. Например, задав боковой колонке ширину в 30% от всего тела страницы, при окне в 1000 пикселей она будет занимать 300px. Если мы уменьшим ширину окна вдвое, то так же измениться и боковая колонка. Из-за этого могут возникнуть проблемы с тем, что все содержимое вовсе перестанет помещаться в блок.

Резиновая верстка немыслима без свойств max-width и min-width. Они означают максимальную и минимальную ширину контейнеров соответственно. Пример:


Что означает эта запись? Блок с идентификатором “container” будет сохранять свои резиновые свойства только в пределах заданных значений пикселов. То есть, если окно браузера станет больше 1440 пикселей, то блок превратиться в фиксированный. То же самое произойдет при уменьшении ширины до менее чем 520 пикселей. В этом случае появится горизонтальная полоса прокрутки, но лучше уже она, чем нечитаемый текст. Если эти свойства не задавать, то резиновый шаблон будет тянуться всегда. К каким последствиям это может привести?

Представьте, вы зашли на сайт с мобильного телефона. Без min-width все будет настолько мелко, что просто невозможно будет говорить о нормальном чтении. На больших экранах с разрешением более 1600 пикселей в ширину, содержимое может разбиться на очень длинные строки. Читать такой текст можно, но сложно. Как вариант, можно для больших мониторов разбивать текст на две колонки, но это уже основы адаптивности.

Адаптивный шаблон

Адаптивную верстку можно реализовать на основе уже имеющейся фиксированной или резиновой. Она реализуется при помощи специальных media-команд, которые прописываются в таблице стилей. В них вы можете указывать ширину окна, при которой будут применяться новые стили. Например, для большого разрешения можно указать свои стили, а для мобильников – свои. И они будут применены только тогда, когда нужно. Это очень удобно. Пример медиа-запроса:


Указанные в фигурных скобках свойства будут применены только тогда, когда ширина окна браузера станет меньше 980 пикселей.

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

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

Стоит ли самому учиться такой технике? Если вы верстальщик, то обязательно, потому что сегодня таких шаблонов требуется все больше. Обучиться этому не так уж и сложно, зато потом вы сможете гордо сказать: “У меня получилась адаптивная верстка сайта”. Примеры нам подают зарубежные коллеги, которые массово переходят на адаптивные сайты. Также в основах адаптивности полезно разбираться веб-мастерам, которые ведут свои проекты.

Пример адаптивности – наш портал. Заметьте, как меняется содержимое при уменьшении ширины окна. Другой пример – ресурс организации W3C. При изменении ширины вы увидите, как меняется дизайн.

Примеры верстки сайта

Рис. 1. При сильном уменьшении ширины окна дизайн сайта автоматически поменялся.

Верстка таблицами

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


Его суть заключается в том, что вся структура сайта помещена в одну большую таблицу. Она имеет нужное количество строк и ячеек. Таблица позволяет легко сделать хоть 100 разных ячеек и поместить в них нужное содержимое, легко разместить и форматировать. С помощью блочной верстки сделать это было бы не так просто.

Но верстка таблицами имеет один огромный минус – невероятную громоздкость кода. Судите сами – каждая отдельная ячейка должна формироваться своим тегом, который, в свою, очередь, должен находиться в теге ряда таблицы. Современные веб-стандарты стремятся к простоте и компактности. Именно поэтому сегодня верстка таблицами применяется только тогда, когда у нас на сайте действительно есть таблицы. Сама сетка (скелет шаблона) строится с помощью блоков.

И все-таки еще не окончательно умерла в сети табличная верстка сайта. Пример – сам Яндекс, который сверстан именно так. На самом деле на таблицах можно делать красивые и сложные сайты, просто разметка будет громоздкой.

Примеры верстки сайта

Рис. 2. Яндекс смотрится достаточно красиво. При этом он сверстан таблицей.

HTML5

В последние годы больше шаблонов начали делать на новой версии HTML. В чем их отличие? Для разметки каркаса используются не пустые div (которые по смыслу ничего не значат), а специальные новые семантические теги. Например, тег


. С его появлением больше не нужно создавать div с идентификатором “header”, который, опять же, не имеет семантического смысла.

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

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

Примеры верстки сайта

webformyself.com

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


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

Решение возникшей проблемы – адаптивная верстка, при которой CSS-стили меняются динамически для разной ширины окна браузера.

Пример

Пример адаптивной верстки — сайт http://atmrus.ru/, где страницы адаптируется под несколько интервалов ширины окна браузера, сохраняя максимальный комфорт для посетителя:

Адаптивная верстка Адаптивная верстка Адаптивная верстка Адаптивная верстка Адаптивная верстка

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

  1. просто менять размер экрана браузера,
  2. расположить справа панель инспектора компонентов и менять ее ширину,
  3. использовать адаптивный дизайн браузера, нажав Ctrl+Shift+M в Firefox или Google Chrome.

Что используют для оптимизации сайта под мобильные устройства?

Метатег viewport

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

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

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

Пример
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Основные свойства метатега <viewport>
width Ширина видимой области. Рекомендуемое значение: device-width.
height Высота видимой области. Рекомендуемое значение: device-height.
initial-scale Первоначальный масштаб страницы. Принимает значение от 1 до 5. Рекомендуемое значение: 1.
minimum-scale Минимальный масштаб страницы. Принимает значение, которое должно быть меньше или равным initial-scale. Значение 1 запрещает уменьшение масштаба страницы.
maximum-scale Максимальный масштаб страницы. Принимает значение, которое должно быть больше или равным initial-scale. Значение 1 запрещает увеличение масштаба страницы.
user-scalable Разрешает или запрещает возможность масштабирования страницы. Принимает значение true или false.

Контент шире экрана – часто возникающая проблема, как только задан viewport.

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

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

Пример
.content {  width: 100%;  max-width: 1200px; }

Медиа-запросы. CSS-стандарт Media Queries

Возможность применять различное оформление в зависимости от ширины окна дает CSS-стандарт Media Queries.

Медиа-запрос начинается с правила @media, после которого следует условие применения стилей, состоящее из типа носителя (в приведенном примере all), логического оператора (and) и медиа-функции (max-width: 360px).

Типы носителей

all Все типы.
print Принтеры и другие печатающие устройства.
screen Экран монитора.
speech Речевые синтезаторы и программы для воспроизведения текста вслух. Например, речевые браузеры.
Устаревшие, хотя и корректные типы, которые не дают результата
braille Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми.
embossed Принтеры, использующие для печати систему Брайля.
handheld Наладонники, смартфоны, устройства с малой шириной экрана.
projection Проекторы.
tty Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея).
tv Телевизоры.
Логические операторы
and Логическое И. Указывается для объединения нескольких условий.
not Логическое НЕ. Указывается для отрицания условия. Оператор not оценивается в запросе последним.
only Ключевое слово для старых браузеров, не поддерживающих медиа-запросы и считающих only типом носителя. Но так как такого типа не существует, то весь стиль целиком игнорируется. Современные браузеры воспринимают медиа-запрос с only и без only одинаково.
, Логическое ИЛИ. Перечисление нескольких условий через запятую означает, что если хотя бы одно условие выполняется, то стиль будет применён.

Основные медиа-функции
width
(min-width, max-width)
Ширина окна браузера.
device-width
(min-device-width, max-device-width)
Ширина экрана устройства.
height
(min-height, max-height)
Высота окна браузера.
device-height
(min-device-height, max-device-height)
Высота экрана устройства.
orientation Ориентация устройства. Принимает значения portrait (портретная), если ширина меньше высоты или landscape (альбомная), если ширина больше высоты.
Пример

Задан размер заголовка:

h1 {  font-size: 72px; }

На большом экране компьютера такой заголовок смотрится нормально, но для вертикального экрана смартфона он слишком крупный. Для экранов, ширина которых меньше или равна 360px, можно уменьшить размер шрифта с помощью медиа-запроса:

@media all and (max-width: 360px) {  h1 {  font-size: 42px;  } }

Новые единицы размеров (vw, vh, rem)

vw 1% от ширины окна браузера (viewport).
vh 1% от высоты окна браузера (viewport).

Благодаря этим единицам теперь в CSS стало легко указать относительную высоту элемента.

Пример
body {  min-height: 100vh; }

Размер шрифта при адаптивной верстке удобно задавать в rem (root em). Эта единица измерения вычисляется на основе размера шрифта корневого элемента <html>. По умолчанию 1rem = 16px. Для простоты вычислений размер шрифта корневого элемента можно задать равным 10px.

Пример
html {  font-size: 10px; } body {  font-size: 1.6rem; } h1 {  font-size: 7.2rem; } @media all and (max-width: 360px) {  body {  font-size: 1.4rem;  }  h1 {  font-size: 4.2rem;  } }

Flexbox

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

Спецификация Flexbox позволяет контролировать размер, порядок и выравнивание элементов по горизонтали и вертикали, распределение свободного места между ними. Блоки при этом могут сжиматься и растягиваться по заданным правилам, занимая нужное пространство.

Flexbox определяет CSS свойства для flex-контейнера и его дочерних элементов (в приведенном примере соответственно ul.flex и li.flex).

Пример
ul.flex {  display: flex; /* flex-контейнер */  flex-wrap: wrap; /* многострочный режим */  justify-content: space-between; /* элементы распределяются равномерно (первый – в начале строки, последний – в конце) */ } li.flex {  display: inline-block;  flex-basis: 260px; /* базовая ширина элемента */  flex-grow: 1; /* все элементы одинаковой ширины */  max-width: 300px;  padding: 8px; }


В результате: элементы списка растягиваются на всю доступную ширину (с ограничением в 300px):

Flexbox

На узком экране список станет вертикальным:

Flexbox

Используя Flexbox, можно менять порядок следования элементов и легко задавать вертикальное выравнивание.

htmlweb.ru

Почему вам повезло больше, чем верстальщикам, начавшим работу уже давно

Существует два типа верстки: блочная и табличная. На заре времен верстка строилась в виде таблиц. Сперва создавалась всего одна, большая.

Примеры верстки сайта

В нее встраивался head – голова, основная часть. Та, в которую входит логотип, какая-то основная информация типа телефонов и так далее.

Примеры верстки сайта

Далее сайтбар. Это боковая панель. В нее можно запихнуть навигационное меню, ссылки, списки, рекламу.

Примеры верстки сайта

Далее врисовывалось основное меню для перехода по категориям.

Примеры верстки сайта

Основная контентная часть. Текст статьи, вводное приветствие или что-то иное.

Примеры верстки сайта

Внизу размещается футер. Его используют и сейчас. Сюда, как правило, вставляют небольшие ссылочки на контакты, вакансии, информацию «О нас». Могут прилепить даты существования ресурса или просто магическое слово «copyright», которым разработчики надеются указать или защитить свое авторское право. Пользы от него как от подковы, висящей над дверью, может отпугнуть только вурдалаков, хотя они, как правило, в футер и не заглядывают.

Примеры верстки сайта

Чуть позже появились новые стандарты. Табличную верстку заменила блочная. Тег «div» — это и есть блочная верстка. Можете посмотреть код любого сайта. Кликните правой кнопкой мыши и выберите «Просмотр кода элемента». Взгляните на мой скриншот. Тут есть блок главной страницы, футера, левой и правой колонки. Все они подписаны.

Примеры верстки сайта

Современные сайты строятся из блоков, покажу схематично пример, чтобы вы понимали. Разница тут скорее в коде страницы. Видите, никакой основной таблички нет. Блоки, размещенные в той или иной части. Иногда они могут заходить друг на друга или сочетать в себе несколько элементов, но один лишний элемент (большая таблица) исчез.

Примеры верстки сайта

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

Пошаговая инструкция: как делаются сайты

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

Более 80% людей просто смотрят на непонятный набор символов, вспоминают школьную программу по математике: логарифмы, дифференциалы – сходят с ума, пугаются и забывают об этой теме: «Пойду лучше китайский выучу, оно-то проще будет».

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

Давайте теперь посмотрим как происходит сотворение сайта. Сначала дизайнеры работают в Photoshop. У них получается примерно такая вот картинка. Пока это всего лишь фотография, однако, у нее есть свои отличия.

Примеры верстки сайта

Она изготавливается в особом фотошоповском формате, типа блокнотного txt или вордовского doc. Из psd, так называется этот формат, раскраиваются блоки. Для этого есть специальная кнопка в меню слева.

Примеры верстки сайта

После того как документ раскроен. Его можно «Экспортировать для web» и в результате на компьютере появляется папка images, которую верстальщик использует для распределения картинок по сайту.

Примеры верстки сайта

Я сделал этот вариант за минуту, он не правильный. Просто хотелось вам показать примерный результат. Вы можете скачать электронную версию моего psd-макета (скачать) и попробовать сделать свою, правильную версию, посмотрите, какие картинки пригодятся для размещения и как вы их будете вырезать. Заодно попробуете поработать самостоятельно над шаблоном в photoshop.

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

Ваш первый сайт. Верстка займет всего пять минут

Над самой версткой можно работать в программе Notepad++. Сегодня я не буду затрагивать программу Adobe Dreamweaver, т.к. это тема отдельной статьи, но отмечу, что она как раз создана для верстальщиков.

Работы над сайтом обычно не начинаются с создания файла style.css, но думаю что так вам будет интереснее. Это основной документ, в котором описывается как именно будет выглядеть ваш портал. Все просто. Даже английский учить не обязательно.

Примеры верстки сайта

Background – это цвет фона.

Примеры верстки сайта

Кликнув два раза в Photoshop по цветовой палитре вы можете узнать и другие цвета.

Примеры верстки сайта

Вот так будет выглядеть html документ с текстовой составляющей. Уже знакомые меню, тела и контейнеры… тег h2 тоже должен быть вам знаком. Это заголовки. Впишите в них свои слова.

Примеры верстки сайта

Скачайте эти два документа в одну папку и откройте с помощью Notepad ++, затем отредактируйте цвет и текст, а затем запустите index.html с любого браузера (скачать).

Примеры верстки сайта

Получится примерно такой вариант.

Примеры верстки сайта

Поздравляю. Это ваша первая страница в интернете! Вы сделали ее, у вас получилось. Естественно, что вместо цвета можно вставить и картинку, которая была вырезана из фотошопа в документ images. Для этого нужно просто прописать путь. Как вы видите, ничего супер сложного тут нет.

И напоследок… качаем видео уроки

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

Примеры верстки сайта

Согласитесь, вообще не впечатляет. Поэтому я рекомендую вам постигать основы при помощи видео курсов. Внизу я разместил ссылки, кликнув по ним, вы можете скачать бесплатные уроки html и css. Они позволяют быстрее достигнуть хороших результатов. Кроме того, чтение требует значительно большей силы воли, нежели просмотр интересных видео.

  1. Html — уроки для начинающих.
  2. Css — уроки для начинающих.
  3. Бесплатный мини-курс по вёрстке сайта.

Желаю вам успехов в ваших начинаниях. Уверен, что совсем скоро вы начнете не только учиться, но и работать онлайн, а также реализовывать невероятные проекты!

Если вам понравилась эта статья – подписывайтесь на рассылку и получайте больше полезных материалов для совершенствования собственных навыков!

start-luck.ru

Верстка сайтов на HTML/HTML5 и CSS/CSS3

С начала года я занялся подтягиванием своих слабых мест в веб технологиях. Разобравшись, я описал план самостоятельного изучения HTML и CSS, а также  HTML5 и CSS3. Я придерживался этого плана и результат получился неплохим.

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

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

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

Что такое верстка сайта, долго объяснять я думаю не стоит. Если коротко, то это создание HTML кода и CSS-таблиц стилей по задуманному ранее дизайну. Чаще всего страницы верстают на основе подготовленного заранее в фотошопе psd-макета.

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

Требования к современной верстке

Чем качественнее выполнена верстка сайта, тем лучше будет работать сайт или блог. Профессиональную верстку может выполнить только хороший специалист верстальщик. Какие же требования сегодня предъявляют к верстке? Вот они:

  • кроссбраузерность
  • адаптивность
  • минимум кода
  • высокая скорость загрузки страниц
  • семантичность
  • валидность

Давайте разберем какие бывают виды верстки сегодня и вам станет понятно что все это значит.

Виды верстки сайтов

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

  • Фиксированная верстка или статическая. Вне зависимости от размеров окна браузера или устройства ширина страниц будет постоянной. Все элементы занимают строго определенную ширину в пикселях на странице. Если разрешение экрана большое и окно браузера развернуто на весь экран, то, как правило, по бокам остается свободное место. И наоборот, на мобильных устройствах при фиксированной верстке снизу на странице появляется полоса прокрутки.
  • Резиновая верстка. Страница занимает всю ширину браузера, каких бы размеров она не была и на каком бы устройстве вы не открыли эту страницу. Ширина элементов страницы задается в процентах от ширины окна, и поэтому занимают всю доступную область. При этой верстке тяжело добиться хорошего удобного дизайна при всех возможных разрешениях экранов, ведь страницы будут выглядеть по-разному.
  • Табличная верстка или верстка таблицами. В данном случае сетка страницы строится с помощью таблиц. Представьте, что на странице есть главная таблица, а в ее ячейках при необходимости располагают вложенные таблицы, а в их ячейках могут быть новые таблицы и так до бесконечности. Код получается громоздким, это очень неудобно, да и надобности в этом уже нем. Сегодня так страницы уже давно не верстают. Более того, поисковики не любят такие страницы и плохо их индексируют. Если вам нужно, вы можете разместить на странице таблицу или несколько, но только не делайте с их помощью структуру страницы.
  • Блочная верстка, верстка блоками или div-верстка. Это, пожалуй, самая распространенная верстка сегодня. Сетка страниц конструируется из множества блоков <div>, которые вложены друг в друга. Для доступа к ним используются атрибуты id и class. Откройте исходный код (Ctrl + U) практически любой веб-страницы и вы увидите такую верстку.
  • Адаптивная верстка или мобильная верстка. Ее еще иногда называют респонсивная верстка. Ключевая особенность в том, что страницы хорошо адаптируются под любое разрешение экрана пользователя. Не важно, отрыли вы страницу на стационарном ноутбуке, на здоровенном широкоформатном мониторе или на смартфоне — в любом случае страница должна хорошо смотреться и быть удобной для пользователя. Это достигается тем, что используют несколько таблиц стилей под разные разрешения.
  • Гибкая верстка или flex верстка. Вначале применяется известная всем блочная верстка, а потом нужные блоки превращают во флекс-контейнеры (флексбоксы). В стилях элемента указывают display: flex; Элементу можно указать направление главной оси и выравнивание. Эти возможности стали доступны с приходом CSS3. Теперь страницы становятся очень гибкими. Этот механизм подробно разбирается на продвинутых курсах в HTML Academy. Рекомендую ознакомиться, за этим настоящее и будущее верстки.
  • Семантическая верстка. Она явилась логичным продолжением блочной верстки и стала доступна в HTML5. Новые теги делают станицу более структурированной. Поисковики любят такие страницы. Что это за новые теги в HTML5, можете посмотреть в другой моей статье.
  • Валидная верстка или по-другому верста без ошибок. Это верстка, выполненная в соответствии со стандартами W3C. Проверить свою HTML-страницу на корректность вы можете с помощью специального валидатора W3C.
  • Кроссбраузерная верстка. Как понятно из названия, при такой верстке страницы выглядят одинаково в разных браузерах. Первое, с чего обычно начинают — подключают к странице специальный CSS файл — сброс стилей.

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

По собранной мной статистике около 40% людей посещают страницы моего блога с мобильных устройств. Причем со смартфонов более 30% и с планшетов около 7%. Да, у меня на блоге адаптивный шаблон и он неплохо смотрится со смартфонов. Пока что есть ошибки в валидации, но думаю, что руки скоро наконец дойдут до этого.

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

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

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

  • Практика по основам адаптивной верстки в HTML5 и CSS3
  • Практика верстки сайта под мобильные устройства
  • Веб-дизайн: практический курс создания лендинга
  • Веб-дизайнер — профессионал. Создание востребованных макетов
  • Современные тенденции веб-разработки
  • Научись создавать красивые, современные подписные и продающие страницы
  • Все о создании сайтов
  • Пошаговый план создания сайта
  • Школа блоггинга

Надеюсь, что статья была интересной, и вы нашли для себя что-то полезное.

Желаю профессиональной верстки вашим сайтам и блогам!

dmitriyivlev.ru

Здравствуйте уважаемый посетитель!

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

  • Какие существуют виды верстки
  • Табличная или блочная
  • Фиксированная или резиновая
  • Зачем нужна адаптивная верстка
  • Семантическая верстка
  • Выводы

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

  • Табличная
  • Блочная
  • Фиксированная
  • Резиновая
  • Адаптивная
  • Семантическая

Первые два вида (1,2) определяют способы построения веб-страниц, где, при табличном способе страницы строятся с помощью контейнеров, определяющих содержимое в виде таблиц (парный элемент языка HTML <table>), а при блочном варианте, конструкцией страниц обычно являются блочные элементы, например, универсальный элемент<div>.

Следующие три вида (3÷5) определяют особенность отображения веб-страниц на экранах пользовательских устройств в зависимости от их разрешения, что сказывается на удобство пользования сайтами.

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

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

Здесь, для общего понимание основных видов верстки приведены лишь их общие характеристики. Далее, перейдем к более детальному их рассмотрению.

Как было выше сказано, при табличной верстке веб-страницы строятся на основе таблиц, при блочной — блоков. В чем преимущества и недостатки этих способов построения веб-страниц?

Как известно тег <table>, представляющий контейнер для содержимого таблицы, состоит из трех элементов:

  • парный тег <table>, обозначающий начало и конец контейнера;
  • парный тег <tr>, обозначающий строку;
  • парный тег <td>, обозначающий ячейку.

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

В блочном же варианте для этого понадобиться лишь 1 парный тег <div>, состоящий из 2 элементов, что в сравнении с таблицей, значительно проще.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поэтому, для наглядности, ниже приведены примеры использования фиксированной и резиновой верстки. В качестве примера взят данный реально работающий сайт «rabota-vinete.ru», с параллельно установленной копией тестового сайта на хосте «mysite.local» локального веб-сервера, находящегося на персональном компьютере.

При этом, для чистоты эксперимента, перевод тестового сайта в фиксированный режим обеспечен лишь изменением необходимых параметров в таблице стилей CSS, а именно, установкой одинаковой минимальной и максимальной ширины страницы равной 1280px (в нормальном состоянии диапазон резиновой верстки сайта обеспечивает работу с мониторами со стандартными разрешениями от 1040px до 1920px, что с учетом округления, параметры этого режима установлены в диапазоне от 1000px до 2000px)

На рис.3,4 показаны скриншоты вида веб-страницы в резиновом (слева) и фиксированном (справа) режимах на мониторе с разрешением экрана 1920px. Как видно на картинках, при резиновом варианте ширина страницы полностью совпадает с шириной экрана монитора, а при фиксированном, страница сжимается по ширине и образуются довольно значительные пустые незаполненные поля.

Вид веб-страницы на мониторе с разрешением 1920px

На рис.5,6 показаны скриншоты вида веб-страницы при разрешении экрана монитора в 1040px. Можно увидеть, что в этом случае при резиновом варианте ширина страницы также полностью совпадает с шириной экрана монитора, а при фиксированном, теперь страница вышла за пределы экрана и появилась полоса прокрутки для возможности просмотра всего содержимого страницы.

Вид веб-страницы на мониторе с разрешением 1040px

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

С резиновой версткой мы определились, и теперь можно перейти к адаптивной.

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

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

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

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

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

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

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

Вид веб-страницы на дисплее мобильных устройств с разрешением 320px

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

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

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

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

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

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

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

В предыдущих версиях языка возможности семантической верстки были несколько ограничены, по сравнению с 5-той версией. Хотя, и тогда использование соответствия тегов к информации, находящейся внутри них, широко применялось при верстке. В качестве примера, можно упомянуть, часто используемые теги заголовков <Η1>, <Η2>, <Η3> …, или тег <a>, обозначающий ссылку и т.п.

С приходом HTML5, появилась возможность обозначать и более существенные смысловые значения элементов веб-страниц. Например, можно одним тегом <header> обозначить, что все, что находится внутри его, относится к шапке сайта, а то, что находится в контейнере <main>, является основным содержанием документа, которое уникально и не может где-либо еще повторяться.

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

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

  • блочной;
  • резиновой;
  • адаптивной;
  • семантической.

В следующей статье перейдем к созданию веб-страницы и размещению ее на локальном веб-сервере.

rabota-vinete.ru

Что такое адаптивная вёрстка

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

Основные приёмы создания адаптивного сайта приведены в статье Отзывчивый и адаптивный дизайн сайта. Для отзывчивого дизайна ширина основного контейнера сайта задаётся в %, при этом она может быть равна как 100% ширины окна браузера, так и меньше. Ширина столбцов сетки также задаётся в %. В адаптивном дизайне ширина основного контейнера и столбцов сетки фиксируется с помощью значений в px.

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

Вёрстка главной страницы

Страница состоит из трёх основных блоков: верхний колонтитул (шапка), контейнер-обёртка для основного содержимого и сайдбара, и нижний колонтитул (футер). В качестве переломных точек дизайна возьмём 768px и 480px.

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

main-page
Рис. 2. Пример адаптивной верстки

Перейти на страницу

1. Метатеги и раздел <head>

1) Добавим в раздел <head> необходимые файлы — ссылку на используемые шрифты, библиотеку jQuery, а также плагин prefixfree (чтобы не писать для свойств браузерные префиксы):

<!DOCTYPE html>  <html>  <head>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <title>Адаптивная вёрстка сайта</title>   <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic|Playfair+Display:400,700&subset=latin,cyrillic">   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">   <link rel="stylesheet" type="text/css" href="style.css">   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>  </head>  <body>

2. Шапка страницы

В шапке страницы <header> поместим следующие элементы-контейнеры:
логотип <a class="logo">;
кнопку для показа/скрытия главного меню <div class="nav-toggle">;
главное меню <ul id="menu">;
форму поиска по сайту <form id="searchform">.

<header>   <nav class="container">   <a class="logo" href="">   <span>L</span>   <span>O</span>   <span>G</span>   <span>O</span>   </a>   <div class="nav-toggle"><span></span></div>   <form action="" method="get" id="searchform">   <input type="text" placeholder="Искать на сайте...">   <button type="submit"><i class="fa fa-search"></i></button>   </form>   <ul id="menu">   <li><a href="">Блог</a></li>   <li><a href="">Портфолио</a></li>   <li><a href="">Об авторе</a></li>   </ul>   </nav>   </header>

3. Блок с кратким содержанием статьи

Анонс статей обернём элементом <article id="post-1" class="post">:

<div class="container">   <div class="posts-list">   <article id="post-1" class="post">   <div class="post-image"><a href=""><img src="https://html5book.ru/wp-content/uploads/2016/05/rasskaz_slovar_rodnoy_prirodi.jpg"></a></div>   <div class="post-content">   <div class="category"><a href="">Дизайн</a></div>   <h2 class="post-title">Весна</h2>   <p>Очень богат русский язык словами, относящимися к временам года и к природным явлениям, с ними связанным.</p>   <div class="post-footer">   <a class="more-link" href="">Продолжить чтение</a>   <div class="post-social">   <a href="" target="_blank"><i class="fa fa-facebook"></i></a>   <a href="" target="_blank"><i class="fa fa-twitter"></i></a>   <a href="" target="_blank"><i class="fa fa-pinterest"></i></a>   </div>   </div>   </div>   </article>   <article id="post-2" class="post">   ...   </article>   </div> <!-- конец div class="posts-list"-->  

4. Боковая колонка

В боковую колонку <aside> добавим список категорий, последние записи и форму подписки на рассылку:

<aside>   <div class="widget">   <h3 class="widget-title">Категории</h3>   <ul class="widget-category-list">   <li><a href="">Дизайн</a> (2)</li>   <li><a href="">Вёрстка</a> (5)</li>   <li><a href="">Видео</a> (1)</li>   </ul>   </div>   <div class="widget">   <h3 class="widget-title">Последние записи</h3>   <ul class="widget-posts-list">   <li>   <div class="post-image-small">   <a href=""><img src="https://html5book.ru/wp-content/uploads/2016/05/rasskaz_slovar_rodnoy_prirodi.jpg"></a>   </div>   <h4 class="widget-post-title">Весна</h4>   </li>   <li>   <div class="post-image-small">   <a href=""><img src="https://html5book.ru/wp-content/uploads/2016/05/rasskaz_Russia.jpg"></a>   </div>   <h4 class="widget-post-title">Лето</h4>   </li>   <li>   <div class="post-image-small">   <a href=""><img src="https://html5book.ru/wp-content/uploads/2016/05/rasskaz_rodnaya_priroda_osen.jpg"></a>   </div>   <h4 class="widget-post-title">Осень</h4>   </li>   </ul>   </div>   <div class="widget">   <h3 class="widget-title">Подписка на рассылку</h3>   <form action="" method="post" id="subscribe">   <input type="email" name="email" placeholder="Ваш email" required>   <button type="submit"><i class="fa fa-paper-plane-o"></i></button>   </form>   </div>  </aside>  </div> <!-- конец div class="container"-->

5. Нижний колонтитул

В подвале страницы разместим информацию о копирайте, кнопки социальных сетей и ссылку на электронную почту:

<footer>   <div class="container">   <div class="footer-col"><span>Мой блог © 2016</span></div>   <div class="footer-col">   <div class="social-bar-wrap">   <a title="Facebook" href="" target="_blank"><i class="fa fa-facebook"></i></a>   <a title="Twitter" href="" target="_blank"><i class="fa fa-twitter"></i></a>   <a title="Pinterest" href="" target="_blank"><i class="fa fa-pinterest"></i></a>   <a title="Instagram" href="" target="_blank"><i class="fa fa-instagram"></i></a>   </div>   </div>   <div class="footer-col">   <a href="mailto:admin@yoursite.ru">Написать письмо</a>   </div>   </div>  </footer>  <script>  $('.nav-toggle').on('click', function(){  $('#menu').toggleClass('active');  });  </script>  </body>  </html>

6. Общие CSS-стили

Общие стили, сброс стилей браузера по умолчанию:

*, *:after, *:before {  box-sizing: border-box;  padding: 0;  margin: 0;  transition: .5s ease-in-out; /* добавим плавность переходов для всех элементов страницы*/  }  ul {  list-style: none;  }  a {  text-decoration: none;  outline: none;  }  img {  display: block;  width: 100%;  }  h1, h2, h3, h4, h5, h6 {  font-family: 'Playfair Display';  font-weight: normal;  letter-spacing: 1px;  }  body {  font-family: 'Open Sans', arial, sans-serif;  font-size: 14px;  line-height: 1;  color: #373737;  background: #f7f7f7;  }  /* добавим очистку потока для всех контейнеров, внутри которых задано обтекание дочерних элементов */  header:after, .container:after, footer:after, .widget-posts-list li:after, #subscribe:after {  content: "";  display: table;  clear: both;  }   /* стилевой класс, который управляет шириной контейнера сетки*/  .container {  margin: 0 auto;  width: 100%;  max-width: 960px;  padding: 0 15px;  } 

7. Стили для шапки и её содержимого

header {  width: 100%;  background: white;  box-shadow: 3px 3px 1px rgba(0,0,0,.05);  padding: 15px 0;  margin-bottom: 30px;  position: relative;  }  /* логотип */  .logo {  display: block;   float: left;  }  .logo span {  color: white;  display: inline-block;  width: 30px;  height: 30px;  line-height: 30px;  border-radius: 50%;  margin: 5px 0;  text-align: center;  text-shadow: 2px 2px 1px rgba(0,0,0,.4);  }  .logo span:nth-child(odd) {  background: #EF5A42;  }  .logo span:nth-child(even) {  background: #F8B763;  }  /* меню */  #menu {  float: right;  }  #menu li {  display: inline-block;  margin-right: 30px;  }  #menu a {  color: #111;  text-transform: uppercase;  letter-spacing: 1px;  font-weight: 600;  display: block;  line-height: 40px;  }  #menu a:hover {  color: #EF5A42;  }  #menu li:last-child {  margin-right: 0;  }  /* форма поиска */  #searchform {  float: right;  margin-left: 46px;  display: inline-block;  position: relative;  }  #searchform input {  width: 170px;  float: left;  border: none;  padding-left: 10px;  height: 40px;  overflow: hidden;  outline: none;  color: #9E9C9C;  font-style: italic;  }  #searchform button {  background: transparent;  height: 40px;  border: none;  position: absolute;  right: 10px;  color: #EF5A42;  cursor: pointer;  font-size: 18px;  }  #searchform input:focus {  outline: 2px solid #EBEBE3;  }  /* кнопка переключения меню, появляющаяся при ширине 768px */  .nav-toggle {  display: none;  position: relative;  float: right;  width: 40px;  height: 40px;  margin-left: 20px;  background: #EF5A42;  cursor: pointer;  }  .nav-toggle span {  display: block;  position: absolute;  top: 19px;  left: 8px;  right: 8px;  height: 2px;  background: white;  }  .nav-toggle span:before, .nav-toggle span:after {  content: "";  position: absolute;  display: block;  left: 0;  width: 100%;  height: 2px;  background: white;  }  .nav-toggle span:before {  top: -10px;  }  .nav-toggle span:after {  bottom: -10px;  }  /* класс, который будет добавлен в верхнему меню при нажатии на кнопку и покажет скрытое меню*/  #menu.active {  max-height: 123px;  }

8. Стили для блока с основным содержимым

/* левый контейнер */  .posts-list {  margin-bottom: 30px;  width: 64%;  float: left;  }  /* блок для статьи */  .post {  margin-bottom: 35px;  }  .post-content p {  line-height: 1.5;  padding-bottom: 1em;  }  .post-image {  margin-bottom: 30px;  }  .category {  margin-bottom: 15px;  }  .category a {  color: #F8B763;  text-transform: uppercase;  }  .post-title {  margin-bottom: 12px;  font-size: 26px;  }  /* блок с кнопкой "продолжить чтение" и кнопками социальных сетей */  .post-footer {  border-top: 1px solid #EBEBE3;  border-bottom: 1px solid #EBEBE3;  position: relative;  margin-top: 15px;  }  .more-link {  position: relative;  display: inline-block;  font-size: 10px;  text-transform: uppercase;  color: white;  line-height: 44px;  padding: 0 22px;  background: #3C3D41;  letter-spacing: 0.1em;  white-space: nowrap;  }  .more-link:after {  content: '';  display: block;  position: absolute;  width: 0;  height: 0;  top: 0;  right: 0;  border: solid transparent;  border-width: 22px 18px;  border-left-color: #3C3D41;  transform: translateX(100%);  }  .post-social {  position: absolute;  left: auto;  top: 50%;  right: 0;  text-align: right;  transform: translateY(-50%);  padding: 0;  font-size: 12px;  }  .post-social a {  display: inline-block;  margin-left: 8px;  color: #F8B763;  width: 25px;  height: 25px;  line-height: 23px;  text-align: center;  border-radius: 50%;  border: 1px solid;  }

9. Стили для боковой колонки

/* правый контейнер */  aside {  width: 33%;  float: right;  }  /* блок для виджетов */  .widget {  padding: 20px 15px;  background: white;  font-size: 13px;  margin-bottom: 30px;  box-shadow: 3px 3px 1px rgba(0,0,0,.05);  }  .widget-title {  font-size: 18px;  padding: 10px;  margin-bottom: 20px;  text-align: center;  border: 2px solid #F8B763;  box-shadow: 3px 3px 0 0 #F8B763;  }  .widget-category-list li {  border-bottom: 1px solid #EBEBE3;  padding: 10px 0;  color: #c6c6c6;  font-style: italic;  }  .widget-category-list li:last-child {  border-bottom: none;  }  .widget-category-list li a {  color: #626262;  margin-right: 6px;  font-style: normal;  }  .widget-category-list li a:before {  content: "f105";  display: inline-block;  font-family: 'FontAwesome';  margin-right: 10px;  color: #c6c6c6;  }  .widget-posts-list li {  border-top: 1px solid #EBEBE3;  padding: 15px 0;  }  .widget-posts-list li:nth-child(1){  border-top: none;  }  .post-image-small {  width: 30%;  float: left;  margin-right: 15px;  }  .widget-post-title {  float: left;  }  /* форма подписки */  #subscribe {  position: relative;  width: 100%;  padding: 15px 0;  }  #subscribe input {  width: 100%;  display: block;  float: left;  border: 2px solid #EBEBE3;  padding: 0 0 0 10px;  height: 40px;  position: relative;  outline: none;  color: #9E9C9C;  font-style: italic;  }  #subscribe button {  padding: 0 15px;  background: transparent;  height: 40px;  border: none;  position: absolute;  right: 0;  color: #EF5A42;  cursor: pointer;  font-size: 18px;  }  #subscribe input:focus + button {  background: #EF5A42;  color: white;  }

10. Стили для нижнего колонтитула

Подвал сайта разделим на три равных столбца:

footer {  padding: 30px 0;  background: #3C3D41;  color: white;  }  .footer-col {  width: 33.3333333333%;  float: left;  }  .footer-col a {  color: white;  }  .footer-col:last-child {  text-align: right;  }  .social-bar-wrap {  text-align: center;  }  .social-bar-wrap a {  padding: 0 7px;  font-size: 18px;  }

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

@media (max-width: 768px) {  /* показываем кнопку для переключения верхней навигации */  .nav-toggle {  display: block;  }  header {  padding: 10px 0;  }  /* скрываем верхнее меню, отменяем обтекание, позиционируем его, сместив на высоту шапки сайта */   #menu {  max-height: 0;  background: white;  float: none;  position: absolute;  overflow: hidden;  top: 63px;  right: 0;  left: 0;  margin: 0;  padding: 0;  z-index: 3;  }  /* делаем элементы списка блочными, чтобы они располагались друг под другом */  #menu li {  display: block;  padding-left: 15px;  border-bottom: 1px solid #EBEBE3;  margin-right: 0;  }  /* отменяем обтекание левой и правой колонок, устанавливаем им ширину 100%*/  .posts-list, aside {  width: 100%;  float: none;  }  .widget-post-title {  font-size: 1.5em;  }  }  @media (max-width: 480px) {  /* выравниванием логотип по центру */  nav {  text-align: center;  }  /* отменяем обтекание для логотипа */  .logo {  float: none;  margin-bottom: 15px;  }  /* позиционируем меню на увеличившуюся высоту шапки */  #menu {  top: 118px;  }  /* позиционируем форму поиска по левому краю */  #searchform {  float: left;  margin-left: 0;  }  /* убираем верхнюю и нижнюю границы и выравниваем кнопку по центру */  .post-footer {  border-top: none;  border-bottom: none;  text-align: center;  }  /* отменяем позиционирование кнопок соцсетей */  .post-social {  position: static;  text-align: center;  transform: none;  margin-top: 20px;  }  .widget-post-title {  font-size: 1.2em;  }  /* отменяем обтекание для столбцов подвала страницы */  .footer-col {  float: none;  margin-bottom: 20px;  width: 100%;  text-align: center;  }  .footer-col:last-child {  text-align: center;  margin-bottom: 0;  }  }

12. Скрипт для мобильного меню

За показ-скрытие верхнего меню при клике на кнопку (переключается высота меню — от нулевой до равной её содержимому) отвечает код jQuery, который мы ранее добавили в разметку страницы перед закрывающим тегом </body>:

<script>  $('.nav-toggle').on('click', function(){   $('#menu').toggleClass('active');  });  </script>

html5book.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.