Панель Управления





Курс CSS. Урок 53. CSS3.
Многоколоночный режим просмотра информации. Multiple Columns.
Стиль сайта. Онлайновый курс по теме CSS. Сделано в kocby.ru Курс CSS. Урок 53. CSS3. Многоколоночный режим просмотра информации. Multiple Columns. Стандарт CSS3 позволяет использовать многоколоночный режим просмотра информации, похожий на тот, который используется в газетах и журналах. Например, для разбивки контента на 3 колонки следует использовать свойства: column-count:3; (универсальное), -moz-column-count:3; (для Firefox) и -webkit-column-count:3; (для Chrome и Safari).
© Перепечатка разрешается с установкой ссылки на ресурс http://kocby.ru
Курс CSS. Урок 53. CSS3. Многоколоночный режим просмотра информации. Multiple Columns.
Стандарт CSS3 позволяет использовать многоколоночный режим просмотра информации, похожий на тот, который используется в газетах и журналах.

Затронем теорию вопроса.
Многоколоночный режим просмотра информации. Multiple Columns.
NN Свойство Гугль Хром FireFox IE Safari Opera
53 column-count -webkit- -moz- 10 -webkit- 11.1
45 column-gap -webkit- -moz- 10 -webkit- 11.1
46 column-rule -webkit- -moz- 10 -webkit- 11.1

В таблице ниже представлены описания всех свойств, относящихся к многоколоночному режиму просмотра информации (Multiple Columns).
Многоколоночный режим просмотра информации (Multiple Columns).
NN Свойство Описание
1 column-count Определяет количество колонок, на которое будет разбит текст.
2 column-fill Определяет, как заполнять колонки.
3 column-gap Определяет расстояния между колонками.
4 column-rule Сокращенная запись всех свойств column-rule-*.
5 column-rule-color Определяет цвет правила между колонками.
6 column-rule-style Определяет стиль правила между колонками.
7 column-rule-width Определяет ширину правила между колонками.
8 column-span Определяет, сколько колонок элемента будут проходить.
9 column-width Определяет ширину колонок.
10 columns Сокращенная запись всех свойств column-*.

Теперь попробуем отобразить информацию в газетно журнальном стиле.
Официант моментально выполнил приказание, и Мига принялся листать принесенную им телефонную книгу. Он быстро нашел раздел, где были напечатаны фамилии на букву "к", и сказал: -- Смотрите: Клопс, Большая Собачья улица, дом N 70. Как только стемнеет, мы должны быть у этого Клопса и сделать обыск в его саду. Вы, Козлик, тоже поедете с нами. Для вас найдется работа. Вскоре желтый автомобиль господина Жулио можно было увидеть в Змеином переулке, возле магазина разнокалиберных товаров, а с наступлением темноты он уже мчался по Большой Собачьей улице. Возле дома N 70 автомобиль остановился, и из него вышли четверо полицейских с потайными фонариками и резиновыми электрическими дубинками в руках. Самые догадливые читатели, наверно, уже догадались, что это были не настоящие полицейские, а всего лишь переодетые в полицейскую форму Жулио, Мига и Незнайка с Козликом. Мига сразу же подошел к воротам, посмотрел в щель и, заметив свет в окнах дома, принялся громко стучать дубинкой в калитку. Через некоторое время дверь в доме открылась, из нее вышел Фикс с ружьем в руках и зашлепал в своих шлепанцах по дорожке. -- Кто стучит? -- спросил он, подойдя к калитке. -- Полиция! -- заявил Мига. -- Открывайте немедленно! Услыхав слово "полиция", Фикс растерялся и моментально открыл калитку. Увидев перед собой четырех полицейских в блестящих касках, он перепутался до такой степени, что затрясся всем телом и уронил ружье. -- Вы арестованы! -- сказал Мига и направил ему прямо в глаза луч фонаря. В это же время Жулио подскочил к нему сзади, накинул на шею удавку и ловко скрутил за спиной руки. -- За-за-за что я арестован? -- спросил, заикаясь от страха. Фикс. -- За то, что задаете идиотские вопросы, -- объяснил Мига. -- Но позвольте... -- начал было Фикс. Больше он ничего не успел сказать, так как Жулио тут же заткнул ему рот резиновым кляпом. -- Вы простите. Незнайка, что мы обошлись с этим олухом несколько грубовато, -- сказал Мига, -- но иначе нельзя было, так как он мог выпалить в нас из ружья. Прошу вас покараулить здесь у калитки, а когда нужно будет, мы позовем вас... Ну, а ты марш к дому, и чтоб не было никакого писка! -- приказал Мига Фиксу и толкнул его сзади ногой. Фикс покорно зашагал по тропинке. В это время из дома выскочил другой слуга господина Клопса -- Фекс. Не успел он и слова сказать, как руки у него были скрючены, а во рту торчал резиновый кляп. Сам господин Клопс сидел в это время дома и, ничего не подозревая, попивал какао из большой голубой чашки. Неожиданно дверь отворилась, и он увидел, как в комнату ввалились трое полицейских, а с ними Фикс и Фекс со связанными руками и заткнутыми ртами. От испуга Клопс широко раскрыл рот и опрокинул чашку с горячим какао прямо себе на брюки. -- Ни с места! Вы арестованы! -- заявил Мига. -- В полицию поступили сведения, что вы промышляете скупкой краденого и прячете у себя жуликов. -- Да что вы! -- замахал Клопс руками. -- Запирательство бесполезно, -- сказал Мига. -- Мы должны произвести обыск.

