- Простые правила разметки
- Простой список #
- Картинка пользователя (юзерпик) #
- Галерея #
- Навигация (простой вариант) #
- Навигация (сложный вариант) #
- Виджет в боковой колонке #
- Блок новостей #
- Статья или пост в блоге (простой вариант) #
- Статья или пост в блоге (сложный вариант) #
- Разметка страницы #
- Создание макета страницы и верстка
Простые правила разметки
Простой список #
class="list"> class="item">Первое class="item">Второе class="item">Третье
Картинка пользователя (юзерпик) #
class="user"> class="user__img" src="userpic.png" alt="Дормидонт Петрович"> class="user__link" href="#">Дормидонт Петрович
Галерея #
class="gallery gallery--slider"> class="gallery__list"> class="gallery__item"> class="gallery__img" src="flowers.jpg" alt="Цветём как в последний раз"> class="gallery__item"> class="gallery__img" src="trees.jpg" alt="Парк «Три сосны»">
Навигация (простой вариант) #
class="nav"> class="nav__link nav__link--active">Главная class="nav__link" href="#">Второстепенная class="nav__link" href="#">Третья с конца class="nav__link" href="#">Предпоследняя class="nav__link" href="#">Совсем конец
Навигация (сложный вариант) #
class="nav"> class="nav__list"> class="nav__item nav__item--current"> class="nav__link">Главная class="nav__item"> class="nav__link" href="#">Статьи class="nav__item"> class="nav__link" href="#">Фотогалерея class="nav__item"> class="nav__link" href="#">Контакты
Виджет в боковой колонке #
class="widget"> class="widget__tilte">Выращиваем желе class="widget__content"> Чтобы вырастить общительное дружелюбное желе, нам потребуется рулон поролона, два килограмма сахара, три яйца и пол чайной чашки ацетона. class="widget__link" href="#">Не читать дальше.
Блок новостей #
class="news"> class="news__title">Вчерашние новости class="news__list"> class="news__item item-news"> class="item-news__title"> Соревнования среди воблы по конькобежному спорту class="item-news__text"> Победила команда килек из Петрозаводска href="#" class="item-news__link">Читать дальше class="news__item item-news"> class="item-news__title"> Учёные уточнили роль напильника в уходе за ногтями class="item-news__text"> Британские учёные высоко оценили вклад напильника в отращивание полутораметровых ногтей. href="#" class="item-news__link">Не читать дальше
Статья или пост в блоге (простой вариант) #
class="article"> class="article__title"> Нащупываем чакры у пучка петрушки class="article__datetime">32 мая, 10:87 class="article__author author-article"> class="author-article__img" src="userpic.png" alt="Клешня Андреевна"> class="author-article__link" href="#">Клешня Андреевна Долгорукая class="author-article__desc">Наш эксперт по чакрам class="article__content"> Сходите на рынок и купите у старушек пучок петрушки грамм на 100. Как следует переберите, очистите от жуков и гусениц. Жуков отдайте поиграться коту, гусениц поселите в горшок с кактусами, пусть одна будет Джоном, вторая Билли, а у вас в горшке теперь будет Дикий Запад. Вернитесь к пучку петрушки. Ласково взгляните на него и как следует почешите за ухом, можно себе или коту. Перевяжите атласной ленточкой, непременно завяжите бант. Поздравляем! Теперь у вас есть полностью одомашненный пучок петрушки, который будет весело бегать за вами по пятам и проращивать свои семена в ваших тапках.
Статья или пост в блоге (сложный вариант) #
class="entry"> class="entry__header"> class="entry__title title-entry"> class="title-entry__link" href="#"> Резиновые уточки как способ самопознания class="entry__datetime">32 мая, 10:87 class="entry__author author-entry"> class="author-entry__img" src="userpic.png" alt="Василиса Сергеевич"> class="author-entry__link" href="#">Василиса Сергеевич class="entry__content"> Достаньте с чердака коробку с полусотней резиновых уточек, оставшихся после празднования нового года. Из уточек и горящих свечей выложите пентаграмму на полу комнаты. Сядьте посередине в позу лотоса, в каждую руку возьмите по немецко-бразильскому словарю, прокашляйтесь, наберите полную грудь воздуха и громко и уверенно, с полной самоотдачей скажите "Кря!" class="entry__tags tags-entry"> class="tags-entry__tilte">Метки class="tags-entry__list"> class="tags-entry__item"> class="tags-entry__link" href="#">хоровод своими руками class="tags-entry__item"> class="tags-entry__link" href="#">фарфоровые тапки class="tags-entry__item"> class="tags-entry__link" href="#">гуталин в кулинарии class="entry__menu menu-entry"> class="menu-entry__item menu-entry__item--read"> class="menu-entry__link" href="#">238 ответов class="menu-entry__item menu-entry__item--write"> class="menu-entry__link" href="#">Написать в спортлото class="menu-entry__item menu-entry__item--share"> class="menu-entry__link" href="#">Поделиться
Разметка страницы #
class="site-header"> class="site-header__title">Название сайта class="site-header__nav site-nav"> href="#" class="site-nav__link">О продукте href="#" class="site-nav__link">О погоде href="#" class="site-nav__link">О чём шумит камыш class="site-main"> class="features"> class="features__title">Преимущества class="features__list"> class="features__item">Высокие потолки [. ] class="prices"> class="prices__title">Тарифы class="prices__list"> class="prices__item">30 зонтиков в минуту [. ] class="site-aside"> class="widget"> class="widget__title">Как мы отдыхаем? class="widget__text">Читайте в нашей новой книге «Никак» class="site-footer"> class="site-footer__socials socials"> href="#" class="socials__link socials__link--tw">Twitter href="#" class="socials__link socials__link--fb">Facebook href="#" class="socials__link socials__link--ok">Одноклассники class="site-footer__copyright copyright "> Сделано href="#" class="copyright__link">левой пяткой
Создание макета страницы и верстка
Как правило, веб-страница состоит из множества различных элементов, которые могут иметь сложную структуру. Поэтому при создании веб-страницы возникает необходимость нужным образом позиционировать эти элементы, стилизовать их так, чтобы они располагались на странице нужным образом. То есть возникает вопрос создания макета страницы, ее верстки.
Существуют различные способы, стратегии и виды верстки. Изначально распространенной была верстка на основе таблиц. Так как таблицы позволяет при необходимости очень легко и просто разделить вcе пространство веб-страницы на строки и столбцы. Строками и столбцами довольно легко управлять, в них легко позиционировать любое содержимое. Именно это и определило популярность табличной верстки.
Однако табличная верстка создает не самые гибкие по дизайну страницы, что является особенно актуальным аспектом в мире, где нет одного единственного разрешения экрана, за то есть большие экраны на телевизорах, малые экраны на планшетах и фаблетах, очень маленькие экраны на смартфонах и т.д. Все это многообразие экранов табличная верстка оказалась не в состоянии удовлетворить. Поэтому постепенно ей на смену пришла блочная верстка. Блочная верстка — это отосительно условное название способов и приемов верстки, когда в большинстве веб-страниц для разметки используется CSS-свойство float , а основным строительным элементов веб-страниц является элемент , то есть по сути блок. Используя свойство float и элементы div или другие элементы, можно создать структуру страницы из нескольких столбцов, как при табличной верстке, которая будет значительно гибче.
Ранее в одной из прошлых тем рассматривалось действие свойства float . Теперь используем его для создания двухколоночной веб-страницы. Допустим, вверху и внизу у нас будут стандартно шапка и футер, а в центре — две колонки: колонка с меню или сайдбар и колонка с основным содержимым.
В начале определим все блоки. При работе с элементами, которые используют обтекание и свойство float , важен их порядок. Так, код плавающего элемента, у которого устанавливается свойство float , должен идти перед элементом, который обтекает плавающий элемент. То есть блок сайдбара будет идти до блока основного содержимого:
div < margin: 10px; border: 1px solid black; font-size: 20px; height: 80px; >#header < background-color: #ccc; >#sidebar < background-color: #ddd; >#main < background-color: #eee; height: 200px; >#footerШапка сайтаСайбарОсновное содержимоеФутер
То есть пока получается примерно следующая страница:
Высота, граница и отступы блоков в данном случае добавлены только для красоты, чтобы идентифицировать пространство блока и отделять его от других.
Далее, чтобы переместить блок сайдбара влево по отношению к блоку основного содержимого и получить эффект обтекания, нам надо указать у блока сайдбара свойство float: left и предпочтительную ширину. Ширина может быть фиксированной, например, 150 px или 8 em. Либо также можно использовать проценты, например, 30% — 30% от ширины контейнера body. С одной стороны, блоками с фиксированной шириной легче управлять, но с другой процентные значения ширины позволяют создавать более гибкие, резиновые блоки, которые изменяют размеры при изменении размеров окна браузера.
Последним шагом является установка отступа блока с основным содержимым от блока сайдбара. Поскольку при обтекании обтекающий блок может обтекать плавающий элемент и справа и снизу, если плавающий элемент имеет меньшую высоту, то нам надо установить отступ, как минимум равный ширине плавающего элемента. Например, если ширина сайдбара равна 150px, то для блока основного содержимого можно задать отступ в 170px, что позволит создать пустое пространство между двумя блоками.
При этом не стоит у блока основного содержимого указывать явным образом ширину, так как браузеры расширяют его автоматически, чтобы он занимал все доступное место.
Итак, принимая во внимание все выше сказанное, изменим стили блоков сайдбара и основного содержимого следующим образом:
В итоге у нас получится сайдбар по левую сторону от основного блока:
Высота блоков в данном случае указана условно для большей наглядности, в реальности, как правило, высоту будет автоматически устанавливать браузер.
Создание правого сайдбара будет аналогично, только теперь нам надо установить у сайдбара значение float: right , а у блока основного содержимого — отступ справа:
При этом разметка html остается такой же, блок сайдбара по прежнему должен предшествовать блоку основного содержимого.