Разрабатываем лэндинг на html, css и JavaScript. Адаптивность - часть 3
При создании лендинга почти обязательным элементом сайта является блок с тремя преимуществами товара или услуги. Сегодня мы сделаем такой блок, изучим строчные и блочные элементы, и их симбиоз - свойство
display: inline-block;.
HTML-теги могут быть двух видов - строчные и блочные.
Строчные обычно содержат какой-то текст с одной строкой, не имеют фиксированной ширины и высоты, их размеры определяются строкой, которая в них содержится. Примером строчных тегов являются, например, теги ссылок <a href="#">Ссылка</a>, теги заголовков <h1>Заголовок</h1>, тег <span class="myclass">Текст</span> и некоторые другие. Любой строчный элемент можно сделать блочным, указав ему CSS-свойства display: block;. Например так мы поступили в прошлом уроке со ссылкой, которую мы превратили в кнопку.
Блочные элементы могут иметь фиксированную высоту и ширину, отступы и располагаются один под другим. Ярким примером блочного элемента является тег <div>Текст</div>.
Но что, если нам нужно расположить несколько блоков не один под другим, а в линию. В случае с нашим блоком преимуществ нам как раз и нужно расположить три блока один за другим в линию. Для этого можно применить CSS-свойство display: inline-block;. Вместе с этим свойством обычно также пишут vertical-align: top;, чтобы выравнять блоки поверх верхней границе.
Давайте попробуем создать три блока, размещенных на одной линии. Я буду продолжать писать код, начатый в прошлом уроке. Для наглядности я поставлю блокам background: silver;, чтобы мы могли видеть их границы. Впоследствии мы уберем это свойство. Итак, вот измененный код файлов из прошлого урока.
index.html
<html>
<head>
<title>Заголовок веб страницы</title>
<meta charset="utf-8">
<meta name="description" content="Текстовое описание о чем веб страница">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href='css/css.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="mytext">
<h1>СТРАТЕГИИ ТРЕЙДИНГА НА BITTREX и RUDEX</h1>
<h3>Хотите научиться зарабатывать на криптовалюте?</h3>
<a href="#" class="mybutton">КУПИТЬ ВИДЕОКУРС</a>
</div>
<div class="pluses">
<div class="plus"></div>
<div class="plus"></div>
<div class="plus"></div>
</div>
</body>
</html>
css/css.css
* {
box-sizing: border-box; /* Сброс настроек оступов */
font-family: Arial, sans-serif; /* Тип шрифта */
}
body, html {
margin: 0px; /* Сброс настроек оступов */
padding: 0px; /* Сброс настроек оступов */
}
.mytext {
width: 100%; /* Ширина */
height: 500px; /* Высота */
background: url(../img/fon.jpg); /* Фоновая картинка */
background-size: cover; /* Растянуть фоновую картинку */
background-position: center; /* Центрировать фон */
color: white; /* Белый цвет шрифта */
text-align: center; /* Центрировать текст внутри блока */
padding-top: 120px; /* Отступ сверху */
}
.mybutton {
display: block; /* Кнопка должна быть display: block */
width: 300px; /* Ширина */
height: 50px; /* Высота */
line-height: 50px; /* Одинаковое с высотой значение центрирует текст кнопки по вертикали */
color: white; /* Белый цвет шрифта */
margin: 0 auto; /* Центрируем кнопку относительно окружения */
margin-top: 40px; /* Отступ сверху */
text-decoration: none; /* Выключаем подчеркивание текста */
border: 2px solid white; /* Делаем белую рамочку у кнопки */
border-radius: 5px; /* Закругляем рамочку */
}
.pluses {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
}
.plus {
display: inline-block;
vertical-align: top;
width: 27%;
min-height: 250px;
min-width: 200px;
background: silver;
margin: 20px;
padding: 30px;
}
Здесь я добавил блок с классом "pluses", а внутри него три других блока с классом "plus", в CSS указал их размеры, отступы и волшебное свойство display: inline-block;. Обратите внимание на ширину блоков - 27%. Так как у нас три блока, я взял 100% разделил на 3, и отнял несколько процентов для отступов между блоками, в итоге получилось 27%. Указание ширины в процентах позволит блокам подстраиваться под разную ширину мониторов. Блок, в который заключены три остальных, имеет ширину 100%, но прописано также свойство max-width: 1200px;. Это ограничение позволяет не слишком растягивать контент лендинга по ширине на огромных мониторах.
У нас получилось три серых текстовых блока, расположенных на одной линии.
Давайте вставим внутрь блоков иконки и подзаголовки. Сначала скачаем три иконки на сайте бесплатных иконок. Сохраним их в папку img нашего лендинга.
Теперь изменим код index.html, вставив в каждый из наших блоков картинку с иконкой и подзаголовок.
<html>
<head>
<title>Заголовок веб страницы</title>
<meta charset="utf-8">
<meta name="description" content="Текстовое описание о чем веб страница">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href='css/css.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="mytext">
<h1>СТРАТЕГИИ ТРЕЙДИНГА НА BITTREX и RUDEX</h1>
<h3>Хотите научиться зарабатывать на криптовалюте?</h3>
<a href="#" class="mybutton">КУПИТЬ ВИДЕОКУРС</a>
</div>
<div class="pluses">
<div class="plus">< img src="img/1.png"><br><h3>Научим разбираться в криптовалюте</h3></div>
<div class="plus">< img src="img/2.png"><br><h3>Заработок на колебаниях курса</h3></div>
<div class="plus">< img src="img/3.png"><br><h3>Использование программ-роботов</h3></div>
</div>
</body>
</html>
Нам нужно явно указать размер иконок - в CSS добавим следующий кусочек кода:
.plus img {
width: 80%;
max-width: 128px;
}
И удалим из класса "plus" свойство background: silver;. Должно получиться нечто вроде этого:
Если сейчас мы попробуем уменьшить ширину окна браузера, то увидим, что элементы лендинга подстраиваются под новый размер, вплоть до размера экрана мобильного. Это получается всего лишь за счет того, что мы казали ширину в процентах, а не в пикселях. Более тонко подстроить адаптивность сайта можно с помощью медиазапросов, которые мы изучим в следующих уроках.
Исходники этого урока можно скачать тут.
Данный материал подготовлен @pythono.