Создание блоков в html css. Основы CSS и HTML. Блочная верстка. Урок по блочной верстке

10.11.14 58.7K

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

Верстка сайта – ремесло для посвященных

Есть в верстке сайта что-то таинственное. Но это до тех пор, пока не познакомишься с этим ремеслом поближе. Начинаем наше посвящение:


Следующим этапом разработки сайта после создания его макета является верстка. Задача верстальщика перенести с помощью html кода и таблиц css скелет будущего сайта в виртуальный мир. Проще говоря, перенести размеры и пропорции ресурса в форму, понятную для браузера.

В процессе верстки кодом html происходит разбивка «скелета » сайта на части. А с помощью css (каскадных таблиц стилей ) задаются размеры его «костей », цвет и расположение.

Различают несколько видов верстки:

I. Табличная – ранее была основным способом верстки. В табличной верстке для задания структуры сайта используется тег

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


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

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

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

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

II. Блочная – в данный момент является основным способом верстки. В отличие от табличной блочная верстка обладает рядом преимуществ:

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

Основным недостатком блочной верстки является некая «двусмысленность » понимания ее кода различными браузерами. Поэтому часто html страницы приходится «доводить » путем использования специальных хаков.

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

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

Основным элементом, применяемым в блочной верстке, является тег

. Участок кода, отделенный этим тегом, называется слоем. Все стилевые решения вынесены за границы кода html в каскадные таблицы стилей. Доступ к ним осуществляется через идентификаторы или классы css :

Как происходит блочная верстка?

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


Для примера возьмем вот такой макет сайта, созданный в Photoshop . Сначала в текстовом редакторе с помощью div задаем структуру будущего ресурса и присваиваем каждому слою свой селектор id . Получается такая структура:


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

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

Полный код примера index.html :

Пример блочной верстки

Контент

Содержимое файла style.css :

