Верстка сайта по PSD макету (часть 3)
На прошлом уроке была сделана HTML разметка для дальнейшей верстки PSD макета. Как и ожидалось все блоки и секции встали друг под друга - это и есть блочная модель поведения. Наша задача, разместить блоки в два ряда.
Выстраивание блоков в одну линию обеспечат флоаты.
float: left;
float: right;
В ряду помещается четыре блока, следовательно зададим ширину каждому по 25%, таким образом блоки равномерно заполнят пространство, растягиваясь и сужаясь под ширину экрана, не меньше 768 пикселей и не больше 1250 пикселей. Поскольку мы сами ограничили максимальную ширину белого блока с контентом.
max-width: 1250px;
CSS код целиком
body {
font-family: PlayfairDisplay-Regular;
margin: 0;
padding: 0;
}
.clear {
clear: both; /* Отменяет обтекание элемента одновременно с правого и левого края */
}
.block_violet {
background-color: #5d257c; /* блок с фиолетовым фоном */
}
.block_white {
width: 100%; /* растягивает белый блок на всю ширину фиолетового */
max-width: 1250px; /* максимальная ширина белого блока */
display: table; /* Определяет, что элемент является блочной таблицей подобно использованию тэга <table> */
background-color: #fff; /* галерея с белым фоном */
margin: 0 auto; /* Выравниваем по центру горизонтали страницы */
}
.photo {
float: left; /* Выравнивает элемент по левому краю, а все остальные элементы, обтекают его справа. */
width: 25%; /* ширина блока с фото относительно белого блока */
}
section {
float: left;/* выравнивает секцию по левому краю */
width: 25%; /* ширина секции относительно белого блока */
}
.block_violet .photo .main_photo {
width: 100%; /* растягивание фото на всю ширину блока */
}
section .top_left_text {
float: left; /* Выравнивает элемент по левому краю */
font-family: PlayfairDisplay-BoldItalic;
font-size: 100%;
color: #5d257c;
margin: 30px 0 27px 20px;
}
section .data {
float: right; /* Выравнивает элемент по правому краю */
font-family: PlayfairDisplay-BoldItalic;
font-size: 100%;
color: #ccc;
margin: 30px 20px 27px 0;
}
section h1 {
font-family: Raleway-Bold;
font-size: 150%;
line-height: 30px; /* Устанавливает межстрочный интервал текста */
color: #000;
margin: 0 60px 0 20px;
}
section hr {
color: #000;
background-color: #000;
height: 3px;
border-top: 1px solid #666;
border-right: 1px solid #f0f0f0;
border-bottom: 1px solid #333;
border-left: 1px solid #878787;
width: 30%; /* ширина горизонтальной черты относительно родителя */
margin: 30px 0 0 20px;
}
section p {
font-size: 90%;
line-height: 25px; /* Устанавливает межстрочный интервал текста */
color: #9f9f9f;
margin: 30px 30px 0 20px;
}
.button {
display: inline-block; /* Устанавливаем как строчно-блочный элемент */
font-family: Raleway-Bold;
font-size: 90%;
text-transform: uppercase; /* Все символы текста становятся заглавными. */
text-decoration: none; /* убирает подчеркивание текста */
background-color: white; /* цвет фона */
color: black;
border: 3px solid #ededed; /* рамка */
margin: 48px 0 0 20px;
padding: 10px 28px;
transition-duration: /* 0.4s; Задаёт время в секундах сколько должна длится анимация */
}
.button:hover {
background-color: #ededed;
}
Итоги
Почему я решил делать верстку на флоатах, а не на технологии флексов или гридов. Во-первых их поддерживают старые браузеры, а во вторых существует ещё масса сайтов, сверстанных на флоатах. Этот навык будет полезен для выполнения заказов на фрилансе.
Демонстрация примера
-
Создано 14.06.2019 10:59:56
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.