Лекция 5. Основы блочной верстки сайта

Современный подход к верстке сайтов называется блочным. Он подразумевает использование в качестве основных элементов сайта — прямоугольных блоков. Элемент, который при этом используется — div. Данный элемент является универсальным и повсеместно используемым. Чтобы понять, где используется блок div, давайт рассмотрим верстку товара из интернет-магазина:

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

  • Блочные элементы которые растягиваются на всю ширину экрана
  • Если внутри блока не содержится элементов, либо блоку не задана высота — то высота блока составляет 0px. Т.е. блока не видно на странице
  • Не имеет цвета фона, не имеет обводки. Если вы хотите увидеть блок, то присвойте ему цвет фона

Давайте рассмотрим как применяется блок div:

1
<div class="one">Пример</div>

Давайте рассмотрим как оформить div с помощью CSS:

See the Pen div by Alex (@Asmodey) on CodePen.

Давайте рассмотрим данные ствойсва более подробно.

Свойство border

Свойство border изображает границу вокруг элемента. Синтаксис свойства:

1
border: Толщина_линии вид_линии цвет;

При подставлении полных параметров:

1
border: 2px solid red;

Где solid — сплошная линии, 2px — толщина обводки и red — цвет. Видов линии существует очень много, но на практике чаще всего применяют:

  • solid — сплошная линия
  • dotted — точки
  • dashed — пунктирная линия

Если возникает необходимость задать разные настройки для разных границ элемента примените следующий синтаксис:

1
2
  border-top: 1px solid red;
  border-left: 4px solid yellow;
т.е. можно задать оформление конкретной границе.

Скругление углов элемента

Для скругления углов элемента используется border-radius. В примере показанном выше при использовании синтаксиса:

1
  border-radius: 5px;
все углы скруглятся на 5 px. Если необходимо округлить каждый угол в отдельности, можно задать следующий синтаксис:

See the Pen border-radius by Alex (@Asmodey) on CodePen.

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

Обратите внимание, что использовать border-radius можно без применения границы.

Выполнить

Задание 1. Создайте div размером 50х50px. Задайте ему границу толщиной 3px. Цвет границы — синий. Примените к элементу в качестве границы сплошную линию, затем линию из точек, и затем пунктирную линию. Пронаблюдайте изменения вида границы.

Задание 2. Созданному div округлите все углы на 15px.

Задание 3. Созданному div округлите верхние углы на 20px, а все остальные на 5px.

Задание 4. Созданному div скруглите углы на 100px. Наблюдайте как изменится внешний вид блоков. Данным способом создают круглые элементы.

Выполнить

Задание 5. Добавьте к предложенному HTML коду оформление, чтобы получить рисунок мишеней представленный ниже. В случае затруднения, можно подсмотреть решение!

Код HTML:

1
2
3
4
5
  <div class="t">
    <div class="st">
      <div class="sst"></div>
    </div>
  </div>

Результат:

See the Pen CSS Target by Alex (@Asmodey) on CodePen.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *