Html блоки для сайта – Урок 7. Блочная верстка web-сайта. Часть 1 | Блочная верстка сайта div верстка | Уроки MODx Evo

Leave a Comment / Html / By /

HTML Блоки

Каждый элемент HTML имеет значение по умолчанию в зависимости от типа элемента. Значение по умолчанию для большинства элементов блоки или встроенные элементы.

Блочные Элементы

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

Элемент <div> является блочным элементом.

Примеры блочных элементов:

  • <div>
  • <h2> — <h6>
  • <p>
  • <form>

Встроенные Элементы

Встроенный элемент не начинаются с новой строки и занимают столько ширины, сколько нужно.

Это элемент <span> встроенный в параграф.

Примеры встроенных элементов:

Элемент <div>

Элемент <div> часто используется как контейнер для элементов HTML.

Элемент <div> не имеет обязательных атрибутов, style и class являются общими.

При использовании CSS, элемент <div> может быть использован для применения стиля блока контента:

Пример

<div>
  <h3>Лондон</h3>
  <p>Лондон является столицей Англии. Это самый густонаселенный город в Соединенном Королевстве, с пригородами свыше 13 миллионов жителей.</p>
</div>

Редактор кода »

Элемент <span>

Элемент <span> часто используется как встроенный контейнер для текста.

Элемент <span> не имеет обязательных атрибутов, style и class являются общими.

При использовании CSS, элемент <span> может использоваться для деталей стиля встроенного текста:

Группировка Тегов HTML

ТегОписание
<div>Определяет раздел в документе (на уровне блочного элемнта)
<span>Определяет раздел в документе (на уровне встроенного элемента)

блоки | htmlbook.ru

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

Влад Мержевич

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

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

Сделайте блок, показанный на рис. 1. Блок содержит полупрозрачную градиентную рамку с градиентным фоном под заголовком и небольшим указателем. Фон на странице приведён лишь для наглядности эффекта полупрозрачности, вы можете указать любую свою картинку. Минимальная высота блока составляет 100px.

Рис. 1

Сделайте блок, показанный на рис. 1. Блок содержит скругления в заголовке и внизу блока. Вокруг блока тёмно-зелёная рамка и тень. Длина заголовка может меняться, соответственно, должна изменяться и ширина блока под ним, но при этом не превышать 250px.

Рис. 1

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

Вы здесь: Главная — HTML — HTML Основы — Структура блочной вёрстки

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

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

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

Привожу HTML-код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Заголовок страницы</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="description" content="Описание страницы." />
  <meta name="keywords" content="ключевые слова страницы" />
  <link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div>Шапка сайта</div>
  <div>
    <div>Левые блоки</div>
    <div>Правые блоки</div>
    <div>Центральная часть</div>
  </div>
  <div></div>
  <div>Содержимое подвала</div>
</body>
</html>

И CSS-код:

#left {
  float: left; // Левые блоки размещаем слева
  width: 200px; // Установка ширины 200 пикселей
}
#right {
  float: right; // Правые блоки размещаем справа
  width: 200px; // Установка ширины 200 пикселей
}
#center {
  margin-left: 200px; // Отступ слева 200 пикселей
  margin-right: 200px; // Отступ справа 200 пикселей
}
.clear {
  clear: both; // Отменяем позиционирование (влияние float)
}

Эту структуру Вы можете смело копировать на свой сайт. Безусловно, некоторые элементы можно менять. Например, размеры левых и правых блоков. Соответственно, надо будет поменять и отступы у центрального блока. Также если вёрстка фиксированная, или она не должна растягиваться на всю страницу, то необходимо все блоки добавить в другой, самый верхний, у которого задать фиксированную ширину в пикселях (фиксированная вёрстка) или в процентах (резиновая, но не на всю страницу).

Надеюсь, данная структура блочной вёрстки поможет новичкам с минимальным количеством проблем сверстать свою первую страницу блоками.

  • Структура блочной вёрстки Создано 01.06.2012 12:27:27
  • Структура блочной вёрстки Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

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

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Создание необычных блоков на сайте

Лого SiteHere.ru