Главная » Инструкции » CSS - Позиционирование блочных элементов. Как сделать блок в html и умело научиться размещать его на своей web-странице

CSS - Позиционирование блочных элементов. Как сделать блок в html и умело научиться размещать его на своей web-странице

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; }

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

Скругленные уголки достаточно часто применяются в дизайне, но свойство 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.

Что такое блоки HTML ?

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

...


параграфы –

Элементы –


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

С помощью CSS блочную структуру HTML можно расширить и вы в этом убедитесь, дочитав статью до конца.

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

Ладно, все это теория, которая тяжело воспринимается без практики. Предлагаю сразу приступить к примерам и разъяснениям.

Блок создается двумя способами.
○ 1-ый способ:

в HTML (class )

здесь содержание блока

Blok1 { /* Здесь стили в CSS */ }

○ 2-ой способ:

в HTML (id )

здесь содержание блока

#blok1 { /* Здесь стили в CSS */ }

На практике я использую первый способ.

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

border:толщина рамки вид рамки цвет рамки ;

Пример :

border:5px dotted #cc0000 ;

Итак, создадим в HTML блок с классом «blok1».

Верь в лучшее, ожидай худшее.

Теперь в CSS зададим стиль блоку с классом «blok1»

Blok1 { border:5px dotted #cc0000; }

Пример :

Блок в css

Результат :

Как видите, блок стал видим для глаза – мы выделили его точечной рамкой.

Чтобы задать расстояние от блока, в CSS используют MARGIN .

Пример :

margin:50px ;

Это значит, что расстояние от блока со всех сторон будет 50px.

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

top – верхняя сторона

right – правая сторона

bottom – нижняя сторона

left – левая сторона

Пример :
margin-top :50px;
margin-right :20px;
margin-bottom :80px;
margin-left :150px;

Упрощенный способ :

margin :50px 20px 80px 150px ;

Схема :

margin

Чтобы задать расстояние внутри блока, в CSS используют PADDING .

Пример :

padding :50px ;

Это значит, что внутри блока со всех сторон будет отступ от границы 50px.

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

top – верхняя сторона

right – правая сторона

bottom – нижняя сторона

left – левая сторона

Пример :

padding-top :50px;
padding-right :20px;
padding-bottom :80px;
padding-left :150px;

Упрощенный способ :

padding :50px 20px 80px 150px ;

Схема :

padding : верхний правый нижний левый ;

Давайте теперь все соберем вместе и посмотрим, что в итоге у нас получится:

Блок в css

Верь в лучшее, ожидай худшее. (Блок№1)
Верь в лучшее, ожидай худшее. (Блок№2)

Результат :

Высота и ширина блоков автоматически (по умолчанию) выставляется по размеру картинки или текста. Но высоту и ширину блока в CSS можно регулировать при помощи свойств height и width .

HEIGHT - высота блока (задается в px или %);

WIDTH - ширина блока (задается в px или %).

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

Blok1 { height: 150px; /* высота блока */ width: 500px; /* ширина блока */ border:2px dotted #cc0000; }

Теперь блок с классом «blok 1» будет с фиксированной шириной в 500 px и высотой 150 px .

Пример :

Блок в css

Верь в лучшее, ожидай худшее.

Результат :

Если вы хотите сделать резиновый блок , так, чтобы он растягивался по длине монитора, тогда вместо px , нужно указать %. Только помните: весь монитор – это 100%.

Blok1 { width: 90%; /* ширина блока */ border:2px dotted #cc0000; }

Теперь блок с классом «blok 1» будет резиновая ширина в 90% от размера монитора.

Пример :

Блок в css

Верь в лучшее, ожидай худшее.

Результат :

Как сделать фон в CSS я писал . Фон блока делается аналогично.

background: #00FF00;

Пример :

Блок в css

Верь в лучшее, ожидай худшее.

Результат :

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

Схема :

1 – сдвиг тени по горизонтали. Минусовое значение – это влево. Плюсовое значение – это вправо.

2- сдвиг тени по вертикали. Минусовое значение – это вверх. Плюсовое значение – это вниз.

3 – распыление тени. Значение «0» - это самая четкая тень. Значение «100» - сильно распыленная тень.

4 – размер тени. Минусовое значение – это тень в меньшую сторону. Плюсовое значение – это тень на увеличение.

5 – цвет тени.

Пример :

Blok1 { box-shadow: -2px 23px 42px -26px #000000; }

Результат :

Если добавить inset , тогда тень станетвнутренней

Пример :

Blok1 { box-shadow: -2px -34px 77px -42px #000000 inset; }

Результат :

Пример :

Блок в css

Верь в лучшее, ожидай худшее.

Вкратце про тень блока я рассказал. Думаю, теме «Тень блоков» нужно будет посвятить целую статью с оригинальными примерами и с готовым кодом.

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

Margin: 0 auto;

Пример :

Блок в css

Верь в лучшее, ожидай худшее.

Результат :

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

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

Шаблон вебсайта мы будем делать с помощью блочной верстки , использую тег - «DIV ».

Шаг 1 - Разметка веб страницы с помощью тегов HTML

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

HTML - это язык разметки гипертекста . С его помощью создается структура веб страницы. Для этих целей используются теги HTML. Они заключаются в скобки "<" и ">".

Теги, как правило следуют в паре - открывающий и закрывающий. Последний отличается тем, что имеет после первой скобки знак "/". (Например:

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

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

Простейшие теги веб страницы это:

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

Важным тегом для структурирования страницы является тег

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

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

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

Код HTML этой страницы будет выглядеть, как показано ниже. Это пример использования тега div :

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

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

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

Шаг 2 - прикрепление таблицы стилей CSS

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

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

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

Таким образом мы связываем эти два файла вместе. Теперь при отображении веб страницы браузер будет использовать соответствующий файл стилей.

Шаг 3 - задаем стиль

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

Для записи селекторов, кроме тега body , используются знаки "# " либо ". ". они следуют перед именем селектора. Первый применяется, чтобы указать на селектор ID , второй, соответственно на селктор CLASS . Селектор может иметь любое количество свойств. Которые заключаются в фигурные скобки "{} ".

#selector {

property:value;

property:value;

property:value;

}

.selector {

property:value;

property:value;

property:value;

}

У нас имеются следующие селекторы:

body
container
header
navigation
menu
content
footer

Свойства и возможные значения CSS:

Фон (background ) может быть задан изображением или цветом, либо и тем и другим одновременно. Чтобы отобразилось изображение, необходимо прописать путь к нему. Если фон задан цветом, то используется шестнадцатеричная система (#ffffff для белого цвета и тд.).

Свойство color используется для определения цвета текста.


font-family
- это свойство определяет семейство шрифтов, которыми будет отображаться текст. Как правило задается сразу три типа шрифтов. Поэтому, если браузер не смог отобразить первый, ему есть из чего выбирать (Trebuchet MS, Arial, Times New Roman).

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

margin - определяет местоположение блока. За точку отсчета при этом может выступать как окно браузера, так и границы других элементов веб страницы. Так как мы хотим разместить свою страницы посредине окна браузера, то запишем такие значения для данного свойства: 0px auto 0px auto. Запись может выглядеть проще 0px auto. Отсчет в случае задания данных значений идет по часовой стрелке: верх - право- низ - лево. Поскольку верх - низ, право - лево у нас совпадают, то дублировать их нет потребности.

width - ширина блока.

height - высота.

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

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

body {
background: #f3f2f3;
color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px;
}

#container {
background: #FFFFFF;
margin: 30px auto;
width: 900px;
height: 1000px;
}

#header {
background: #838283;
height: 200px;
width: 900px;
}

#navigation {
background: #a2a2a2;
width: 900px;
height: 20px;
}

#menu {
background: #333333;
float: left;
width: 200px;
height: 600px;
}

#content {
background: #d2d0d2;
float: right;
width: 700px;
height: 600px;
}

#footer {
background: #838283;
height: 180px;
width: 900px;
}

