Разное

Красивый блок div css: Красивое оформление блоков на сайте

Содержание

Оформление блоков с иконками

.iconblock-6 {

    background: #FFF;

    margin: 20px 0;

    border: 1px solid #C5C5C5;

    box-shadow: 0 4px 4px 0 rgba(84, 84, 84, 0.3);

}

.iconblock-6 .top {

    position: relative;

    z-index: 1;

    height: 100px;

}

.iconblock-6 .top .pic {

    position: relative;

    z-index: 1;

    height: 100px;

    overflow: hidden;

    transition: all 0.3s;

}

.iconblock-6:hover .top .pic {

    height: 180px;

}

.iconblock-6 .top .pic img {

    position: absolute;

    z-index: -1;

    top: -35%;

    transition: all 0.3s;

    width:100%;

}

.iconblock-6:hover .top .pic img {

    top: 0;

}

.iconblock-6 .top .pic:before {

    content: »;

    position: absolute;

    z-index: 1;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    background: rgba(255, 255, 255, 0.3);

}

.iconblock-6:hover .top .pic:before {

    background: rgba(255, 255, 255, 0);

}

.iconblock-6 .top .icon {

    position: absolute;

    z-index: 1;

    left: 50%;

    top: 50%;

    transform: translate3d(-50%, -10px, 0);

    transition: all 0.3s;

}

.iconblock-6:hover .top .icon {

    transform: translate3d(-50%, -20px, 0);

}

.iconblock-6 .top .icon img,

.iconblock-6 .top .icon i

