Сайт о телевидении » Тарифы » Масштабируемость и виды веб-дизайна. Плиточный дизайн Пример блочной вёрстки
Масштабируемость и виды веб-дизайна. Плиточный дизайн Пример блочной вёрстки
Сайты тоже имеют свой скелет. Но о его особенностях спрашивать врачей бесполезно. Да и ветеринары тоже не в курсе строения сайта. Об этом ведомо лишь верстальщикам. Именно от них зависит строение скелета будущего ресурса. А главным способом создания костей его скелета является блочная верстка.
Верстка сайта – ремесло для посвященных
Есть в верстке сайта что-то таинственное. Но это до тех пор, пока не познакомишься с этим ремеслом поближе. Начинаем наше посвящение:
Следующим этапом разработки сайта после создания его макета является верстка. Задача верстальщика перенести с помощью html
кода и таблиц css
скелет будущего сайта в виртуальный мир. Проще говоря, перенести размеры и пропорции ресурса в форму, понятную для браузера.
В процессе верстки кодом html происходит разбивка «скелета
» сайта на части. А с помощью css
(каскадных таблиц стилей
) задаются размеры его «костей
», цвет и расположение.
Различают несколько видов верстки:
I. Табличная
– ранее была основным способом верстки. В табличной верстке для задания структуры сайта используется тег
и его дочерние теги. Верстка с помощью таблиц позволяет наиболее пропорционально расположить все элементы дизайна относительно друг друга. Но в тоже время такой код получается слишком объемным:
Также к основным недостаткам табличного кода относится его долгая загрузка и плохая индексация содержимого поисковыми системами.
Содержимое страницы, сверстанной на основе таблиц, не будет отображено до тех пор, пока не загрузятся все данные. Блочная верстка позволяет отображать каждый загруженный элемент отдельно.
Плохая индексация табличных страниц объясняется большими промежутками между блоками текста, расположенного в разных ячейках таблицы.
Теперь табличная верста редко используется в качестве основного метода создания сайтов. Сейчас ее применяют лишь для структурирования табличных данных и расположения графических изображений.
II. Блочная
– в данный момент является основным способом верстки. В отличие от табличной блочная верстка обладает рядом преимуществ:
Отделение стиля элементов от кода html
;
Возможность наложения одного слоя на другой – такая возможность во многом облегчает позиционирование элементов.
Лучшая индексация поисковиками;
Высокая скорость загрузки страницы, состоящей от взаимно независимых элементов;
Легкость создания визуальных эффектов (выпадающих меню, списков, всплывающих подсказок
).
Основным недостатком блочной верстки является некая «двусмысленность
» понимания ее кода различными браузерами. Поэтому часто html
страницы приходится «доводить
» путем использования специальных хаков.
С появлением блочной верстки родилось такое понятие, как «кроссбраузерность». Из-за различия отображения одного и того же элемента в разных браузерах верстальщикам приходится вставлять в основной html целые куски кода (хаки).
Действие хака является узкоспециализированным и решает проблему некорректного отображения лишь в одном браузере.
Основным элементом, применяемым в блочной верстке, является тег
. Участок кода, отделенный этим тегом, называется слоем. Все стилевые решения вынесены за границы кода html
в каскадные таблицы стилей. Доступ к ним осуществляется через идентификаторы или классы css
:
Как происходит блочная верстка?
Перед началом верстки готовый psd
макет сайта в графическом редакторе разрезают на блоки (слои
). В отдельную папку помещают вырезанные фоновые картинки, которые будут прикрепляться отдельно к каждому слою:
Для примера возьмем вот такой макет сайта, созданный в Photoshop
. Сначала в текстовом редакторе с помощью div
задаем структуру будущего ресурса и присваиваем каждому слою свой селектор id
. Получается такая структура:
Затем к готовой структуре сайта на html
строкой прикрепляем файл css
. После чего добавляем в него стилевое описание каждого слоя, позиционирование относительно других элементов и его размеры.
Более подробно ознакомиться со всеми свойствами css можно из технической документации к языку.
Вот так наш пример блочной верстки сайта выглядит в окне браузера:
Конечно, этот пример является лишь наглядным пособием для демонстрации того, как происходит блочная верстка. Настоящая верстка происходит с использование фоновых изображений и логотипов, подключаемых в css
. А также с включением в html
и css
кода хаков для оптимизации отображения во всех браузерах.
Исследуя просторы сети, многие наверняка замечают, что большинство сайтов построены на основе сетки. Элементы или блоки в таких сайтах расположены на странице не хаотично, как это было несколько лет назад, а в определенной последовательности и структурированы (порой это бывает незаметно при первом взгляде). Такие сайты хорошо сбалансированы и, как правило, выглядят чисто и опрятно. Большая заслуга этой опрятности принадлежит сетке
, лежащей в основе дизайна и предоставляющей пользователю понятную, неискаженную структуру сайта.
Несмотря на то, что сетки, как правило, представляют простые пересечения горизонтальных и вертикальных линий с заданным интервалом, многие дизайнеры используют их в качестве украшения и подчеркивания очевидных геометрических фигур и визуальных путей. Мы можем увидеть эти пути и фигуры в сайтах-портфолио, галереях, блогах и других творческих проектах. Это и не удивительно, так как сетка обладает рядом полезных свойств и преимуществ, например, таких как:
Создание визуальных путей для того, чтобы направлять пользователей
Комбинирование различных компонентов в единое целое
Сортировка информации
Ну и, конечно же, сетка как нельзя лучше подходит для демонстрации красоты прямых линий (за далеко ходить не придется). Ниже мы подготовили сайты, в которых сетка является больше, чем просто основой дизайна.
Заключение
Как уже было сказано, сетка является неотъемлемой частью дизайна и легко превращает хаос в порядок, а в дизайне сайта, как нигде более, эта возможность действительно важна. Большинство пользователей хотят получить информацию быстро и просто, и нет лучшего способа, чем представить им понятную и хорошо организованную структуру.
Нет, это вовсе не означает, что внешний вид сайта должен быть линейным и простым. Порой, даже простые геометрические фигуры, умело «разбавленные» цветами, изображениями и графикой (вспомните ), могут быть по-настоящему привлекательными. Как считаете? Разве такое явное разделение на блоки не выглядит привлекательным?
Исследуя просторы сети, многие наверняка замечают, что большинство сайтов построены на основе сетки. Элементы или блоки в таких сайтах расположены на странице не хаотично, как это было несколько лет назад, а в определенной последовательности и структурированы (порой это бывает незаметно при первом взгляде). Такие сайты хорошо сбалансированы и, как правило, выглядят чисто и опрятно. Большая заслуга этой опрятности принадлежит сетке
, лежащей в основе дизайна и предоставляющей пользователю понятную, неискаженную структуру сайта.
Несмотря на то, что сетки, как правило, представляют простые пересечения горизонтальных и вертикальных линий с заданным интервалом, многие дизайнеры используют их в качестве украшения и подчеркивания очевидных геометрических фигур и визуальных путей. Мы можем увидеть эти пути и фигуры в сайтах-портфолио, галереях, блогах и других творческих проектах. Это и не удивительно, так как сетка обладает рядом полезных свойств и преимуществ, например, таких как:
Создание визуальных путей для того, чтобы направлять пользователей
Комбинирование различных компонентов в единое целое
Сортировка информации
Ну и, конечно же, сетка как нельзя лучше подходит для демонстрации красоты прямых линий. Ниже мы подготовили сайты, в которых сетка является больше, чем просто основой дизайна.
Заключение
Как уже было сказано, сетка является неотъемлемой частью дизайна и легко превращает хаос в порядок, а в дизайне сайта, как нигде более, эта возможность действительно важна. Большинство пользователей хотят получить информацию быстро и просто, и нет лучшего способа, чем представить им понятную и хорошо организованную структуру.
Нет, это вовсе не означает, что внешний вид сайта должен быть линейным и простым. Порой, даже простые геометрические фигуры, умело "разбавленные" цветами, изображениями и графикой (вспомните плоский дизайн), могут быть по-настоящему привлекательными. Как считаете? Разве такое явное разделение на блоки не выглядит привлекательным?
В веб-дизайне новые тенденции появляются постоянно. Какие-то из них впоследствии начинают доминировать, другие со временем выходят из моды. Всего несколько лет назад сайты с бесконечным скроллингом считались экзотикой, а сегодня это один из главных трендов. Широкое распространение мобильных устройств также сделало популярным так называемый плиточный или блочный дизайн и, по всей видимости, мы имеем дело с долгосрочным трендом.
Самым популярным сайтом с плиточным дизайном является Pinterest, однако можно заметить, что сайтов, построенных на основе блоков, с каждым днем становится все больше. Дизайнеры используют плитки-карточки в первую очередь потому, что такой подход позволяет создать удобный интерфейс, очень дружественный по отношению к пользователю. Когда посетитель попадает на подобный сайт, он сразу же понимает, как все устроено – карточки дают всю необходимую первичную информацию.
CARD-BASED DESIGN
Если посмотреть на любой сайт, созданный на основе плиток, то в первую очередь станет заметна сетка, являющаяся основой дизайна. Плитки имеют одинаковый размер, в результате чего становятся легко различимыми столбцы и строки – а это признак хорошо организованной системы. Плиточный дизайн никак нельзя назвать аморфным – он предельно строг и лаконичен.
С помощью блоков гораздо легче создать информационную архитектуру сайта. Информационная архитектура – это упорядоченный интеллектуальный поток, попадая в который, посетители гораздо легче усваивают информацию и быстрее перемещаются между страницами, открывая те из них, которые кажутся пользователям наиболее интересными.
Чем хорош card-based design так это тем, что он в полной мере позволяет использовать визуальную иерархию. Так как каждая карточка является частью столбца или строки, дизайнеры могут управлять движением глаз посетителя, размещая информацию по степени ее важности. То есть, яркая плитка, расположенная слева в первом верхнем ряду, гарантированно будет восприниматься пользователем, как наиболее интересная.
Если посмотреть на дизайн сайта, представленного выше, то становится более понятно, как все это работает. Даже одного взгляда достаточно, чтобы разобраться в информационной иерархии. Самые новые статьи и прочий контент расположены в верхней строке, а страницы с ранее опубликованными материалами находятся ниже. Пользователь понимает, что новизна является критерием важности в дизайне и в дальнейшем, заходя на сайт, в первую очередь будет просматривать веб страницы из первого ряда.
ЗНАЧЕНИЕ ИЗОБРАЖЕНИЙ
О том, что человек усваивает визуальную информацию гораздо лучше, говорилось столько раз, что это набило оскомину. Да, большинство людей является визуалами и эту их особенность стоит обязательно учитывать при создании сайта. Сайт с плиточным дизайном использует изображения с максимальной эффективностью: практически любой текст, сопровождающий картинку-плитку, является вторичным по отношению к изображению.
В наше время, когда доступ к широкополосному интернету открыт для большого числа пользователей, значение изображений, используемых на сайте, резко возрастает. Дизайнеры все чаще стали использовать качественные фотографии в высоком разрешении, так как они делают сайт более привлекательным и при этом почти не влияют на скорость открытия веб-страницы. Проведенные исследования подтверждают, что качественные изображения, в частности фото, на которых изображены улыбающиеся люди, способны влиять на коэффициент конверсии.
Следовательно, делая акцент на использовании изображений, дизайнер может создать сайт, который с большой вероятностью будет отвечать потребностям посетителей. Что и доказывает пример Pinterest, который в рейтинге Alexa находится на пятнадцатом по популярности месте в США.
ОПЫТ ВЗАИМОДЕЙСТВИЯ
Любой дизайнер знает, что пользовательский опыт – это самое главное. Это основа, поэтому об UX нужно помнить на всех этапах проектирования. Причина, по которой сайты с плиточным дизайном появляются все чаще, состоит в том, что такая подача контента способствует улучшению пользовательского опыта. Посетителям интересно, они не испытывают трудностей при взаимодействии с сайтом, поэтому они будут и дальше посещать веб-ресурс, так как они получили положительный опыт.
В качестве примера можно привести сайт Dribbble – его создатели использовали карточки для того, чтобы улучшить опыт взаимодействия. В случае с Dribbble это было самое логичное решение, так как в этом сообществе пользователи делятся друг с другом плодами своего творчества.
Для людей, которые хотят посмотреть фотографии, иллюстрации и другие изображения, плиточный дизайн является идеальным способом подачи контента. Так как визуальная информация воспринимается мозгом очень быстро, то опыт пользовательского взаимодействия оказывается положительным – посетители сайта могут быстро просмотреть плитки и понять, что им наиболее интересно. Как только они найдут то, что представляет интерес, они могут кликнуть по картинке и более подробно изучить представленную на веб-странице информацию.
БУДУЩЕЕ ПЛИТОЧНОГО ДИЗАЙНА
В последнее время много говорится о том, что пользователей мобильных устройств становится все больше. Во многих развитых странах мобильные гаджеты уверенно теснят настольные компьютеры. Плиточный дизайн прекрасно вписывается в этот тренд – ведь подобные сайты очень легко адаптируются для показа на планшетах или смартфонах. Карточки позволяют расположить контент таким образом, что он будет прекрасно восприниматься на устройствах с любым размером дисплея. Разумеется, card-based design можно использовать далеко не везде, во многих случаях плитки не смогут помочь в решении поставленной перед дизайнером задачи. Тем не менее, тренд на блочный дизайн является долгосрочным, так как он является следствием увеличивающегося количества пользователей мобильных устройств.
Цель урока:
Знакомство с блочной версткой CSS. Получение навыков использования блочной верстки сайта
При работе со слоями или, иначе говоря, блоками и элементами div , основная нагрузка ложится на CSS, т.к. без свойств слои из себя практически ничего не представляют.
К сожалению до сих пор существует проблема с кроссбраузерностью при работе с блоками. Т.е. одни и те же свойства дают разный результат в разных браузерах. Для борьбы с такими проблемами существуют так называемые хаки. Хак
- это набор приемов, когда отдельным браузерам подается код, который понимается только этим браузером, а остальными игнорируется.
Отличительные черты от табличной верстки
Допустим, необходимо создать шаблон страницы с «шапкой», «подвалом» и двумя колонками. Отличия:
Фиксированный дизайн или жесткая блочная верстка (две колонки)
Фиксированный макет подразумевает использование слоев заданной ширины, которая определяется разрешением монитора пользователя.
Так как наиболее популярным среди пользователей сети является разрешение монитора 1024×768, то желательно ориентироваться именно на него. Общая ширина блоков в таком случае составляет 900–1000 пикселей (небольшая часть пикселей требуется на полосы прокрутки и границы окна браузера).
Основной блок с контентом размещается по центру
, тогда «свободные» поля по краям неплохо смотрятся даже при большом разрешении монитора.
Рис.1. Пример фиксированного дизайна
Общая ширина может выбираться дизайнером, что называется «на глаз», или после сбора каких-либо дополнительных сведений.
Пример:
создать фиксированный дизайн сайта на основе представленного выше изображения
Выполнение:
«Разбиваем» все основные элементы страницы на блоки следующим образом:
блок 1
— слой первый (id="shapka"),
блок 2 и 3
заключаются в единый блок (id="container"),
блок 2
— слой с меню (id="menu"),
блок 3
— слой с контентом (id="content"),
блок 4
— слой с id="bottom" .
Схематично изобразим расположение блоков:
<body
>
<div
id
=
"shapka"
>
1</
div
>
<div
id
=
"container"
>
<div
id
=
"menu"
>
2</
div
>
<div
id
=
"content"
>
3</
div
>
</
div
>
<div
id
=
"bottom"
>
4</
div
>
</
body
>
1
2
3
4
1. Задаем свойства «шапки» (блок 1)
Выбираем общую ширину слоев «на глаз» — 750 пикселей.
margin-right: auto;
margin-left: auto;
либо задать высоту при помощи отступа
например:
padding-top
:
15px
;
padding-bottom
:
15px
;
padding-top: 15px;
padding-bottom: 15px;
Весь код для шапки:
#shapka{
text-align: left; /* Выравнивание внутреннего контента по левому краю */
width: 750px; /* Ширина блока и общая ширина*/
background: #900000; /* Цвет фона */
height: 50px; /* Высота блока */
margin-right: auto; /* Авто-отступ справа */
margin-left: auto; /* Авто-отступ слева */
padding: 10px; }
2. Создаем свойства контейнера
Задаем ширину контейнера: она должна быть 750px + 20px (общая ширина макета + внутренние отступы в общей ширине макета). Т.е. в контейнере нет внутренних отступов, поэтому увеличим его ширину на 10 пикселей слева и 10 пикселей справа
Если макет должен прилегать к левой части экрана, то браузер выполнит это автоматически. В нашем случае отцентрируем блок контейнера
#container {
width: 770px; /* Ширина слоя или (ширина макета+20) */
margin-right: auto; /* Авто-отступ справа */
margin-left: auto; /* Авто-отступ слева */
}
3. Создаем свойства для блока 2 — меню
Слой номер 2 шириной в 200 пикселей (width)
Для этого же слоя (меню) устанавливаем обтекание соседним блоком, т.е. свойство float: left
Задаем внутренние поля, чтобы текст не «приклеился» к краю слоя (свойство padding)
Задаем цвет текста и заднего фона (background , color)
#menu {
width: 200px; /* Ширина слоя */
float: left; color: white; /* Цвет текста */
background: #008080; /* Цвет фона */
padding: 10px; /* Внутренние поля вокруг содержимого */
}
4. Создаем свойства для блока 3 — контент
Задаем ширину слоя из расчета 770px — 200px = 570px, Но!
так как мы установили внутренние отступы в обоих блоках 2 и 3, то мы должны вычесть еще 40 пикселей: 20 — внутренние отступы блока с меню и 20 — внутренние отступы блока с контентом. Получим ширину слоя 770px — 200px — 40px = 530px
Задаем обтекание float: left , исключая баг браузера Internet Explorer: если не установить свойство, то между слоями будет зазор. Кроме того, если не установить это свойство, то блок окажется за блоком меню, и только лишь его контент (текст) будет обтекать блок меню справа.
Задаем цвет заднего фона (background) и внутренние поля (padding)
#content { /* Правая колонка*/
width: 550px; /* Ширина слоя */
float: left; /* Обтекание с соседним слоем */
padding: 10px; /* Внутренние поля вокруг содержимого */
background: #e0e0e0; /* Цвет заднего фона */
}
5. Создаем свойства для блока 4 — «подвал»
Ширину слоя устанавливаем в 750 пикселей
Для этого блока надо убрать обтекание, т.е. установить свойство clear
Устанавливаем внутренние поля padding
Задаем цвет для фона (background) и текста (color)
Центрируем блок (margin-right и margin-left)
#bottom{
width:750px; /* Ширина слоя */
clear:left; /* возвращаем блочность и располагаем слой слева */
padding: 10px; /* Внутренние поля вокруг содержимого */
background:#444; /* фон */
color:#fff; /* цвет текста */
margin-right: auto; /* Авто-отступ справа */
margin-left: auto; /* Авто-отступ слева */
}
Итоговый код: всё вместе
<style
type
=
"text/css"
>
1
2
3
4
Результат:
Рис.2. Жесткая блочная верстка из двух колонок
Фиксированный дизайн для трех колонок
При фиксированном дизайне для макета из трех колонок можно выделить два основных подхода построения модульной сетки:
Использование свойства для расположения колонок рядом.
Использование набора тех CSS свойств, которые предназначены для позиционирования слоев.
Рассмотрим первый случай.
Использование свойства float для макета в три колонки
На рис. 3
— результат использования свойства для трехколонного макета. На самом деле используется 6 слоев — отдельно для заголовков колонок и отдельно для самих колонок.
Рис. 3. Фиксированный дизайн в три колонки
Пример:
создать веб-страницу с макетом из трех колонок, изображенную на рис. 3
. Использовать приемы фиксированного блочного макетирования
Выполнение:
Определим для заголовков три слоя (#header...) и для колонок три слоя (#col...).
Так как колонки и их заголовки расположены на двух разных строках, то объеденим их в контейнеры (class="container").
Получим схематичное изображение расположения блоков:
<body
>
<div
class
=
"container"
>
<div
id
=
"header1"
>
Евгений Евтушенко</
div
>
<div
id
=
"header2"
>
Валерий Брюсов</
div
>
<div
id
=
"header3"
>
Эдуард Асадов</
div
>
</
div
>
<div
class
=
"container"
>
<div
id
=
"col1"
>
Мне снится старый друг,<br
/
>
который стал врагом,<br
/
>
но снится не врагом,<br
/
>
а тем же самым другом.<br
/
>
Со мною нет его,<br
/
>
но он теперь кругом,<br
/
>
и голова идет<br
/
>
от сновидений кругом.
</
div
>
<div
id
=
"col2"
>
Великое вблизи неуловимо,<br
/
>
Лишь издали торжественно оно,<br
/
>
<br
/
>
</
div
>
<div
id
=
"col3"
>
<br
/
>
<br
/
>
<br
/
>
</
div
>
</
div
>
</
body
>
Евгений Евтушенко
Валерий Брюсов
Эдуард Асадов
Мне снится старый друг, который стал врагом,
но снится не врагом, а тем же самым другом.
Со мною нет его, но он теперь кругом,
и голова идет от сновидений кругом.
Великое вблизи неуловимо, Лишь издали торжественно оно,
Мы все проходим пред великим мимо И видим лишь случайное звено.
В любых делах при максимуме сложностей Подход к проблеме все-таки один:
Желанье - это множество возможностей, А нежеланье - множество причин.
2. Добавление стилей для заголовков (селектор header...) и колонок (селектор col...)
Ширину колонок и заголовков сделаем у всех одинаковой. Поскольку колонок 3, а средняя ширина страницы должна быть примерно 700-900 пикселей, то установим ширину колонок в 250 пикселей.
Добавим внутренние поля (отступы от содержимого текста) — padding и внешние отступы, чтобы обеспечить зазор между колонками. Поскольку свойства задаются сразу для все колонок одновременно, а сам весь макет не центрируется, а выравнивается по левому краю, то установим отступ только с одной стороны — левой — у всех колонок одновременно (margin-left).
#header1, #header2, #header3, #col1, #col2, #col3 {
width: 250px; /* Ширина колонок */
padding: 5px; /* Поля вокруг текста */
margin-left: 5px; /* Отступ слева */
}
Добавим также внешний отступ сверху, обеспечив зазор по вертикали между заголовками и колонками, а также отступ заголовков от верха страницы (margin-top).
Теперь осталось доработать шрифт текста в колонках, изменив его размер, начертание и цвет.
#col1, #col2, #col3 {
font-family: "Times New Roman", Times, serif; /* Шрифт серифный или с засечками */
font-size: 100%; /* Размер шрифта */
font-weight: normal; /* Нормальное начертание */
color: black; /* Цвет текста */
}
Итоговый код: всё вместе
<style
type
=
"text/css"
>
Евгений Евтушенко
Валерий Брюсов
Эдуард Асадов
Мне снится старый друг,
который стал врагом,
но снится не врагом,
а тем же самым другом.
Со мною нет его,
но он теперь кругом,
и голова идет
от сновидений кругом.
Великое вблизи неуловимо,
Лишь издали торжественно оно,
Мы все проходим пред великим мимо
И видим лишь случайное звено.
В любых делах при максимуме сложностей
Подход к проблеме все-таки один:
Желанье - это множество возможностей,
А нежеланье - множество причин.
Результат:
Рис. 5. Результат
Использование позиционирования слоев для макета в три колонки
Возьмем в качестве примера макет, состоящий из трех колонок разграниченных разделительной линией (рис. 6).
Рис. 6. Позиционирование слоев для макета в три колонки с разделителем
Пример:
создать веб-страницу с макетом из трех колонок с разделительной линией, изображенную на рис. 6
. Использовать приемы фиксированного макетирования с позиционированием слоев
Выполнение:
1. Создание структуры html-кода
Для данного макета достаточно создать три слоя div для каждой колонки.
Для удаления блочности слоев, т.е. для того, чтобы расположить их рядом по горизонтали, необходимо задать свойство css float .
#col1
,
#col2
,
#col3
{
width
:
250px
;
/* Ширина колонок */
padding
:
0
6px
;
/* Поля по вертикали и горизонтали */
float
:
left
;
/* Обтекание слоев */
}
#col1, #col2, #col3 {
width: 250px; /* Ширина колонок */
padding: 0 6px; /* Поля по вертикали и горизонтали */
float: left; /* Обтекание слоев */
}
Так как разделительная граница должна присутствовать только с внутренних сторон слоев, то рамку необходимо добавить только у двух слоев с одной стороны (border).
#col1
,
#col2
{
border-right
:
1px
solid
#000
;
/* Поля по вертикали и горизонтали */
float
:
left
;
/* Обтекание слоев */
}
#col1
,
#col2
{
border-right
:
1px
solid
#000
;
/* Параметры линии справа от текста */
}
#col1, #col2, #col3 {
width: 250px; /* Ширина колонок */
padding: 0 6px; /* Поля по вертикали и горизонтали */
float: left; /* Обтекание слоев */
}
#col1, #col2 {
border-right: 1px solid #000; /* Параметры линии справа от текста */
}
</
style
>
</
head
>
<body
>
<div
id
=
"col1"
>
Иван Бунин</
br
></
br
>
На окне, серебряном от инея,</
br
>
За ночь хризантемы расцвели.</
br
>
В верхних стёклах - небо ярко-синее</
br
>
И застреха в снеговой пыли.
</
div
>
<div
id
=
"col2"
>
Всходит солнце, бодрое от холода, </
br
>
Золотится отблеском окно. </
br
>
Утро тихо, радостно и молодо. </
br
>
Белым снегом всё запушено.
</
div
>
<div
id
=
"col3"
>
И всё утро яркие и чистые</
br
>
Буду видеть краски в вышине, </
br
>
И до полдня будут серебристые </
br
>
Хризантемы на моём окне.</
br
></
br
>
1903
</
div
>
</
body
>
Иван Бунин
На окне, серебряном от инея,
За ночь хризантемы расцвели.
В верхних стёклах - небо ярко-синее
И застреха в снеговой пыли.
Всходит солнце, бодрое от холода,
Золотится отблеском окно.
Утро тихо, радостно и молодо.
Белым снегом всё запушено.
И всё утро яркие и чистые
Буду видеть краски в вышине,
И до полдня будут серебристые
Хризантемы на моём окне.
1903