Примечание

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

Вот его код HTML:

#clear {
clear:both;
}

А между тегами head записать, какую кодировку необходимо использовать браузеру, если вы вдруг попробуете добавить русский текст в свои блоки:

Финальный код HTML:

Основы HTML и CSS

Контент


body {

background: #f3f2f3;

color: #000000;

font-family: Trebuchet MS, Arial, Times New Roman;

font-size: 12px;

}

#container {

background: #FFFFFF;

margin: 30px auto;

width: 900px;

height: 1000px;

}

#header {

background: #838283;

height: 200px;

width: 900px;

}

#navigation {

background: #a2a2a2;

width: 900px;

height: 20px;

}

#menu {

background: #333333;

float: left;

width: 200px;

height: 600px;

}

#content {

background: #d2d0d2;

float: right;

width: 700px;

height: 600px;

}

#clear {

clear:both;

}

#footer {

background: #838283;

height: 180px;

width: 900px;

}

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

Вот как это выглядит в браузере:

Вёрстка страницы представляет собой процесс разработки структуры html-документа, результатом которого является веб-страница. Структура веб-страницы определяется соответствующими html-тегами. Теги — прямоугольные блоки-контейнеры для содержимого — не отображаются в окне браузера. Они сообщают браузеру о типе контента, а браузер на основании этой информации выводит на экран их содержимое — текст или медиа-файлы.

