Cách thực hiện - Bố cục blog
Tìm hiểu cách tạo bố cục blog đáp ứng bằng CSS.
Tìm hiểu cách tạo bố cục blog đáp ứng thay đổi giữa hai cột và cột có chiều rộng đầy đủ tùy thuộc vào chiều rộng màn hình.
Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng phản hồi:
Cách tạo bố cục blog
Bước 1) Thêm HTML:
Ví dụ
<div class="header">
<h2>Blog Name</h2>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Title
description, Dec 7, 2017</h5>
<div class="fakeimg"
style="height:200px;">Image</div>
<p>Some
text..</p>
</div>
<div
class="card">
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div
class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>About Me</h2>
<div class="fakeimg"
style="height:100px;">Image</div>
<p>Some
text about me in culpa qui officia deserunt mollit anim..</p>
</div>
<div class="card">
<h3>Popular Post</h3>
<div class="fakeimg">Image</div><br>
<div class="fakeimg">Image</div><br>
<div
class="fakeimg">Image</div>
</div>
<div class="card">
<h3>Follow Me</h3>
<p>Some text..</p>
</div>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
Bước 2) Thêm CSS:
Ví dụ
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 20px;
background: #f1f1f1;
}
/* Header/Blog Title */
.header {
padding: 30px;
font-size: 40px;
text-align: center;
background: white;
}
/* Create two unequal
columns that floats next to each other */
/* Left column */
.leftcolumn
{
float: left;
width: 75%;
}
/* Right column */
.rightcolumn
{
float: left;
width: 25%;
padding-left: 20px;
}
/* Fake image */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Add a
card effect for articles */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear:
both;
}
/*
Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* Responsive layout - when the screen
is less than 800px wide, make the two columns stack on top of each other
instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn,
.rightcolumn {
width: 100%;
padding: 0;
}
}
Hãy tự mình thử »Mẹo: Hãy truy cập Hướng dẫn bố cục trang web CSS của chúng tôi để tìm hiểu thêm về bố cục trang web.
Mẹo: Hãy truy cập Hướng dẫn thiết kế web đáp ứng CSS của chúng tôi để tìm hiểu thêm về lưới và thiết kế web đáp ứng.