как сделать блок в html

ВАЖНО! Для того, что бы сохранить статью в закладки, нажмите: CTRL + D

Задать вопрос ВРАЧУ, и получить БЕСПЛАТНЫЙ ОТВЕТ, Вы можете заполнив на НАШЕМ САЙТЕ специальную форму, по этой ссылке >>>

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

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

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

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

Источник: http://www.site-do.ru/css/css10.php

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

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

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

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

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

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

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

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

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

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

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

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

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

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

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

Источник: http://htmlbook.ru/faq/kak-sdelat-blok-so-skruglennymi-ugolkami-bez-risunkov

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

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

  • Содержание:
  • 1. Как разбить макет страницы на секции
  • 2. Разметка шапки сайта и позиционирование её элементов
  • 3. Создание сетки для основной части страницы
  • 4. Разметка подвала страницы
ЧИТАЙТЕ ТАКЖЕ:  видео как сделать суши в домашних условиях

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

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

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

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

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

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

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

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

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

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

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

Разместим логотип слева, а ссылки навигации — с выравниванием по правому краю шапки (для наглядности я добавила элементам белую границу):

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

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

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

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

Рис. 5. Очистка потока

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

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

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

Рис. 7. Выравнивание ссылок меню шапки

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

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

Рис. 7. Сетка основной части страницы

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

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

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

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

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

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

ЧИТАЙТЕ ТАКЖЕ:  как сделать из пластилина полицейскую машину

Рис. 9. Фоновая подложка

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

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

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

Источник: http://html5book.ru/vyorstka-stranicy-sayta/

Раньше на просторах Интернета был широко распространён табличный тип вёрстки, которому посвящена отдельная статья. Однако со временем этот подход к созданию структуры сайта устарел, и на смену ему пришла блочная вёрстка.

Отличия блочной вёрстки от табличной

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

Блочная вёрстка лишена недостатков табличной — поисковыми системами она индексируется лучше, её код не такой развесистый, да и блоки

Единственный ощутимый минус блочной вёрстки — сделанные на ней сайты могут по-разному отображаться в обозревателях. Чтобы этого избежать, нужно делать вёрстку «кроссбраузерной», то есть одинаково отображаемой любым обозревателем.

Суть блочной вёрстки

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

Каждая часть страницы помещается в свой блок

Конечный HTML-документ представляет собой набор блоков

Принципы блочной вёрстки

Первый — конечно же, повсеместное использование тега

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

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

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

Но, сколько не теоретизируй, а понимать всё проще на примере.

Итак, у нас есть макет (рисунок ниже). Условный, конечно — просто разметка, ведь цель примера — как можно наглядней объяснить принцип создания блочной вёрстки. Зная базу, навести красоту и усложнить макет вы сможете и сами, а я лучше не буду перегружать пример.

Согласно макету, страница сайта будет содержать пять блоков: «шапку», навигационное меню, боковую панель, основной блок с контентом и «ноги».

Сначала создадим HTML-страницу: обозначим структуру, разметим её. HTML-код будет таким:

Разберём некоторые моменты.

Если открыть HTML-файл в браузере, не подключая таблицу стилей, страница будет выглядеть так.

Теперь добавим файл CSS, код которого приведён ниже.

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

#clear запрещает обтекание элемента слева и справа. Если убрать это правило, вёрстка «поедет» и низ сайта перестанет корректно отображаться.

CSS творит чудеса, и с ним наша HTML-страница примет уже совсем другой вид.

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

Источник: http://www.seostop.ru/sozdanie-saita/html-css/blochnaya-verstka.html

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

Что-то типа такого:

ЧИТАЙТЕ ТАКЖЕ:  айфон 8 из чего сделан корпус

Рис. 1 Четыре блока с закруглёнными углами и тенью.

В общем-то, вариантов разбивки очень много. Думаю, что разобрав эти 4, Вы уже сами дальше сможете комбинировать блоки.

Что здесь можно подкорректировать?

Во первых — это конечно width и height (ширина и высота) блоков.

Во вторых, можно изменить цвет блоков background , изменить радиус углов border-radius , и можно придать блокам тень box-shadow .

Подробно показано, как это делается в статье Как сделать тень для текста, картинки, блока.

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

Чтобы сделать вариант Рис. 2, нужно просто весь селектор блоков повторить ещё раз, и добавить дивы в тело тега body.

Точно таким образом можно нашлёпать таких блоков хоть сотню. Менять можно число блоков в строке и их размер.

Вариант Рис. 3 делается немного по другому. Блоки не собираются в один селектор, а прописываются друг за другом.

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

Можно убрать из группового селектора все свойства border-radius и box-shadow, а вместо них прописать рамку:

Тогда страница приобретёт такой вид:

Как видите, размещать блоки можно и по оси Z. И такой метод предоставляет большие возможности для дизайна.

Представьте, что вместо блоков У Вас изображения. Убрав у них тень, можно одно изображение накладывать на другое (блоки у меня ведь накладываются друг на друга), и таким образом создать оригинальную картинку.

Дальше экспериментируйте, если хотите, сами, а сейчас посмотрим, как разбить страницу на блоки с закруглёнными углами и тенью, в WordPress.

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

На этом блоге установлена стандартная, идущая в WordPress по умолчанию, тема — TwentyTen.

А сделаем мы примерно вот так: (Это не картинка. Это html + css)

Количество блоков в строке, а так-же их размер — на Ваше усмотрение.

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

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

Для этого в имеющихся блочных элементах (в нашем случае это div и p , вместо атрибута style , с значениями, прописываем class , с произвольным названием.

Потом идём в файл style.css шаблона, и вписываем этот класс.

Затем копируем все значения атрибута style , и вставляем их в созданный класс в файле. Сам атрибут и его значения, из блочного элемента удаляются, остаётся только класс

В тексте остаётся только такой html код:

А в файле style.css — такой:

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

Но это уже зависит от особенностей темы.

Желаю творческих успехов.

Для начала пройдите по ссылке, и посмотрите описание курса. За это денег не берут.


Классный руководитель:
— Ну, как вы трудились дома?
— Дома я трудился над тарелкой с пирожками, а потом над компотом.

Источник: http://starper55plys.ru/css/otdelnye-bloki/

Ссылка на основную публикацию