{

    border-radius: 50%;

    border: 2px solid #337AB7;

    font-size: 64px;

    color: #337AB7;

    padding:28px;

    box-sizing: content-box;  

    width:64px;

    height:64px;

    background: linear-gradient(to top, #BDE1FF, #FFF);

}

.iconblock-6:hover .top .icon img,

.iconblock-6:hover .top .icon i

{

    background: #FFF;

}

.iconblock-6 .body {

    text-align: center;

    margin-top: 90px;

}

.iconblock-6 h4 {

    transition: all 0.7s ease 0s;

    color: #337AB7;

    font-size:20px;

    margin:10px 0;

}    

.iconblock-6:hover h4 {

    color: #000;

}

Верстка блоками DIV. С самого начала — html(5), css

Верстка блоками div давно уже стала стандартом и имеет ряд преимуществ перед табличной версткой. Однако на деле начинающие разработчики путаются в поведении этих самых блоков.

Давайте разберем основные моменты при блочной верстке. Сейчас мы не будем брать во внимание стандарт html5, а просто рассмотрим основу основ при верстке блоками div, которая используется при создании макета или же какого то отдельного компонента страницы.

Что считать блочным элементом?

Область такого элемента на странице представлена прямоугольником, по умолчанию занимает все доступную ширину и начинается с новой строки.
Самым распространённым элементом, используемым в блочной верстке, является универсальный элемент <div>.

Итак, от простого к сложному. Посмотрим, как отобразятся блоки div по умолчанию без стилей, влияющих на их положение. Для наглядности стили к элементам будем добавлять инлайново, через атрибут style.

<div>Блок 1</div>
<div> Блок 2</div>
<div> Блок 3</div>

Блок 1

Блок 2

Блок 3

Добавим значение ширины для каждого блока:

<div>Блок 1</div>
<div> Блок 2</div>
<div> Блок 3</div>

Блок 1

Блок 2

Блок 3

Видно, что каждый блок согласно спецификации располагается с новой строки. Это их нормальное поведение.

Теперь возникает вопрос, как расположить блоки div на одной строке, друг за другом?

Для этого существует свойство float, которое определяет, с какой стороны блок будет принудительно выровнен. При этом с другого края, он может обтекаться другими элементами.

Свойство float имеет следующие значения:

  • left – блок выравнивается по левому краю, обтекание справа
  • right – блок выравнивается по правому краю, обтекание слева
  • none – обтекание не задано, блок ведет себя по умолчанию, как в предыдущих примерах.

Добавим float:left к нашим блокам, чтобы блоки выровнялись по левому краю:

<div>Блок 1</div>
<div> Блок 2</div>
<div> Блок 3</div>

Блок 1

Блок 2

Блок 3

В результате, блоки выстроились на одной строке. Хорошо, допустим, мы захотели добавить еще один div снизу, и сделаем это без указания свойства float:

<div>Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div> Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div> Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div>Блок 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Видно, что блок добавился как то криво. Кажется, что он добавился с новой строки под Блок 1. На самом деле, Блок 4 занимает место от начала Блока 1 и на 450 пикселов вправа. Вот посмотрите:

Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Почему так вышло? Вкратце, так происходит, потому что элементы с float выпадают из потока документа. Однако, это тема отдельной статьи. Здесь же мы познакомимся с новым свойством clear, которое управляет поведением плавающих элементов:

  • left – запрещает обтекание с левой стороны, все элементы будут показаны с новой строки (под элементом)
  • rigth – запрещает обтекание элемента с правой стороны
  • both – запрещает обтекание элемента с обоих сторон, рекомендуется использовать, когда явно надо показать элемент с новой строки или неизвестно с какой именно стороны возможно обтекание другими элементами

Добавим Блоку 4 свойство clear:left, которое запретит этому элементу обтекание других плавающих элементов с левой стороны.

<div>Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div>Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div>Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div>Блок 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Блок 4 разместился с новой строки, как нам надо.

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

Следует помнить, что блоки со значением float располагаются на одной строке, если позволяет ширина родительского элемента. Если блочные элементы не умещаются в ряд, они будут переноситься на новую строку. Если это критично, например, при верстке макетов, нужно это учитывать и у блоков с float обязательно задавать ширину – фиксированную (px) или резиновую (%, rem и т.д.). Дальше посмотрим на такие ситуации.

Как повлиять на блоки, если мы хотим разместить эти блоки по центру?

Классическим решением будет добавление блокам родителя и использование свойства margin: 0 auto;

Почему собственно родителю мы дали класс .wrapper ? «wrapper» в переводе означает «обертка». Это некая общепризнанная практика, определяющая название класса, когда элемент оборачивает другие блоки и тем самым позволяет управлять/влиять на них посредством изменения самого родителя.

Возьмем разметку из предыдущих примеров и усовершенствуем её.

<div>
<div>Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div>Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div>Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div>Блок 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Здесь вроде всё просто.

А если нам не нравится, что текст вплотную прилипает к краю родительского блока и хотим добавить поля без внесения изменений в разметку, только с помощью css. Добавим элементам свойство padding:

Блок 1. Lorem

Блок 2. Lorem ipsum

Блок 3. Lorem ipsum

Блок 4. Lorem

И видим, что наша верстка рассыпалась! Блок 3 куда то уехал. Почему так вышло? Ответ прост. Добавив поля элементам мы увеличили их ширину. Теперь значения таковы:

Блок 1: 10 + 200 + 10 = 220px

Блок 2: 10 + 150 + 10 = 170px

Блок 3: 10 + 100 + 10 = 120px

Блок 4: 10 + 450 + 10 = 470px

220 + 170 + 120 = 510px

Общая ширина трех блоков 510, они не умещаются в ширину родителя (450) и потому переносятся на новую строку.

Как поправить? Можно сделать следующее:

  1. Задать заново значения ширины для каждого блока с учетом полей. Уменьшив размеры блоков. Все снова аккуратно встанет в одну строку. Согласитесь, это неудобно? Каждый раз лезть в верстку и что-то править.
  2. Использовать свойство box-sizing: border-box. Чтобы расчет брался из общей ширины блока. Советую узнать, что такое блоковая модель сss.

Используем второй вариант, получается так:

<div>
<div>Блок 1. Lorem</div>
<div>Блок 2. Lorem ipsum</div>
<div>Блок 3. Lorem ipsum</div>
<div>Блок 4. Lorem</div>
</div>

Блок 1. Lorem

Блок 2. Lorem ipsum

Блок 3. Lorem ipsum

Блок 4. Lorem

Теперь соберём всю полученную информацию воедино и попробуем создать простенький типовой трёхколоночный макет с резиновой версткой, который будет растягиваться максимально до 900px, после чего весь макет будет позиционироваться по центру.

Создаем  разметку макета:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        Шапка сайта
    </div>
    
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. In itaque dolor vitae praesentium consectetur molestias consequatur voluptatem rem dolore nihil officiis voluptates aperiam asperiores, saepe iure repudiandae expedita natus eaque magnam tempore delectus.
    </div>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit rem fugit itaque, est impedit aperiam a autem repellat vitae porro ex expedita, cumque nulla, velit. Soluta velit eos, quia. Fugiat voluptates nisi aliquid eum sapiente sunt nobis, adipisci assumenda earum!
    </div>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. In itaque dolor vitae praesentium consectetur molestias consequatur voluptatem rem dolore nihil officiis voluptates aperiam asperiores, saepe iure repudiandae expedita natus eaque magnam tempore delectus.
    </div>
    
    <div>
        Подвал
    </div>
</body>
</html>

Пишем стили:

body {
    max-width: 900px; /* ограничение максимальной ширины  */
    margin: 0 auto;
}

/* для всех блоков внутри body изменяем алгоритм расчета ширины блоков и добавляем все блокам поля 10px */
body div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
}

.header {
    background: #CCA69E;
    padding: 10px;
}

.left-sidebar {
    width: 20%;
    background: #8ED9B6;
    float: left;
}

.content {
    float: left;
    width: 60%;    
}

.right-sidebar {
    width: 20%;
    background: #FF9282;
    float: left;
}

.footer {
    background: #000;
    clear: both; /* запрещаем обтекание с обоих сторон, блок выводится с новой строки */
    color: #ccc;
}

Посмотреть пример.

