Bagaimana membuat: tata letak blog

Belajar bagaimana menggunakan CSS untuk membuat tata letak blog responsif.

Belajar bagaimana membuat tata letak blog responsif, yang berubah antara dua kolom dan kolom penuh berdasarkan lebar layar.

Sesuaikan ukuran jendela browser Anda untuk melihat efek responsif:

Coba sendiri

Bagaimana membuat tata letak blog

Langkah pertama - Tambahkan HTML:

<div class="header">
  <h2>Nama Blog</h2>
</div>
<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>Judul Judul</h2>
      <h5>Deskripsi Judul, 7 Desember 2017</h5>
      <div class="fakeimg" style="height:200px;">Gambar</div>
      <p>Teks beberapa hal..</p>
    </div>
    <div class="card">
      <h2>Judul Judul</h2>
      <h5>Deskripsi Judul, 2 September 2017</h5>
      <div class="fakeimg" style="height:200px;">Gambar</div>
      <p>Teks beberapa hal..</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>Tentang Saya</h2>
      <div class="fakeimg" style="height:100px;">Gambar</div>
      <p>Beberapa teks tentang saya dalam kekeliruan yang diizinkan oleh deserunt mollit anim...</p>
    </div>
    <div class="card">
      <h3 Postingan Populer</h3>
      <div class="fakeimg">Gambar</div><br>
      <div class="fakeimg">Gambar</div><br>
      <div class="fakeimg">Gambar</div>
    </div>
    <div class="card">
      <h3Ikuti Saya</h3>
      <p>Teks beberapa hal..</p>
    </div>
  </div>
</div>
<div class="footer">
  <h2>Kaki Halaman</h2>
</div>

Langkah kedua - Tambahkan CSS:

* {
  box-sizing: border-box;
}
body {
  font-family: Arial;
  padding: 20px;
  background: #f1f1f1;
}
/* Judul halaman / judul blog */
.header {
  padding: 30px;
  font-size: 40px;
  text-align: center;
  background: white;
}
/* Membuat dua kolom yang berbeda, mengambang satu sama lain */
/* Kolom kiri */
.leftcolumn {
  float: left;
  width: 75%;
}
/* Kolom kanan */
.rightcolumn {
  float: left;
  width: 25%;
  padding-left: 20px;
}
/* Gambar palsu */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
/* Menambah efek kartu untuk artikel */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}
/* Membersihkan floating setelah kolom */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Kaki halaman */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
/* Layout responsif - Ketika lebar layar kurang dari 800px, dua kolom ditumpuk di tempat berlindung bukan bersama-sama */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {
    width: 100%;
    padding: 0;
  }
}

Coba sendiri

Halaman yang berhubungan

Panduan:Tata letak situs web CSS

Panduan:Desain halaman web responsif CSS