Cách tạo: bố cục blog

Trang trước Định dạng lưới hình Z
Trang tiếp theo Chuyển đổi trọng lượng

Học cách sử dụng CSS để tạo bố cục blog tương ứng.

Học cách tạo bố cục blog tương ứng, bố cục này thay đổi giữa hai cột và cột toàn diện dựa trên độ rộng màn hình.

Vui lòng điều chỉnh 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:

<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>Một đoạn văn bản...</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>Một đoạn văn bản...</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>Bài viết phổ biến</h3>
      <div class="fakeimg">Hình ảnh</div><br>
      <div class="fakeimg">Hình ảnh</div><br>
      <div class="fakeimg">Hình ảnh</div>
    </div>
    <div class="card">
      <h3>Theo dõi tôi</h3>
      <p>Một đoạn văn bản...</p>
    </div>
  </div>
</div>
<div class="footer">
  <h2>Chân trang</h2>
</div>

Bước hai - Thêm CSS:

* {
  box-sizing: border-box;
}
body {
  font-family: Arial;
  padding: 20px;
  background: #f1f1f1;
}
/* Đầu trang / tiêu đề blog */
.header {
  padding: 30px;
  font-size: 40px;
  text-align: center;
  background: white;
}
/* Tạo hai cột không bằng nhau, trôi vào nhau */
/* Cột trái */
.leftcolumn {
  float: left;
  width: 75%;
}
/* Cột phải */
.rightcolumn {
  float: left;
  width: 25%;
  padding-left: 20px;
}
/* Ảnh giả */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
/* Thêm hiệu ứng thẻ cho bài viết */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}
/* Xóa trôi sau cột */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Chân trang */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
/* Lập kế hoạch tương ứng - Khi độ rộng màn hình nhỏ hơn 800px, hai cột sẽ堆叠 lại với nhau thay vì đặt ngang */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {
    width: 100%;
    padding: 0;
  }
}

thử trực tiếp