Если что-то непонятно — спрашивайте в комментариях.

Адаптивные блоки с анимацией для одностраничного сайта

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

Еще оформление элементов на сайте:

Описание эффекта: у блока есть скрытая часть и видимая. Видимая часть — это иконка и название выгоды, а скрытая часть — это подробное описание выгоды, которое появляется при наведении. Также при наведении добавляется активному блоку для создания эффекта объема.

Чтобы увидеть эффекты перейдите на страницу с примером:

Посмотреть примерСкачать

Если у Вас есть трудности с созданием лендинга, тогда начните с данного мини-курса: «Лендинг за 60 минут».

Вот как выглядит блок при наведении:

Как сделать красивое оформление для своего продающего сайта?

1 HTML структура

Сперва подключаем иконки от FontAwesome между тегами <head></head>, которые будем использовать для описания:

HTML КОД

1
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

У нас есть один общий блок, в котором находятся все 3 блока с описанием и иконками:

HTML КОД

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div>
    <div>
        <span></span>
        <p>Выгода 1</p>
        <p>Дополнительный<br>скрытый текст 1</p>
    </div>
 
    <div>
        <!-- Содержимое 2-го блока -->
    </div>
 
    <div>
        <!-- Содержимое 3-го блока -->
    </div>
</div>

Несколько слов по структуре:

  • Строки: с 1 по 15 — общий блок, который содержит 3 блока с описанием.
  • Строки: со 2 по 6 — один отдельный блок с описанием выгоды.
  • Строка: 3 — иконка блока.
  • Строка: 4 — видимая часть с описанием выгоды.
  • Строка: 5 — скрытая часть с подробным описанием выгоды.

Структура прозрачна и проста. Переходим к оформлению и создании анимации.

2 CSS стили

Для создания анимации нам понадобится лишь CSS3 и никакого Javascript.

Прописываем общие стили для 3-х блоков:

CSS КОД

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.bulletsBlock:after {
    content: "";
    display: table;
    clear: both;
}
 
.bulletsBlock > div {
    width: 30%;
    float: left;
    background: rgba(0,0,0,0.3);
    margin-left:5%;
    text-align: center;
    position: relative;
    padding-bottom: 31.7%;
    cursor: pointer;
    -webkit-transition:all 0.35s linear;
    transition:all 0.35s linear;
}
 
.bulletsBlock > div:first-child {
    margin-left:0;
}
 
/*Тень снизу у блока при наведении*/
.bulletsBlock > div:hover {
    -webkit-box-shadow: 0 35px 35px -35px #000000;
    -moz-box-shadow: 0 35px 35px -35px #000000;
    box-shadow: 0 35px 35px -35px #000000;
}

Далее идет иконка и ее анимация при наведении:

CSS КОД

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.bullet-item span{
    line-height: 1.5em;
    font-size: 12.5em;
    color:#fff;
    position: absolute;
    top:0;
    left:0;
    display: block;
    width: 100%;
    -webkit-transition:all 0.35s ease;
    transition:all 0.35s ease;
}
 
/*Анимация иконки при наведении - уменьшение и сдвиг вверх*/
.bulletsBlock > div:hover span.iconBullet{
    line-height: 1.35em;
    font-size: 10.625em;
    top:-2.7%;
}

Далее напишем стили для блоков с текстовым описанием:

CSS КОД

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.titleBullet, .hideText {
    position: absolute;
    left:0;
    bottom:0;
    text-align: center;
    width: 100%;
    margin: 0;
    color: #fff;
    -webkit-transition:all 0.35s ease;
    transition:all 0.35s ease;
}
 
.titleBullet {
    line-height: 2.5em;
    font-size: 2.1875em;
    background:#3B3B3B;
    z-index: 10;
}
 
.hideText {
    line-height: 1.3em;
    font-size: 1.25em;
    padding: 1em 0;
    background:#3B3B3B;
    font-weight: 300;
    z-index: 8;
    height: 50px;
    -webkit-transition:all 0.35s linear 0.2s;
    transition:all 0.35s linear 0.2s;
}
 
/*Анимация при наведении видимого текстового блока*/
.bulletsBlock > div:hover p.titleBullet{
    bottom:80px;
}
 
/*Анимация при наведении скрытого текстового блока*/
.bulletsBlock > div:hover p.hideText{
    background:#454545;
}

На этом всё!

Вывод

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

ВНИМАНИЕ: я понимаю что не у всех получается установить эффекты, скрипты и плагины, которые находятся на сайте, поэтому я сделал возможность проконсультироваться по любому вопросу в сайтостроении здесь: SKYPE Консультация!

Успехов!

С Уважением, Юрий Немец

Основные приемы размещения блоков (div) горизонтально при помощи CSS.

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

Материал данной статьи призван помочь начинающим веб-дизайнерам в освоении приемов верстки web-страниц.

Из чего выбрать или методы

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

  • метод «Float»
  • метод «Inline-block»
  • метод «Table-cell»