body { background: #f3f2f3; color: #000000; font-family: Trebuchet MS, Arial, Times New Roman; font-size: 12px; } #container { background:#99CC99; margin: 30px auto; width: 900px; height: 600px; } #header { background: #66CCCC; height: 100px; width: 900px; } #navigation { background: #FF9999; width: 900px; height: 20px; } #menu { background: #99CC99; float: left; width: 200px; height: 400px; } #content { background: #d2d0d2; float: right; width: 700px; height: 400px; } #clear { clear:both; } #footer { background: #0066FF; height: 80px; width: 900px; }

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

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

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

Итак, приступим. Предположим, у нас есть вот такая стандартная html-страница:

Теперь давайте посмотрим, как можно сверстать такую страницу средствами CSS.

Если визуально разделить нашу страницу на прямоугольные блоки, то мы получим четыре блока: шапка сайта, меню, контент и низ сайта. Таким образом, мы имеем четыре div-а. Давайте напишем html-код страницы с четырьмя div-ами и каждому дадим соответствующий идентификатор (id):

шапка сайта

низ сайта

Теперь, на странице style.css зададим те свойства, которые уже знаем, а именно ширину, высоту и фон каждого блока:

#header{ background:darkred; width:715px; height:100px; } #menu{ background:oldlace; width:190px; height:300px; } #content{ background:oldlace; width:525px; height:300px; } #footer{ background:darkred; width:715px; height:30px; }

Сейчас наша страница в браузере (в уменьшенном варианте) выглядит так:

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

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

  • абсолютное позиционирование

  • относительное позиционирование

  • плавающая блоковая модель
Для определения схемы позиционирования используется свойство position , оно может принимать четыре значения, соответствующие выбранной схеме позиционирования:
  • static - блок позиционируется в нормальном потоке. Это значение по умолчанию.

  • relative - относительное позиционирование (относительно нормального потока).

  • absolute - абсолютное позиционирование

  • fixed - фиксированное позиционирование (фиксируется относительно области просмотра).
Сегодня мы рассмотрим абсолютное позиционирование , остальные схемы будем рассматривать в следующих уроках.

Абсолютное позиционирование

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

  • left - указывает на сколько надо сместить блок относительно левого края окна.

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

  • top - указывает на сколько надо сместить блок относительно верхнего края окна.

  • bottom - указывает на сколько надо сместить блок относительно нижнего края окна.
Вернемся к нашему примеру. Наши блоки header , menu и footer позиционируются в нормальном потоке, поэтому свойство position для них задавать не надо.

А вот блок content нужно расположить в другом месте, поэтому для него мы укажем свойство position:absolute и зададим смещение: от левого края окна на ширину блока menu , т.е. на 190 пикселов, а от верхнего края окна на высоту блока header , т.е. на 100 пикселов.

#header{ background:darkred; width:715px; height:100px; } #menu{ background:oldlace; width:190px; height:300px; } #content{ background:oldlace; width:525px; height:300px; position:absolute; left:190px; top:100px; } #footer{ background:darkred; width:715px; height:30px; }

Теперь наша страница в браузере выглядит так:

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

Так, по умолчанию для элемента body определены поля, а мы их не учитывали при задании свойств смещения. Чтобы решить эту проблему, достаточно задать для body свойство margin:0px , т.е. явно указать размер полей (в нашем примере - их отсутствие). Добавим это в таблицу стилей:

body{ margin:0px; }

Теперь наша страница выглядит так, как мы и ожидали:

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

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

Тогда в нашу html-страницу, в div id="content" мы добавим div id="news" :

шапка сайта

Контент

блок новостей

низ сайта

Тогда в таблице стилей смещение мы будем указывать относительно блока content :

#news{ background:yellow; width:150px; height:280px; position:absolute; left:365px; top:10px; }

Ширина блока content равна 525 пикселов, а ширина блока news - 150 пикселов. Значит, смещение от левого края равно (525-150) 375 пикселов, но, чтобы блок не прилипал к правому краю, мы уменьшили смещение до 365 пикселов.

Аналогично рассчитываем смещение от верхнего края: высота блока content равна 300 пикселов, а высота блока news - 280 пикселов. Значит смещение от верхнего края может быть не более (300-280) 20 пикселов, мы сделали 10.

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

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

Любой блочный элемент состоит из набора свойств, подобно капустным листам накладываемых друг на друга. Основой блока выступает его контент (это может быть текст, изображение и др.), ширина которого задается свойством width , а высота через height ; вокруг контента идут поля (padding ), они создают пустое пространство от контента до внутреннего края границ; затем идут собственно сами границы (border ) и завершают блок отступы (margin ), невидимое пустое пространство от внешнего края границ. Порядок влияния этих свойств на блок четко определён и не может быть нарушен. На рис. 3.1 показан блок в виде набора этих свойств.

Рис. 3.1. Свойства, формирующие блочный элемент

Для наглядности свойства блока можно представить в виде матрёшек (рис. 3.2). Любую маленькую матрёшку можно вставить в более крупную матрёшку, но никак не наоборот.

Рис. 3.2. Матрёшки

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

Поля

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

Пример 3.1.Использование свойства padding

Поля

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

Результат примера показан на рис. 3.3.

Рис. 3.3. Поля вокруг текста

Значения полей не могут быть отрицательными.

Границы

Границы это линии вокруг полей элемента на одной, двух, трёх или всех четырёх его сторонах. У каждой линии есть толщина, стиль и цвет. Для создания рамки применяется универсальное свойство border одновременно задающее все эти параметры, а для создания линий на отдельных сторонах элемента можно воспользоваться свойствами border-left , border-top , border-right и border-bottom , соответственно устанавливающих границу слева, сверху, справа и снизу. В примере 3.2 показано добавление линии слева от элемента.

Пример 3.2. Красная пунктирная линия

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Линия

Результат данного примера показан на рис. 3.4.

Рис. 3.4. Линия возле текста

Расстояние от линии до текста регулируется значением padding .

Отступы

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

Для отступов характерны следующие особенности.

  • Отступы прозрачны, на них не распространяется цвет фона или фоновая картинка, заданная для блока. Однако если фон установлен у родительского элемента, он будет заметен и на отступах.
  • Отступы в отличие от полей могут принимать отрицательное значение, это приводит к сдвигу всего блока в указанную сторону. Так, если задано margin-left : -10px , это сдвинет блок на десять пикселов влево.
  • Для отступов характерно явление под названием «схлопывание», когда отступы у близлежащих элементов не суммируются, а объединяются меж собой.
  • Отступы, заданные в процентах, вычисляются от ширины контента блока. Это касается как вертикальных, так и горизонтальных отступов.

В примере 3.3 показано схлопывание отступов и их прозрачность.

Пример 3.3. Использование отступов

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Отступы

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

Результат данного примера показан на рис. 3.5. Обратите внимание, что расстояние между блоками равно 20 пикселов, а не 40, которые получаются суммированием верхнего и нижнего отступа у блоков. Это происходит за счёт эффекта схлопывания, при котором близлежащие отступы объединяются.

Рис. 3.5. Отступы в элементе

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

Ширина блока это комплексная величина и складывается из нескольких значений свойств:

  • width - ширина контента, т.е. содержимого блока;
  • padding-left и padding-right - поле слева и справа от контента;
  • border-left и border-right - толщина границы слева и справа;
  • margin-left и margin-right - отступ слева и справа.

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

Рис. 3.6. Ширина блока

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

Допустим, для слоя написан следующий стиль.

Width: 300px; /* Ширина контента */ margin: 7px; /* Значение отступов */ border: 4px solid black; /* Параметры границы */ padding: 10px; /* Поля вокруг текста */

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

Ширина = 300 + 7 + 7 + 4 + 4 + 10 + 10 = 342

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

Алгоритм блочной модели

Как уже упоминалось, ширина блока формируется из ширины контента и значений полей, границ и отступов. В браузере Internet Explorer в режиме совместимости (иными словами, когда не указан доктайп) алгоритм меняется автоматически и ширина всего блока устанавливается равной width . Остальные браузеры так просто не меняют алгоритм, к тому же вы знаете, что режим совместимости это зло. В CSS3 есть замечательное свойство box-sizing , которое нам и пригодится. При значении border-box ширина начинает включать поля и границы, но не отступы. Таким образом, подключая box-sizing со значением border-box к своему стилю, мы можем задавать ширину в процентах и спокойно указывать border и padding , не боясь, что изменится ширина блока. К сожалению, с этим свойством связана небольшая проблема, как обычно относящаяся к браузерам - не все браузеры его понимают. Радует, что браузеры хотя бы поддерживают специфические для каждого браузера свойства. В табл. 3.1 приведена поддержка браузерами.

Табл. 3.1. Поддержка браузерами свойства box-sizing
Браузер Internet Explorer Chrome Opera Safari Firefox
Версия 8.0+ 2.0+ 7.0+ 3.0+ 1.0+
Свойство box-sizing -webkit-box-sizing box-sizing -webkit-box-sizing -moz-box-sizing

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

Пример 3.4. Ширина блока

XHTML 1.0 CSS 3 IE 7 IE 8+ Cr Op Sa Fx

Ширина блока

Ширина блока 100%

Данный пример будет работать во всех браузерах, указанных в табл. 3.1, однако невалиден в CSS3 из-за применения нестандартных свойств начинающихся на -moz и -webkit. Ширина блока составляет 100% с учетом значений padding . Без свойства box-sizing в браузере появится горизонтальная полоса прокрутки.

Вложенные слои

Использование свойства box-sizing всем хорошо, кроме того, что не работает в старых версиях IE. Если вы верстаете сайт с учетом IE7 и IE6, вам подойдёт старый проверенный метод с вложением слоев. Идея простая - для внешнего блочного элемента задаётся только необходимая ширина, а для вложенного блока всё остальное - поля, границы и отступы. Поскольку по умолчанию ширина блока равна доступной ширине родителя, получится, что блоки в каком-то смысле накладываются друг на друга, при этом фактическая ширина такого комбинированного элемента будет чётко задана. В примере 3.5 показано использование вложенных слоев.

Пример 3.5. Вложенные слои

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Ширина блока

Ширина слоя 100%

Результат данного примера показан на рис. 3.7.

Рис. 3.7. Ширина блока в процентах

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

На высоту блока действуют те же правила, что и на ширину. А именно, высота складывается из значений высоты контента (height ), полей (padding ), границ (border ) и отступов (margin ). Если свойство height не указано, то оно считается как auto , в этом случае высота контента вычисляется автоматически на основе содержимого. На рис. 3.8 показаны свойства, дающие итоговую высоту, которая обозначена чёрной пунктирной линией.

Рис. 3.8. Высота блока

Вместе с тем, несмотря на схожесть принципов построения ширины и высоты, у них есть существенные различия. Это касается того случая, когда значение width и height не указано, тогда по умолчанию оно принимается как auto . Для ширины блока - это максимально доступная ширина контента, а для высоты блока - это высота контента. Также для ширины блока известна ширина родителя, даже если она не указана явно. Это позволяет устанавливать значение width в процентах. Использование же процентов для height ни к чему не приведёт, потому что высота родителя не вычисляется и её надо указывать. В примере 3.6 показано, как задать высоту блока в процентах.

Пример 3.6. Высота блока

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Высота блока

Высота слоя 100%

Результат данного примера показан на рис. 3.9.

Рис. 3.9. Высота блока в процентах

Для тега

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

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

С высотой связана ещё одна особенность - при превышении содержимого блока его размеров при заданной высоте, содержимое начинается отображаться поверх блока (рис. 3.10).

Рис. 3.10. Превышение размеров блока

Код, приводящий к подобному результату, приведен в примере 3.7.

Пример 3.7. Превышение размеров блока

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Высота блока

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

Охотничий участок льва может иметь длину и ширину до тридцати километров.

Чтобы избежать подобных неприятностей, высоту контента лучше не задавать, тогда высота блока будет вычисляться автоматически. Впрочем, бывают случаи, когда высота должна быть чётко указана, тогда рекомендуется к стилю добавить свойство overflow со значением auto или hidden . Результат у них разный, auto добавляет полосы прокрутки автоматически, когда они требуются (рис. 11а), hidden скрывает всё, что не помещается в заданные размеры (рис. 11б).

а. Значение auto

б. Значение hidden

Рис. 11. Использование свойства overflow

Фон

Если задать одновременно цвет фона и пунктирную границу блока, то становится заметно, что граница проходит внутри цветной области. Правда в разных браузерах наблюдается разночтение, в частности Internet Explorer до версии 7.0 включительно содержит ошибку, при которой фон выводится по внутреннему краю границы (рис. 12в). Начиная с версии 8.0 эта ошибка исправлена, и фон выводится по стандартам (рис. 12г). Браузеры Opera (рис. 12а), Firefox (12б), Safari и Chrome (рис. 12д) фон выводят правильно. Небольшие различия наблюдаются при отображении пунктирной рамки, но они не влияют на блочную модель.

д. Safari, Chrome

Рис. 12. Отображение фона в браузере

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

Пример 3.8. Фон и граница

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Рамка

Опаньки...

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

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

Если увеличить фрагмент с уголком (рис. 1), то можно увидеть, что скругление образуется за счет наложения нескольких блоков, количество которых обычно бывает от трех до шести. Большее число блоков повышает радиус скругления, но и загромождает код, так что остановимся на радиусе в четыре пиксела.

Рис. 1. Увеличенный скругленный уголок

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

Пример 1. Стиль для создания блоков

R1, .r2, .r3, .r4 { display: block; /* Блочный элемент */ height: 1px; /* Высота */ background: #f677c5; /* Цвет фона */ overflow: hidden; /* Для IE6 */ } .r1 { margin: 0 5px; } .r2 { margin: 0 3px; } .r3 { margin: 0 2px; } .r4 { margin: 0 1px; height: 2px; }

Теперь надо добавить эти блоки сверху и снизу от контента через какой-нибудь тег, например, . Сверху блоки будут идти в возрастающем порядке, от 1 до 4, а снизу в убывающем, от 4 до 1. В примере 2 показан окончательный код.

Пример 2. Создание блока с закругленными уголками

Скругленные уголки

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

Результат данного примера показан на рис. 2.

Рис. 2. Блок со скругленными уголками

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

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

Пример 3. Радиус скругления три пиксела

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Скругленные уголки

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

Результат данного примера показан на рис. 3.

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

В случае незнания основных тонкостей работы с данным инструментом увы и ах, но привлекательного адаптивного дизайна вы не получите никак. Поэтому данная статья посвящена теме «Как сделать блок в html». Я подробно опишу, как самому с нуля создать блочные объекты на странице, каким образом оформить фон и дизайн блоков, и самое главное расскажу, как подключить таблицу стилей. Итак, начнем!

Особенности блочных элементов

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

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

Главным в блоке выступает контент .

Вокруг него расположены поля, которые называются padding . Поля отвечают за расстояние между контентом объекта и его внутренним краем границ.

После идут сами границы, которые именуются английским словом border .

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

В качестве примера запрограммируем 2 и заполним созданные элементы текстом.

Заголовок

В этом блочном элементе разместим текст первого объекта.
А вот в этом блочном элементе разместим текст второго объекта.

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

Внесем-ка ярких красок в обыденную жизнь html

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

Для этого в контейнере head после тега необходимо добавить строку: </i><br></p><blockquote> <p><link rel="stylesheet" href="style.css"></p> </blockquote> <p>Сам по себе элемент <link> располагается только внутри тега <head> и устанавливает связь с <a href="/kak-podklyuchit-flash-nakopitel-k-ustroistvam-s-android-problemy-i-ih/">внешними файлами</a>, отвечающими за стили.</p> <p>Настало время задать цветное оформление и расположение блокам.</p> <p>Первый блок я решил оформить в красных цветах с жирными границами и сделать его полупрозрачным.</p> <p>Второй же блок – полностью видимый, <a href="/pochemu-papki-zheltye-kak-pomenyat-vneshnii-vid-vseh-papok-na-privychnyi/">желтого цвета</a> с тонкими границами и с закругленными углами. Замечу, что блоки не являются фиксированными и текст в них выравнивается по ширине, а не располагается по центру. За все видоизменения отвечает ниже представленный css-код.</p> <table><tr><td class="line_numbers"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 </td><td class="code"> .element1 { opacity: 0.7; background: #edab92; float: left; width: 310px; border: 4px solid red; padding: 6px; padding-right: 15px; } .element2 { width: 310px; float: left; background: #fc0; border: solid 1px grey; position: relative; padding: 6px; left: -65px; top: 55px; border-radius: 10px; } </td> </tr></table><p>Element1 { opacity: 0.7; background: #edab92; float: left; width: 310px; border: 4px solid red; padding: 6px; padding-right: 15px; } .element2 { width: 310px; float: left; background: #fc0; border: solid 1px grey; position: relative; padding: 6px; left: -65px; top: 55px; border-radius: 10px; }</p> <blockquote> <p>Для того чтобы вы смогли лицезреть <a href="/zapis-v-mysql-iz-php-php-zapis-v-bazu-dannyh-mysql-prakticheskie-primery/">данный пример</a> во всей красе во вкладке , создайте простой <a href="/komandnaya-stroka-vyvod-spiska-failov-osnovnye-komandy-komandnoi-stroki-sozdaem/">текстовый файл</a> и внесите в него выше написанный текст. После сохраните документ с названием «style.css», обязательно проверьте, совпадает ли название документа со значением атрибута тега <link> href="style.css".</p> </blockquote> <p>Думаю, вы догадались, что в случае несовпадения, внешний документ с описанием стилей не будет найден, вследствие чего изменения не вступят в силу.</p> <p>Теперь давайте разберем строки css-кода. Для наглядности я структурировал все в таблицу с двумя колонками.</p> <table style="height: 466px;" width="755"><tbody><tr><td width="224"><b><u>Свойство </u> </b> </td> <td width="555"><b><u>Значение </u> </b> </td> </tr><tr><td width="224">opacity </td> <td width="555">Отвечает за прозрачность объекта. При opacity равному 0 элементы становятся полностью прозрачными, при 1 – полностью видимыми. </td> </tr><tr><td width="224">width </td> <td width="555">Отвечает за ширину <a href="/html---strochnye-i-blochnye-elementy-osnovy-html-obshchie-pravila-blochnye-i-strochnye/">блочных элементов</a>. </td> </tr><tr><td width="224">background </td> <td width="555">Задает характеристические параметры фона, который в свою очередь может задаваться как цветом, так и картинкой. </td> </tr><tr><td width="224">border </td> <td width="555">Позволяет установить толщину, цвет и стиль границ вокруг объекта. </td> </tr><tr><td width="224">float </td> <td width="555">Задает выравнивание элемента. Остальные объекты по умолчанию обтекают данный. Можно задать значения: left, right, none (не задает обтекание элементов) или inherit (повторяет значение родительского объекта). </td> </tr><tr><td width="224">border-radius </td> <td width="555">Способствует округлению углов блока. Можно указывать как одинаковый радиус для всех углов, так и уникальный для каждого. </td> </tr><tr><td width="224">top </td> <td width="555">Определяет расстояния между верхними границами родительского элемента и дочернего. </td> </tr><tr><td width="224">left </td> <td width="555">Определяет расстояния между левыми границами родительского и дочернего элементов. </td> </tr></tbody></table><p>Обратите внимание на строку в коде примера <b>position: relative </b> в element2. Так как этому атрибуту, определяющему позиционирование объекта, задано значение relative, то расположение самого объекта будет меняться не от координат верхнего края браузера, а от координат верхней границы первого блока element1.</p> <p>Вот почему при задании <b>top = 55px </b> и <b>left = -65px </b> второй блочный элемент сдвинулся вниз на 55 пикселей и вправо на 65 пикселей от границ первого блока.</p> <p>Кстати, особо внимательные могли заметить, что left = -65px и right = 65px – это одно и то же.</p> <h2>А что же HTML 5</h2> <p><img src='https://i2.wp.com/romanchueshov.ru/wp-content/uploads/2016/06/HTML5.jpg' align="center" width="100%" loading=lazy></p> <p>Напоследок хотел бы добавить, что в <a href="/udobnaya-i-sovremennaya-web-platforma-web-platformy/">современной платформе</a> html 5 есть нововведенные блочные теги <b><nav> </b>, <b><article> </b>, <b><footer> </b>, <b><header> </b> и другие, которые заменяют привычный div. Их суть применения для человека не отличается ничем, однако они облегчают работу машин.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> </article> <div class="related-posts"> <h3 class="title text-uppercase text-center">Еще на эту тему:</h3> <div class="row"> <div class="post article-wrp with-border col-sm-6 col-md-4"> <div class="article-in-loop"> <a class="thumb-title" href="/top-programm-dlya-udaleniya-draiverov-skachat-driver-sweeper/"> <span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb"> <span class="embed-responsive-item"> <span class="super-wrp"> <span class="span-table"> <span class="span-table-row"> <span class="span-table-row-cell"> <img src="https://i2.wp.com/pc-assistent.ru/wp-content/uploads/2017/06/driver_sweeper_200x175.png" class="img-responsive" alt="Скачать Driver Sweeper – программа для удаления драйверов из OC Windows Скачать программу для удаления драйверов карты" loading=lazy> </span> </span> </span> </span> </span> </span> <span class="date"> </span> <span class="title"> Скачать Driver Sweeper – программа для удаления драйверов из OC Windows Скачать программу для удаления драйверов карты </span> </a> </div> </div> <div class="post article-wrp with-border col-sm-6 col-md-4"> <div class="article-in-loop"> <a class="thumb-title" href="/vykidyvaet-na-rabochii-stol-sniper-elite-v2-vykidyvaet-na-rabochii-stol-sniper-elite-v2-chto/"> <span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb"> <span class="embed-responsive-item"> <span class="super-wrp"> <span class="span-table"> <span class="span-table-row"> <span class="span-table-row-cell"> <img src="https://i2.wp.com/i.rutab.net/upload/tech_issues/audio_check.png" class="img-responsive" alt="Выкидывает на рабочий стол Sniper Elite V2 Что делать если лагает sniper elite 3" loading=lazy> </span> </span> </span> </span> </span> </span> <span class="date"> </span> <span class="title"> Выкидывает на рабочий стол Sniper Elite V2 Что делать если лагает sniper elite 3 </span> </a> </div> </div> <div class="post article-wrp with-border col-sm-6 col-md-4"> <div class="article-in-loop"> <a class="thumb-title" href="/kak-naiti-kartinu-po-fotografii-poisk-pohozhei-fotografii-v-internet-poisk/"> <span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb"> <span class="embed-responsive-item"> <span class="super-wrp"> <span class="span-table"> <span class="span-table-row"> <span class="span-table-row-cell"> <img src="https://i2.wp.com/kompukter.ru/wp-content/uploads/2018/03/klikaem-po-znachku-foto-v-gugl.png" class="img-responsive" alt="Поиск похожей фотографии в интернет" loading=lazy> </span> </span> </span> </span> </span> </span> <span class="date"> </span> <span class="title"> Поиск похожей фотографии в интернет </span> </a> </div> </div> </div> </div> </div> <aside id="sidebar" class="col-sm-4 col-sidebar hidden-xs" role="complementary"> <div class="content-menu bs-docs-sidebar"> <div class="progress-right" id="progress-right">0%</div> <script> window.onscroll = function() { var scrolled = window.pageYOffset || document.documentElement.scrollTop; var scrollprogress = Math.round(scrolled / ((document.documentElement.scrollHeight - document.documentElement.clientHeight) / 100)); document.getElementById('progress-right').innerHTML = scrollprogress + '%'; } </script> <div class="ad clearfix text-center"> </div> </div> <script> /** * Скрипт закріплення блоку при прокрутці */ (function() { var a = document.querySelector('#sidebar'), b = null, P = 0; window.addEventListener('scroll', Ascroll, false); document.body.addEventListener('scroll', Ascroll, false); function Ascroll() { if (b == null) { var Sa = getComputedStyle(a, ''), s = ''; for (var i = 0; i < Sa.length; i++) { if (Sa[i].indexOf('overflow') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('outline') == 0 || Sa[i].indexOf('box-shadow') == 0 || Sa[i].indexOf('background') == 0) { s += Sa[i] + ': ' + Sa.getPropertyValue(Sa[i]) + '; ' } } b = document.createElement('div'); b.style.cssText = s + ' box-sizing: border-box; width: ' + a.offsetWidth + 'px;'; a.insertBefore(b, a.firstChild); var l = a.childNodes.length; for (var i = 1; i < l; i++) { b.appendChild(a.childNodes[1]); } a.style.height = b.getBoundingClientRect().height + 'px'; a.style.padding = '0'; a.style.border = '0'; } var Ra = a.getBoundingClientRect(), R = Math.round(Ra.top + b.getBoundingClientRect().height - document.querySelector('#content').getBoundingClientRect().bottom); // селектор блока, при достижении нижнего края которого нужно открепить прилипающий элемент if ((Ra.top - P) <= 0) { if ((Ra.top - P) <= R) { b.className = 'stop'; b.style.top = -R + 'px'; } else { b.className = 'evr-sticky'; b.style.top = P + 'px'; } } else { b.className = ''; b.style.top = ''; } window.addEventListener('resize', function() { a.children[0].style.width = getComputedStyle(a, '').width }, false); } })() </script> <style> /* Додаємо відступ вгорі, щоб було на одному рівні із змістом */ body.single #breadcrumbs { margin-bottom: 5px; } #content article { padding-top: 15px; } #sidebar .evr-sticky { position: fixed; z-index: 101; } #sidebar .stop { position: relative; z-index: 101; } #div-gpt-ad-30906309 { margin-top: 20px; } #sidebar .evr-sticky #div-gpt-ad-30906309, #sidebar .stop #div-gpt-ad-30906309 { margin-top: 20px; } #sidebar .content-menu { transition: 0.5s all; } #sidebar .content-menu .title { padding-top: 15px; font-size: 20px; margin: 0 0 15px 0; } #sidebar .content-menu .title .glyphicon { padding-right: 5px; } #sidebar .content-menu ul { padding: 0; margin: 0; overflow: auto; } #sidebar .content-menu .nav li { margin: 0; clear: both; margin-bottom: 4px; } /* Bullet before text */ #sidebar .content-menu .nav li a:before { content: "●"; position: absolute; font-size: 17px; color: #dedede; left: 0; top: -1px; } #sidebar .content-menu .nav li a { position: relative; display: inline-block; font-size: 15px; color: #000; line-height: 1.2; padding: 3px 0 0 18px; overflow: hidden; text-decoration: none !important; } #sidebar .content-menu .nav li.active:focus>a, #sidebar .content-menu .nav li.active:hover>a, #sidebar .content-menu .nav li.active>a, #sidebar .content-menu .nav li a:hover { text-decoration: none; font-weight: normal; color: #c23085; background-color: transparent; border-left: 0 none; } /* Bullet before text */ #sidebar .content-menu .nav li.active>a:hover:before, #sidebar .content-menu .nav li.active>a:before { -moz-transform: scale(1.3); -webkit-transform: scale(1.3); transform: scale(1.3); left: 1px; color: #c23085; background: transparent; } #sidebar .content-menu .nav li a:hover:before { color: #c23085; background: transparent; } #sidebar a.go-top { display: block; margin-top: 5px; padding: 14px 0 5px 0; text-align: center; text-transform: lowercase; font-size: 17px; color: #666; background: transparent url(/wp-content/themes/sk-Evrikak/i/go-top-in-sidebar.png) no-repeat 50% 50%; opacity: 0; transition: 0.2s all; } #sidebar a.go-top:hover { color: #000; text-decoration: none; } /* Якщо блок зафіксовний */ #sidebar .evr-sticky a.go-top { opacity: 1; } #sidebar .evr-sticky { box-shadow: -9px 0 10px 0 rgba(0, 0, 0, 0.08) !important; } </style> <script> jQuery(document).ready(function() { // (c) http://jsfiddle.net/gableroux/S2SMK/ // підсвітка активного пункту меню, bootstrap jQuery('body').scrollspy({ target: '.bs-docs-sidebar', offset: 70 }); // даємо висоту меню, щоб зробити прокрутку jQuery(window).bind("load resize", function() { var body_w = jQuery("body").width(); // визначаємо ширину вікна var window_h = jQuery(window).height(); // визначаємо висоту вікна //alert(window_h); if (body_w > '767') { // якщо ширина більша 767 window_h = window_h - 375; // коригуємо висоту блоку з меню. віднімаємо висоту блоку «наверх», у перспективі треба буще ще відняти інші-нові блоки var menu_h = jQuery('#sidebar .content-menu').height(); //if(menu_h > window_h) { // якщо висота усього сайдбару більше висоти екрану, то вказуємо висоту для меню. Воно автоматично розтягне висоту сайдбару, з’явиться прорутка у меню, і сайдбар займе усю висоту вікна jQuery('#sidebar .content-menu ul.nav').css('height', window_h); //} } }); // парсимо контент і формуємо меню jQuery('#content .evr-section').each(function() { var evr_section_id = jQuery(this).attr('id'); var evr_section_title = jQuery(this).find(':header:first').text(); var txt = '<li class="content-menu-item added-by-js"><a href="#' + evr_section_id + '">' + evr_section_title + '</a></li>'; //var txt = txt.unwrap(); //txt = jQuery('li', txt).unwrap; //txt = txt.unwrap('h3'); //txt = jQuery(txt).wrap('<li>'); jQuery('#sidebar ul.nav').append(txt); // Insert }); // Додаємо спеціальний клас для посилання на відео jQuery('#sidebar .content-menu').find("a[href='#entry-video']").addClass('link-to-video'); // навігація по статті (плавна прокрутка до потрібного блоку) jQuery('#sidebar .content-menu .nav a').click(function() { jQuery.scrollTo(this.hash, { offset: -10, // Відступ вгорі duration: 750 }); return false; }); // перейти вгору (плавна прокрутка вгору) jQuery('#sidebar a.go-top').click(function() { jQuery.scrollTo(this.hash, { offset: 0, // Відступ вгорі duration: 450 }); return false; }); }); </script> <link type="text/css" href="/wp-content/themes/sk-Evrikak/scroll-Pane/jquery.jscrollpane.css" rel="stylesheet" media="all" /> <script type="text/javascript" src="https://battlecase.ru/wp-content/themes/sk-Evrikak/scroll-Pane/jquery.mousewheel.js"></script> <script type="text/javascript" src="https://battlecase.ru/wp-content/themes/sk-Evrikak/scroll-Pane/jquery.jscrollpane.min.js"></script> <script> // Прокрутка оновлюється при зміні висоти вікна jQuery(function() { jQuery('#sidebar .content-menu ul.nav').each( function() { jQuery(this).jScrollPane({ showArrows: jQuery(this).is('.arrow') }); var api = jQuery(this).data('jsp'); var throttleTimeout; jQuery(window).bind("load resize", function() { // IE fires multiple resize events while you are dragging the browser window which // causes it to crash if you try to update the scrollpane on every one. So we need // to throttle it to fire a maximum of once every 50 milliseconds... if (!throttleTimeout) { throttleTimeout = setTimeout( function() { api.reinitialise(); throttleTimeout = null; }, 50 ); } }); } ) }); </script> <style> /* Styles specific to this particular page */ .scroll-pane { overflow: auto; height: 400px; } .jspTrack { background: #dedede; } .jspVerticalBar { width: 6px; } .jspDrag { background: #309dc6; } </style> </aside> </div> </div> <div class="other-posts"> <div class="container"> <h3 class="title text-uppercase text-center h">Другие статьи:</h3> <div class="row articles"> <div class="post article-wrp with-border col-sm-6 col-md-4 col-lg-3"> <div class="article-in-loop"> <a class="thumb-title" href="/samyi-moshchnyi-telefon-v-mire-na-dannyi-moment-samye-moshchnye-smartfony-top-10/"> <span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb"> <span class="embed-responsive-item"> <span class="super-wrp"> <span class="span-table"> <span class="span-table-row"> <span class="span-table-row-cell"> <img src="https://i1.wp.com/technosova.ru/wp-content/uploads/2018/10/2-2.jpg" class="img-responsive" alt="Самые мощные смартфоны Топ 10 самых мощных телефонов" loading=lazy> </span> </span> </span> </span> </span> </span> <span class="date"> Самые мощные смартфоны Топ 10 самых мощных телефонов </span> <span class="title"> Современные технологии позволяют уместить в обычном смартфоне мощность и производительность... </span> </a> </div> </div> <div class="post article-wrp with-border col-sm-6 col-md-4 col-lg-3"> <div class="article-in-loop"> <a class="thumb-title" href="/kak-udalitsya-iz-moego-mira-kak-udalit-stranicu-i-akkaunt-v-moem-mire/"> <span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb"> <span class="embed-responsive-item"> <span class="super-wrp"> <span class="span-table"> <span class="span-table-row"> <span class="span-table-row-cell"> <img src="https://i1.wp.com/socialnie-seti.info/wp-content/uploads/2012/09/galochki-dlya-ydaleniya-stranici.jpg" class="img-responsive" alt="Как удалить страницу и аккаунт в моем мире" loading=lazy> </span> </span> </span> </span> </span> </span> <span class="date"> Как удалить страницу и аккаунт в моем мире </span> <span class="title"> Бывает так, что человек пройдя регистрацию понимает, что эта социальная сеть не для него и хочет... </span> </a> </div> </div> <div class="post article-wrp with-border col-sm-6 col-md-4 col-lg-3"> <div class="article-in-loop"> <a class="thumb-title" href="/ne-udalyaetsya-avast-chto-delat-kak-udalit-avast-s-kompyutera-esli-on-ne/"> <span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb"> <span class="embed-responsive-item"> <span class="super-wrp"> <span class="span-table"> <span class="span-table-row"> <span class="span-table-row-cell"> <img src="https://i2.wp.com/vellisa.ru/wp-content/uploads/2018/05/2-1.jpg" class="img-responsive" alt="Как удалить аваст с компьютера если он не удаляется" loading=lazy> </span> </span> </span> </span> </span> </span> <span class="date"> Как удалить аваст с компьютера если он не удаляется </span> <span class="title"> Сейчас мы разберем, как удалить Аваст, чтобы после деинсталляции антивируса, на компьютере не... </span> </a> </div> </div> <div class="post article-wrp with-border col-sm-6 col-md-4 col-lg-3"> <div class="article-in-loop"> <a class="thumb-title" href="/kak-podklyuchit-nokia-lyumiya-800-k-kompyuteru-podklyuchenie-nokia-lumia-k/"> <span class="embed-responsive embed-responsive-16by9 vertical-align-block thumb"> <span class="embed-responsive-item"> <span class="super-wrp"> <span class="span-table"> <span class="span-table-row"> <span class="span-table-row-cell"> <img src="https://i2.wp.com/sms-mms-free.ru/sites/default/files/images/Specifications_Nokia_800_Zune.jpg" class="img-responsive" alt="Подключение Nokia Lumia к ПК" loading=lazy> </span> </span> </span> </span> </span> </span> <span class="date"> Подключение Nokia Lumia к ПК </span> <span class="title"> Статьи и Лайфхаки впервые могло разочаровать всех, кто недавно приобрёл данное мобильное... </span> </a> </div> </div> </div> </div> </div> <style> /* Додаємо відступ внизу */ body.single #content .ad { margin-bottom: 20px; } /* Додаємо відступ вгорі */ body.single #sidebar .ad { margin-top: 20px; } </style> <footer id="footer" class="clearfix"> <noindex> <div class="container row-1 hidden-xs"> <nav class="nav"> <div class="menu menu-footer"> <ul id="menu-podval" class="menu"> <li class="menu-item type-custom object-custom home "><a href="/">Главная</a></li> <li class="menu-item type-post_type object-page "><a href="">О проекте</a></li> <li class="menu-item type-post_type object-page "><a href="">Рекламодателям</a></li> <li class="menu-item type-post_type object-page "><a href="/sitemap.xml">Карта сайта</a></li> <li class="menu-item type-post_type object-page "><a href="/feedback/">Обратная связь</a></li> </ul> </div> </nav> </div> <div class="border-blue clearfix"></div> <div class="container row-2"> <div class="row"> <div class="col-sm-6"> <div id="text-2" class="block widget-container widget_text"> <div class="textwidget"> <div class="sn"> <a href="https://www.facebook.com/sharer/sharer.php?u=https://battlecase.ru/sozdanie-blokov-v-html-css-osnovy-css-i-html-blochnaya-verstka-urok-po-blochnoi-verstke/" target="_blank"><img src="https://battlecase.ru/wp-content/themes/sk-Evrikak/i/sn/facebook.png" alt="" class="img-responsive" loading=lazy></a> <a href="https://vk.com/share.php?url=https://battlecase.ru/sozdanie-blokov-v-html-css-osnovy-css-i-html-blochnaya-verstka-urok-po-blochnoi-verstke/" target="_blank"><img src="https://battlecase.ru/wp-content/themes/sk-Evrikak/i/sn/vkontakte.png" alt="" class="img-responsive" loading=lazy></a> <a href="https://youtube.com/" target="_blank"><img src="https://battlecase.ru/wp-content/themes/sk-Evrikak/i/sn/youtube.png" alt="" class="img-responsive" loading=lazy></a> </div> <style> .sn a { display: inline-block; margin: 0 10px 0 0; width: 55px; } @media (max-width:767px) { .sn { text-align: center; } .sn a { margin: 0 7px; width: 43px; } } .sn a:hover { opacity: 0.9; } </style> </div> </div> </div> </div> </div> <div class="border-3 clearfix"></div> <div class="container row-3"> <div class="row"> <div class="col-sm-8 col-txt col-txt-1"> Размещенные на сайте материалы, могут содержать информацию для пользователей старше 18 лет. </div> <div class="col-sm-4 col-txt col-txt-2 text-right"> <div class="project-by-um"> © 2012 - 2018 <img src="https://battlecase.ru/wp-content/themes/sk-Evrikak/i/svg/logo-ukr-media.svg" width="90" class="img-responsive" loading=lazy> </div> </div> </div> </div> </noindex> </footer> </div> <div class="modal fade" id="modal-search" tabindex="-1" role="dialog" aria-labelledby="modal-searchLabel"> <div class="modal-dialog modal-lg itc-container" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="modal-searchLabel">Поиск по сайту</h4> </div> <div class="modal-body"> <form role="search" method="get" class="form-search" id="modal-searchform" action="/"> <div class="form-group"> <input type="search" autocomplete="off" spellcheck="false" placeholder="Введите текст поиска" value="" name="s" id="modal-s" class="input-lg form-control"> </div> </form> <div class="modal-search-results"></div> </div> </div> </div> </div> <link rel='stylesheet' id='dashicons-css' href='/wp-includes/css/dashicons.min.css?ver=4.9.1' type='text/css' media='all' /> <link rel='stylesheet' id='thickbox-css' href='/wp-includes/js/thickbox/thickbox.css?ver=4.9.1' type='text/css' media='all' /> <script type='text/javascript' src='https://battlecase.ru/wp-content/plugins/decomments/templates/decomments/assets/js/decom.min.js?ver=1513648647'></script> <script type='text/javascript' src='https://battlecase.ru/wp-content/themes/sk-Evrikak/js/modernizr-2.8.3.min.js?ver=4.9.1'></script> <script type='text/javascript' src='https://battlecase.ru/wp-content/plugins/visualizer/js/lib/clipboardjs/clipboard.min.js?ver=3.0.4'></script> <script type='text/javascript' src='https://battlecase.ru/wp-content/plugins/mistape/assets/js/mistape-front.js?ver=1.3.3'></script> <script type='text/javascript' src='https://battlecase.ru/wp-content/plugins/lazy-load/js/jquery.sonar.min.js?ver=0.6.1'></script> <script type='text/javascript' src='https://battlecase.ru/wp-content/plugins/lazy-load/js/lazy-load.js?ver=0.6.1'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script> <script type='text/javascript'> /* <![CDATA[ */ var thickboxL10n = { "next": "\u0414\u0430\u043b\u0435\u0435 \u2192", "prev": "\u2190 \u041d\u0430\u0437\u0430\u0434", "image": "\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435", "of": "\u0438\u0437", "close": "\u0417\u0430\u043a\u0440\u044b\u0442\u044c", "noiframes": "\u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u043e\u0432. \u0423 \u0432\u0430\u0441 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0442\u0435\u0433\u0438 iframe, \u043b\u0438\u0431\u043e \u0432\u0430\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438\u0445 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442.", "loadingAnimation": "http:\/\/battlecase.ru\/wp-includes\/js\/thickbox\/loadingAnimation.gif" }; /* ]]> */ </script> <script type='text/javascript' src='/wp-includes/js/thickbox/thickbox.js?ver=3.1-20121105'></script> <div id="mmenu_res" style="display:none;width:100%;height:40px;line-height:40px;background:#FD6A93;color:#FFFFFF;position:fixed;text-align:center;font-size:23px;;z-index:100000000"> <a class="mmenu_open" href="#irevoltmenu"> <span class="mmenu-icon-bar"></span> <span class="mmenu-icon-bar"></span> <span class="mmenu-icon-bar"></span> </a> Рубрики </div> <div class="modal fade" id="modalAd" tabindex="-1" role="dialog" aria-labelledby="modalAdLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body"> <div class="ad text-center"> </div> </div> </div> </div> </div> <link rel="stylesheet" href="/wp-content/themes/sk-Evrikak/ad/ad_popup-and-bottom/show-ads.css"> <script src="/assets/jquery1.cookie1.js"></script> <script src="https://battlecase.ru/wp-content/themes/sk-Evrikak/ad/ad_popup-and-bottom/show-ads.js"></script> </body> </html>