Рассмотрим классы объекта:
.news_053_p01 {
	-moz-column-count:3; /* Firefox */
	-webkit-column-count:3; /* Safari and Chrome */
	column-count:3;
	padding:10px;
	margin:10px;
	border:3px solid #B7F777; 
	border-radius:10px;
	box-shadow: 6px 7px 5px #979797;
}


Предположим, что главный редактор (ГлавРед) захотел, чтобы колонки разделялись более явно и их должно быть две, а не три, как раньше. Примерно вот так:
В приемной между тем появилась представительница одной из рекламных фирм. На ней было узенькое ярко-зеленое платье, на голове такой же ярко-зеленый модный берет, из-под которого выбивались в разные стороны космы. Видно было, что, пока она продиралась сквозь толпу на улице, прическа ее претерпела значительные изменения. Лицо у нее было строгое и решительное, с прямым, остроконечным, несколько красноватым носом и крошечными серыми глазками, в которых светилось упрямство. В руках она держала несколько фанерных плакатов, укрепленных на палках, на груди висел небольшой фотографический аппарат в кожаном футляре. Подбежав к Незнайке, она сунула ему в руки плакат, на котором было написано: Жалеть не будут коротышки И не потратят деньги зря, Коль будут все жевать коврижки Конфетной фабрики "Заря". Отскочив шага на два-три назад, она навела на Незнайку фотографический аппарат и сделала снимок. Увидев это, Мига окончательно вышел из себя. Он подскочил к Незнайке, вырвал у него из рук плакат и со злостью швырнул его на пол, после чего подскочил к представительнице рекламной фирмы и дал ей пинка ногой. Представительница, однако, не пожелала остаться в долгу и в свою очередь дала ему пинка, ударила по голове плакатом, плюнув, в довершение всего, на рукав пиджака. Полнив такой отпор, Мига затрясся от негодования. -- Вон отсюда! -- закричал он, приходя в бешенство. -- Уберите ее, или я за себя не отвечаю! Вон все отсюда! Прекратите телевизионную передачу сейчас же! Вы должны заключить с нами контракт и уплатить деньги. Мы не обязаны показывать вам космонавта бесплатно!

Классы для достижения этого эффекта:
.news_053_p02 {
	-moz-column-count:2; /* Firefox */
	-webkit-column-count:2; /* Safari and Chrome */
	column-count:2;

	-moz-column-gap:60px; /* Firefox */
	-webkit-column-gap:60px; /* Safari and Chrome */
	column-gap:60px;

	-moz-column-rule:5px ridge #00FF00; /* Firefox */
	-webkit-column-rule:5px ridge #00FF00; /* Safari and Chrome */
	column-rule:5px ridge #00FF00;
	
	padding:10px;
	margin:10px;
	border:3px solid #B7F777; 
	border-radius:10px;
	box-shadow: 6px 7px 5px #979797;
}


Теперь отобразим новые полученные знания на нашем учебном тестовом примере.
css_053_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_053_001.zip ← скачайте пример, чтобы установить на свой сайт...

***** Машина-Функционал для передвижения по страничкам курса CSS *****
:: ::  / 


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

Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.


Если вы планируете вернуться сюда позднее...
Пожалуйста, запомните эту страничку -
URL: http://kocby.ru/css/p053.html
Спасибо за посещение этой странички и внимательное отношение к ее контенту и дизайну. Удачи и успеха!
© KOCBY.RU :: перепечатка материалов разрешается с указанием ссылки на домен KOCBY.RU ©
Basket is empty :: Корзина пустая
Close and hide in basket :: Закрыть и спрятать в корзину
***** Реклама *****
Посмотри в зеркало! Что там видно?
Красивая девушка брюнетка слева Красивая девушка блондинка справа
Красивая девушка блондинка слева Красивая девушка брюнетка справа
Наверх ↑