Каждый из них имеет свои преимущества, области применения и недостатки. Рассмотрим их по порядку.

«Для рывка» или немного теории

Все структурные элементы HTML можно условно разделить на:

Инлайновые (встроенные) – типа img, span и им подобные. У нас нет возможности менять их фон и задавать им произвольные линейные размеры.

Блочные – занимающие всю ширину родительского блока, всегда начинаются с новой строки – p, h, div.

Наглядный пример встроенных и блочных структур приведен ниже:

Метод «Float»

Как уже известно (см. выше), блочный элемент размещается с новой строки вне зависимости от заданной ему ширины (width). По этому, уменьшая горизонтальный размер div-а, в рядок блочки не построить.

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

CSS свойство float обрело большую популярность и практическую ценность после перехода от табличного способа верстки к блочному.

Float: left (right) трансформирует блочный элемент в плавающий, выравнивает по левому (правому) краю родительского блока и устанавливает обтекание справа (слева) текстом и другими элементами.

Для примера, создадим четыре блока, которые нужно разместить в ряд:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" media="all" type="text/css" href="style.css" />
    </head>
    <body>
        <div>Строим</div>
        <div>горизонтальный</div>
        <div>ряд</div>
        <div>из дивов</div>
    </body>
</html>

И внешнюю таблицу стилей с следующим содержимым:

div {
     float: left; /*Задаем обтекание*/
     line-height: 120px;/*Высота строки +  верт. центрирования текста*/
     font-size: 40px;
     background: dodgerblue;
     color: white;
     margin-top: 60px;
     width: 320px; /*Фиксируем ширину блока*/
     margin-right: 10px;
     text-align: center; /*Центрируем текст по горизонтали*/
    }

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

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

Обратите внимание на надписи, расположенные в блоках. На первый взгляд может показаться, что пример отработал криво. Но на самом деле, браузер обработал код правильно: прочитал блоки сверху вниз, и сделал то, что мы от него просили — выровнял по правому краю. Учтите этот момент при использовании свойства float: right.

Для того, чтобы прервать обтекание элементов с какого-то конкретного места, используйте строчку:

<div></div>

В рассмотренном выше примере расстояния между блоками мы задавали при помощи отступа margin-right. Но что делать, если у вас при верстке страницы возникла задача: разместить блоки в ряд, центрировать их, да и еще чтобы отступы были только между ними, но никак не снаружи?

Алгоритм действий следующий.

HTML:

<div> <!--Создаем дополнительную обертку-родительский элемент -->
            <div>Строим</div>
            <div>горизонтальный</div>
            <div>ряд</div>
            <div>из дивов</div>
</div>

CSS:

.wrap {
         width: 1310px;/*фиксируем ширину обертки*/
         margin: 0 auto;/*центрируем ее*/
         background: darkgray;
         height: 120px;/*Задаем высоту обертки*/
        }
 
.bblock {
        float: left; /*Задаем обтекание*/
        line-height: 120px;/*Высота строки +  верт. центрирования текста*/
        font-size: 40px;
        background: dodgerblue;
        color: white;
        width: 320px; /*Фиксируем ширину блока*/
        margin-right: 10px;
        text-align: center; /*Центрируем текст по горизонтали*/
}
.wrap :last-child {
        margin-right: 0px;/*Убираем поле последнего div-а*/
                       }

В результате получаем такую картину:

Ну что же, всех практических ситуаций не рассмотришь, по этому перейдем к общим особенностям.

Важно!!!

  1. Ширина блоков должна быть фиксированной. Иначе получите что-то такое:

  2. При уменьшении размера родительского блока или окна веб-браузера, не вмещающиеся блоки перемещаются вниз друг под дружку. Чтобы исключить такой косяк, примените свойство min-width.
  3. Не забывайте указывать !DOCTYPE вашего документа, иначе, при отображении страницы в IE, применив описанный выше метод горизонтального размещения блоков, у вас появится отступ справа порядка 17px (наверное разработчики под скролл разметили).
  4. Во избежание различий отображения страницы в разных браузерах, некоторые веб-мастера рекомендуют задавать точные значения свойств margin и padding для body.
  5. В отличии от метода «Inline-block» вы не столкнетесь с наличием зазора между блоками при отсутствии margin-ов.
  6. Для задания отступов и полей при размещении элементов воспользуйтесь свойствами margin и padding.

Метод «Inline-block»

Как строчные так и блочные элементы имеют свои преимущества и недостатки в контексте каждой конкретной решаемой задачи. А что если объединить их преимущества?

Встречайте, гвоздь программы – свойство display: inline-block.

display: inline-block генерирует блочно-строчный элемент, который по сути является строчным, но сохраняет блочные свойства – позволяет изменять линейные размеры, задавать поля, отступы и т.д.

Блочно-строчный элемент имеет следующие свойства:

  • высота и ширина блока определяется автоматически по содержимому и значению отступов (padding)
  • высота и ширина блока может быть задана фиксировано
  • Отсутствует эффект схлопывания границ.

