Как сделать - Макет блога
Узнать, как создать адаптивный макет блога с помощью CSS.
Макет блога
Узнайте, как создать адаптивный макет блога, который варьируется между двумя и полными столбцами ширины в зависимости от ширины экрана.
Изменить размер окна браузера, чтобы увидеть отзывчивый эффект:
Создать макет блога
Шаг 1) Добавить HTML:
Пример
<div class="header">
<h2>Название блога</h2>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>НАЗВАНИЕ ЗАГОЛОВКА</h2>
<h5>Описание заголовка, Декабрь 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Изображение</div>
<p>Некоторый текст..</p>
</div>
<div class="card">
<h2>НАЗВАНИЕ ЗАГОЛОВКА</h2>
<h5>Описание заголовка, Сентябрь 2, 2017</h5>
<div class="fakeimg" style="height:200px;">Изображение</div>
<p>Некоторый текст..</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>О Нас</h2>
<div class="fakeimg" style="height:100px;">Изображение</div>
<p>Какой-то текст обо мне в culpa qui officia deserunt mollit anim..</p>
</div>
<div class="card">
<h3>Popular Post</h3>
<div class="fakeimg">Изображение</div><br>
<div class="fakeimg">Изображение</div><br>
<div class="fakeimg">Изображение</div>
</div>
<div class="card">
<h3>Следуйте за мной</h3>
<p>Некоторый текст..</p>
</div>
</div>
</div>
<div class="footer">
<h2>Подвал</h2>
</div>Шаг 2) Добавить CSS:
Пример
body {
font-family: Arial;
padding: 20px;
background: #f1f1f1;
}
/* Заголовок/Название блога */
.header {
padding: 30px;
font-size: 40px;
text-align: center;
background: white;
}
/* Создайте два неравных столбца, которые плавают рядом друг с другом */
/* Левая колонка */
.leftcolumn {
float: left;
width: 75%;
}
/* Правая колонка */
.rightcolumn {
float: left;
width: 25%;
padding-left: 20px;
}
/* Поддельное изображение */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Добавить эффект карты для статей */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* Очистить поплавки после столбцов */
.row:after {
content: "";
display: table;
clear: both;
}
/* Подвал */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* Адаптивный макет - когда экран имеет ширину менее 800 пикселей, сделайте два столбца стеком друг на друга, а не рядом друг с другом */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}Редактор кода »Совет: Зайдите на наш учебник CSS Макет сайта, чтобы узнать больше о макетах веб-сайтов.
Совет: Зайдите на наш учебник CSS Адаптивный веб дизайн, чтобы узнать больше о адаптивном веб-дизайне и сетках.