Как создать структуру страницы с помощью блоков (блочная вёрстка)

1. Как разбить макет страницы на секции

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

Стандартная веб-страница содержит следующие секции:


Рис. 1. Основные секции страницы

Мы не будем использовать элемент

, так как он поддерживается не всеми браузерами.

Элементы

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


Рис. 2. Основные секции страницы с тегом-контейнером

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

Container { width: 100%; max-width: 1024px; /*максимальная ширина может иметь другое значение*/ padding: 0 15px; margin: 0 auto; }

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

2. Разметка шапки сайта и позиционирование её элементов

Приступим к разметке первой секции, так называемой шапки веб-страницы. Элемент

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

LOGO

Рис. 3. Шапка сайта с добавленными логотипом и ссылками

Logo { float: left; } nav { float: right; } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; /*один из способов разместить элементы в строку*/ }

Существует несколько способов разместить блочные элементы в строку. Все они приведены в уроке .


Рис. 4. Эффект схлопывания блока-контейнера

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

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

Container:after { content: ""; display: table; clear: both; }

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

Container { width: 100%; max-width: 1024px; padding: 15px; margin: 0 auto; }
Рис. 5. Очистка потока

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


Рис. 6. Логотип-картинка

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

Nav a { text-decoration: none; line-height: 38px; } Рис. 7. Выравнивание ссылок меню шапки

3. Создание сетки для основной части страницы

Основная часть страницы чаще всего представляет собой сетку из блоков разной ширины. Позиционирование таких блоков осуществляется также с помощью свойства float . Каждую строку блоков обернём дополнительным блоком с классом.row:


Рис. 7. Сетка основной части страницы.col-1-2 { width: 50%; float: left; } .col-1-3 { width: 33.3333333333%; float: left; } .col-1-4 { width: 25%; float: left; } .col-2-3 { width: 66.6666666667%; float: left; }

Для элемента с классом.row также применим очистку потока:

Container:after, .row:after { content: ""; display: table; clear: both; }

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

Row { margin-bottom: 15px; }

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


Рис. 8. Разная высота элементов сетки

Высоту блоков можно зафиксировать, указав её явно, например, .row div {height: 100px} . Но в этом случае нужно быть уверенным, что при добавлении адаптивности макету содержимое блоков не будет выходить за край блока.

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

Lorem ipsum dolor sit amet.
Duis lobortis tempor tortor vel iaculis. Fusce volutpat commodo lacus, eget vestibulum lorem semper at.
.row-one { background: lightblue; } .col-2-3 { width: 66.6666666667%; float: left; background: seashell; }
Рис. 9. Фоновая подложка

Если основная секция страницы содержит только два блока, то дополнительный ряд-обёртку можно не добавлять:

4. Разметка подвала страницы

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



Просмотров

Цифровой тюнер AstroMeta Digital TV Dongle
Цифровой тюнер AstroMeta Digital TV Dongle
Тариф «Все свои» - описание, подключение и отключение тарифа «Все свои» от МТС Подключение тарифа «Все свои» МТС
Тариф «Все свои» - описание, подключение и отключение тарифа «Все свои» от МТС Подключение тарифа «Все свои» МТС
Как очистить внутреннюю память телефона от ненужных файлов Как соединить две внутренние памяти телефона
Как очистить внутреннюю память телефона от ненужных файлов Как соединить две внутренние памяти телефона
Как настроить мобильный интернет МТС без проблем
Как настроить мобильный интернет МТС без проблем
Что делать, если телефон HTC не включается Проблема разряженной батареи
Что делать, если телефон HTC не включается Проблема разряженной батареи
Как добавить ярлык на рабочий стол
Как добавить ярлык на рабочий стол