Рассмотрим пример создания простого навигационного меню, содержащего картинку и ссылку.

HTML:

        <div>
            <p><img src="./vaden-pro-logo.png" alt=""  /></p>
            <p><a href="#">Ссылка меню 1 длиннее обычного</a></p>
        </div>
        <div>
            <p><img src="./vaden-pro-logo.png"  alt="" /></p>
            <p><a href="#">Ссылка меню 2</a></p>
        </div>
        <div>
            <p><img src="./vaden-pro-logo.png"  alt="" /></p>
            <p><a href="#">Ссылка меню 3</a></p>
        </div>
        <div>
            <p><img src="./vaden-pro-logo.png"  alt="" /></p>
            <p><a href="#">Ссылка меню 4</a></p>
        </div>

CSS:

.nav {
	display: inline-block; /*Задаем блочно-строчное отображение*/
  	width: 180px; /*задаем ширину блока*/
	background: dodgerblue;
        }
 
        .string {
         text-align: center; /*Равняем текст по-горизонтали*/
        }

В результате получаем такую менюшку:

Как видим, получилось кривовато… Но расстраиваться мы не намерены, по-этому применяем к нашим дивам CSS свойство vertical-align (подробнее см. ниже):

Теперь наша навигационная панель выровнялась по верхней линии:

Конечно, приведенный пример является примитивным, но я уверен, что на его основе вы сможете создать настоящий шедевр!!!

Важно!!!

  1. При уменьшении ширины окна обозревателя невмещающийся элемент перемещаеться вниз (как в случае float: left)
  2. Элемент, отображаемый как inline-block чувствителен к пробелам. Это приводит к тому, что даже при нулевых значениях margin между блоками будет зазор. Зазор этот зависит от применяемого шрифта. Для примера рассмотрим список:
    HTML:
     <ul>
               <li>Зазор</li>
               <li>между</li>
               <li>блоками</li>
    </ul>

    CSS:

    li {
            display: inline-block; 
       	width: 180px;
     	background: darkgrey;
            color: gold;
            line-height: 120px;
            font-size: 32px
            text-align: center;
            }

    Результатом рендеринга такого кода будет следующая картина:

    Есть несколько способов убрать зазоры:

    • подобрать отрицательные значения margin:
    • указать font-size: 0 для родительского блока и font-size ≠0 для инлайнового;
              ul { font-size: 0px;}
              li {font-size: 32px;}
    • не очень красиво, но все же… Написать код в одну строчку
      <li>Зазор</li><li>между</li><li>блоками</li>

    Результатом применения любого из выше перечисленных приемов будет следующая структура:

  3. Если у вас несколько блочно-строчных элементов подряд имеют разную высоту, то им необходимо задать свойство vertical-align: top. Напомню, что по умолчанию vertical-align присвоено значение baseline.
  4. Кросс-браузерность.
  • Для древних версий Firefox добавляем строчку:
    display: -moz-inline-stack;

    и оборачиваем элемент в дополнительную div-обертку.

  • IE 7 и более ранние версии — добавляем строчки:
     zoom: 1; /*задаем hasLayout*/
    *display: inline; /*звездочка – хак для IE */
    _height: 250px; /*в IE6 не работает min-height*/
  • Замечу, что на указанные строчки избирательно реагируют конкретные браузеры (на первую – Firefox, на остальные — IE).

Метод «Table»

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

Свойства display: table (table-cell, inline-table), позволяют выполнять табличное форматирование элементов без применения HTML таблиц.

Для горизонтального размещения блоков нам понадобится родительский элемент, имеющий свойство display: table, и дочерние элементы (ячейки), имеющие свойство display: table-cell:

<div>
  <div>Строим</div>
  <div>табличный</div>
  <div>ряд</div>
  <div>из дивов</div>
  </div>
.bblock {
	display: table-cell; 
        font-size: 32px;
  	width: 200px;
        height: 200px;
	background: gold;
        text-align: center;
        vertical-align: middle;
}
 
.wrap {
  display: table;  
  border-spacing: 20px 20px; 
  background-color: darkgray;
}

Важно!!!

  1. В отличии от методов «Inline-block» и «float», при уменьшении ширины окна веб-браузера, ячейки не перемещаются вниз.
  2. У вас нет возможности задавать свойство margin для ячеек псевдотаблицы.
  3. Кросс-браузерность. Свойства из семейства display: table* не поддерживаются IE6, IE7. Кроме того, в IE8 вы можете наблюдать динамическую ошибку рендеринга псевдотабличных элементов в виде рандомно пропадающих ячеек. Данная ошибка чаше всего проявляется при первичной прорисовке документа

.

Оценок: 43 (средняя 4.6 из 5)

Блочная верстка сайтов в CSS

Всем доброго дня!

На связи Бернацкий Андрей!

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

Кстати говоря, данный выпуск имеет видео версию, можете скачать по ссылке:

Видео версия 13 урока

Для этого, нам необходимо познакомиться с CSS-свойством float, которое является одним из наиболее частоиспользуемых, при блочной верстке страниц сайта.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Итак, свойство float предназначено для выравнивания элементов на странице. Это что-то похожее на параметр align в HTML тегах.

Свойство float:

Значения:

left – выравнивает элемент по левому краю.

right — выравнивает элемент по правому краю.

inherit – использует стиль выравнивания, как у родительского элемента.

none – без выравнивания.

Допустим нам нужно выровнять изображение по правому краю. Для него мы должны прописать:

<img src=»myimg.jpg» />

<img src=»myimg.jpg» />

Это будет один к одному, как если бы мы указали:

<img src=»myimg.jpg» align=»right» />

<img src=»myimg.jpg» align=»right» />

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

Свойство clear:

Значения:

left – отменяет обтекание слева.

right — отменяет обтекание справа.

inherit – отменяет обтекание, которое было у родительского элемента.

none – без обтекания.

both – отменяет любое выравнивание.

Но, чаще, свойство float используется для расположения элементов на странице.

Посмотрите на рисунок:

Это каркас сайта. Казалось бы, обычная таблица, но нет! Для реализации такое разметки не использовалась ни одна таблица! Все элементы – это теги <div></div>.

Посмотрим, как это можно легко реализовать.

Для начала создаем четыре блока div.

<div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>

<div>

<div>

</div>

<div>

</div>

<div>

</div>

</div>

div – основной блок. Он содержит все остальные блоки, которые только у нас будут использоваться.

div – блок, в котором будет основное содержимое страницы (зеленый слева).

div – правый блок. В примере в нем находиться текст, но в реальной ситуации, там может быть навигация, рекламные баннеры, и т. д.

div – желтый нижний блок. В нем, обычно, расположена контактная информация, различные ссылки и т.д.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

В общем, без задания стилей мы ничего особенного не увидим:

Теперь назначим стили для блоков:

.main{
background-color:#000099; width:600px; margin:0 auto;
}
.content{
background-color:#00CC00; width:400px;
}
.righter{
background-color:#660033; width:200px;
}
.foot{
background-color:#FFFF00;
}
color:#FFFF00;
}

.main{

background-color:#000099; width:600px; margin:0 auto;

}

.content{

background-color:#00CC00; width:400px;

}

.righter{

background-color:#660033; width:200px;

}

.foot{

background-color:#FFFF00;

}

color:#FFFF00;

}

Пока, думаю, все понятно. Все вышеизложенное описано в предыдущих выпусках рассылки.

Увидеть мы должны примерно следующее:

А теперь проанализируем код страницы.

Главному блоку у нас задана ширина в 600px, блоку с содержимым 400рх, а для левого блока 200рх. Но два последних блока не стали в один ряд, а расположились друг за другом.

Пришло время воспользоваться свойством float. В стилях дописываем следуюшее:

.content{
background-color:#00CC00; width:400px; float:left;
}
.righter{
background-color:#660033; width:200px; float: left;
}

.content{

background-color:#00CC00; width:400px; float:left;

}

.righter{

background-color:#660033; width:200px; float: left;

}

Остальные стили пока не трогаем. Получили такую вещь:

Что-то получили, но не совсем то, что нужно. Но если разобраться в теории, то все свойства сработали корректно. Мы задали float:left для левого и правого блока, они выбились из потока следования элементов, и все, что было за ними, заняло свободное место вокруг этих блоков (аналогично как текст обтекает картинку, если ей задать это свойство).

Соответственно, чтобы нижний блок стал на свое, место пропишем следующее:

.foot{
background-color:#FFFF00; clear:both; float:left; width:100%;
}

.foot{

background-color:#FFFF00; clear:both; float:left; width:100%;

}

clear:both – для отмены выравнивания от предыдущих блоков.

float:left – для собственного выравнивания блока.

width:100% — чтобы блок занял всю ширину основного блока.

Получили:

Почти то, что нужно, только блоки не равной высоты, и это видно, так как фон у них разный.

Одним из решений данной проблемы (самой простой и универсальной, на мой взгляд) является задание отступов снизу.

Делаем их следующим образом:

.main{
background-color:#000099; width:600px; margin:0 auto; overflow:hidden;
}
.content{
background-color:#00CC00; width:400px; float:left; padding-bottom:32000px; margin-bottom:-32000px;
}
.righter{
background-color:#660033; width:200px; float: left; padding-bottom:32000px; margin-bottom:-32000px;
}

.main{

background-color:#000099; width:600px; margin:0 auto; overflow:hidden;

}

.content{

background-color:#00CC00; width:400px; float:left; padding-bottom:32000px; margin-bottom:-32000px;

}

.righter{

background-color:#660033; width:200px; float: left; padding-bottom:32000px; margin-bottom:-32000px;

}

После добавления этого кода получим:

Фон левого блока дотянулся до низа страницы. Теперь если мы будем менять содержимое блоков, то фон будет тянуться до низа, так как это и нужно. Собственно для этого и нужны отступы padding-bottom:32000px; margin-bottom:-32000px; для обоих блоков.

overflow:hidden; в классе main для того, чтобы скрыть большой отступ вниз без содержимого блоков.

В общем-то все, что нужно мы получили. Осталось только добавить отступов к блокам и выровнять текст в нижнем блоке по центру. Но это я оставлю вам на самостоятельную доработку.

На этом, выпуск посвящённый блочной верстке сайтов и страниц, завершим.

Просьба присылать с вопросом ваш код того, что вы делаете. Так будет проще и мне понять, что у вас не получилось и дать вам четкий ответ. И вам меньше объяснять в письме, что у вас не получается.

Данный урок имеет видео версию, которую Вы мо жете скачать по ссылке:

Видео версия 13 урока

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Оформление блока. Div + class

Для создания кнопки, которая выполняет какой-либо JavaScript-код отлично подходят блоки div.
Но изначально они не оформлены должным образом. Это и нужно исправить начинающему верстальщику.
Для начала допустим, что мы уже создали html (хоть на рабочем столе).
Запишем в него, например, это:

1

2

3

4

5

6

<html>

    <head>

    </head>

    <body>

    </body>

</html>

Это базовый файл, с которого всегда можно начинать верстать любую веб-страницу.
Теперь добавим style и, собственно, сам div:

1

2

3

4

5

6

7

8

9

10

11

12

13

<html>

   <head>

      <style>

         div.button{

            display:inline;

            background:#FF7733;

         }

      </style>

   </head>

   <body>

      <div class='button'></div>

   </body>

</html>

И вот что получилось:

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<html>

   <head>

      <style>

         div.button{

            display:inline;

            padding:15px;

            color:#FFFFFF;

            background:#FF7733;

         }

      </style>

   </head>

   <body>

      <div class='button'></div>

   </body>

</html>

И получится:
вот это. Давайте представим, что нам она понравилась. Осталось показать, что этот блок ведёт себя, как кнопка.
Для этого необходимо сделать так называемый ховер (от англ. hover). Давайте добавим в style:

1

2

3

div.button:hover{

   background:#FF5500;

}

Попробуйте навести на эту кнопку мышью и курсор изменится, благодаря свойству cursor:pointer, а цвет изменится из-за псевдокласса hover (и background, разумеется)
Маленький бонус за то, что дочитали — круглая кнопка:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<html>

   <head>

      <style>

         div.button{

            border-radius:50px;

            width:100px;

            height:100px;

            color:#FFFFFF;

            background:#FF7733;

            cursor:pointer;

            line-height:100px;

            text-align:center;

         }

         div.button:hover{

            background:#FF5500;

         }

      </style>

   </head>

   <body>

      <div class='button'></div>

   </body>

</html>

Спасибо за внимание.

Если статья Вам показалась незаконченной или Вы знаете как её улучшить, пожалуйста сообщите мне [email protected]

Красивые информационные блоки на CSS3

.info_box {  

margin:10px 0px 10px;  

font-size:13px;  

line-height:18px;  

position:relative;  

-moz-box-shadow:0 1px 1px rgba(0,0,0,0.1);  

-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.1);  

box-shadow:0 1px 1px rgba(0, 0, 0, 0.1);  

}  

.info_box_content {  

text-shadow:1px 1px 1px white;  

padding:18px 43px 17px 66px;  

min-height:35px;  

}  

 

.warning {  

border:1px solid #E0B1B1;  

}  

.warning .info_box_content {  

color:#AD7676;  

background:#FFD9D5;  

border:1px solid #FCEEEC;  

-moz-box-shadow:inset 0 0 45px #f0bfba;  

-webkit-box-shadow:inset 0 0 45px #F0BFBA;  

box-shadow:inset 0 0 45px #F0BFBA;  

}  

.warning::before {  

width:17px;  

height:17px;  

background:url(/img/sprite_ico_box.png) no-repeat;  

}  

.note {  

border:1px solid #B9DBB6;  

}  

.note .info_box_content {  

color:#7EA57B;  

background:#DFF7DD;  

border:1px solid #F1F9F0;  

-moz-box-shadow:inset 0 0 45px #cbe5c9;  

-webkit-box-shadow:inset 0 0 45px #CBE5C9;  

box-shadow:inset 0 0 45px #CBE5C9;  

}  

.note::before {  

width:19px;  

height:14px;  

background:url(/img/sprite_ico_box.png) no-repeat 0 -17px;  

}  

.nice {  

border:1px solid #E2E2BA;  

}  

.nice .info_box_content {  

color:#ADA771;  

background:#F9F9DC;  

border:1px solid #FBFBEF;  

-moz-box-shadow:inset 0 0 45px #efefc0;  

-webkit-box-shadow:inset 0 0 45px #EFEFC0;  

box-shadow:inset 0 0 45px #EFEFC0;  

}  

.nice::before {  

width:22px;  

height:20px;  

background:url(/img/sprite_ico_box.png) no-repeat -19px -15px;  

}  

.advise {  

border:1px solid #B3D8D3;  

}  

.advise .info_box_content {  

color:#80ACB0;  

background:#DDF5F7;  

border:1px solid #F1FAFB;  

-moz-box-shadow:inset 0 0 45px #c6edf0;  

-webkit-box-shadow:inset 0 0 45px #C6EDF0;  

box-shadow:inset 0 0 45px #C6EDF0;  

}  

.advise::before {  

width:19px;  

height:15px;  

background:url(/img/sprite_ico_box.png) no-repeat -17px 0;  

}  

.normal {  

border:1px solid #DDD;  

}  

.normal .info_box_content {  

color:#737373;  

background:#FAFAFA;  

border:1px solid #FAFAFA;  

-moz-box-shadow:inset 0 0 45px #e7e7e7;  

-webkit-box-shadow:inset 0 0 45px #E7E7E7;  

box-shadow:inset 0 0 45px #E7E7E7;  

}  

.normal::before {  

width:20px;  

height:16px;  

background:url(/img/sprite_ico_box.png) no-repeat 0 -34px;  

}  

 

.warning::before, .note::before, .nice::before, .advise::before, .normal::before {  

content:»;  

position:absolute;  

top:22px;  

left:28px;  

}

html — как поместить блок div в правую область экрана с помощью CSS?

Переполнение стека

  1. Около
  2. Продукты

  3. Для команд
  1. Переполнение стека
    Общественные вопросы и ответы

  2. Переполнение стека для команд
    Где разработчики и технологи делятся частными знаниями с коллегами

  3. Вакансии
    Программирование и связанные с ним технические возможности карьерного роста

  4. Талант
    Нанимайте технических специалистов и создавайте свой бренд работодателя

  5. Реклама
    Обратитесь к разработчикам и технологам со всего мира

  6. О компании

Загрузка…

    .Макет

    CSS — встроенный блок


    Дисплей: встроенный блок Значение

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

    Также с
    display: inline-block
    , верхнее и нижнее поля / отступы соблюдаются,
    но с дисплеем : встроенный — нет.

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

    В следующем примере показано различное поведение дисплея : встроенный , дисплей : встроенный блок
    и дисплей : блок :

    Пример

    span.a {
    дисплей: встроенный; / * значение по умолчанию для диапазона * /
    ширина: 100 пикселей;
    высота: 100 пикселей;
    отступ: 5 пикселей;
    граница: сплошной синий 1px;
    цвет фона: желтый;
    }

    пролет.b {
    дисплей:
    встроенный блок;
    ширина: 100 пикселей;
    высота:
    100px;
    отступ: 5 пикселей;
    граница: 1 пикс.
    сплошной синий;
    цвет фона: желтый;
    }

    пролет.c {
    дисплей: блок;
    ширина:
    100px;
    высота: 100 пикселей;
    отступ: 5 пикселей;
    граница: 1 пиксель сплошного синего цвета;
    цвет фона: желтый;
    }

    Попробуй сам »


    Использование встроенного блока для создания ссылок навигации

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

    Пример

    .nav {
    background-color: желтый;
    список-стиль-тип: нет;
    выравнивание текста:
    центр;
    отступ: 0;
    маржа: 0;
    }

    .nav li {
    дисплей: встроенный блок;
    размер шрифта: 20 пикселей;
    набивка:
    20px;
    }

    Попробуй сам »

    .

    HTML-блок и встроенные элементы


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

    Есть два отображаемых значения: блочное и встроенное.


    Элементы блочного уровня

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

    Элемент

    — это элемент уровня блока.

    Вот элементы уровня блока в HTML:


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

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

    Это элемент
    внутри абзаца.

    Вот встроенные элементы в HTML:

    Примечание: Встроенный элемент не может содержать уровень блока
    элемент!


    Элемент

    Элемент


    часто используется как контейнер для других элементов HTML.

    Элемент

    не имеет обязательных атрибутов, но стиль , класс и id являются общими.

    При использовании вместе с CSS элемент

    может использоваться для стилизации блоков
    содержание:

    Пример

    Лондон

    Лондон — столица Англии. Это самый густонаселенный город Соединенного Королевства, в котором проживает более 13 миллионов жителей.

    Попробуй сам »


    Элемент

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

    Элемент не имеет обязательных атрибутов, но стиль , класс и id являются общими.

    При использовании вместе с CSS элемент может использоваться для стилизации частей текста:

    Пример

    У моей мамы голубые глаза
    а у моего отца темно
    зеленые глаза.

    Попробуй сам »


    Краткое содержание главы

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

    HTML-теги

    Тег Описание
    Определяет раздел в документе (на уровне блока)
    Определяет раздел в документе (встроенный)

    .

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

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