Cara membuat susun atur siaran responsif menggunakan HTML dan CSS-html tutorial-php.cn

Cara membuat susun atur siaran responsif menggunakan HTML dan CSS

王林

Lepaskan： 2023-10-20 13:22:42

asal

1060 orang telah melayarinya

Cara membuat susun atur siaran responsif menggunakan HTML dan CSS

Cara membuat susun atur artikel responsif menggunakan HTML dan CSS

Dalam pembangunan web moden, reka bentuk responsif telah menjadi standard. Reka bentuk responsif boleh menyesuaikan diri dengan saiz skrin dan jenis peranti yang berbeza, menjadikan tapak web mempunyai pengalaman pengguna yang baik pada mana-mana peranti. Dalam artikel ini, kami akan meneroka cara membuat reka letak siaran responsif menggunakan HTML dan CSS.

1. Struktur HTML

Sebelum mula menulis CSS, kita mesti membina struktur HTML asas. Dalam contoh ini, kami akan menggunakan struktur standard HTML5.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式文章排版布局</title>
</head>
<body>
  <header>
    <h1>文章标题</h1>
    <p>发布日期：2022年1月1日</p>
  </header>
  <div class="content">
    <article>
      <h2>第一节</h2>
      <p>文章内容.....</p>
    </article>
    <article>
      <h2>第二节</h2>
      <p>文章内容.....</p>
    </article>
    <article>
      <h2>第三节</h2>
      <p>文章内容.....</p>
    </article>
  </div>
  <footer>
    <p>作者：XXX</p>
  </footer>
</body>
</html>

Salin selepas log masuk

2. Gaya CSS

Kini kami boleh menambah gaya CSS pada reka letak artikel kami. Dalam contoh ini kita akan menggunakan susun atur flexbox.

/* 全局样式 */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

/* 头部样式 */
header {
  background-color: #f0f0f0;
  padding: 20px;
}

/* 内容样式 */
.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* 文章样式 */
article {
  flex-basis: calc(33.33% - 20px);
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f9f9f9;
}

/* 脚部样式 */
footer {
  background-color: #f0f0f0;
  padding: 20px;
}

Salin selepas log masuk

Dalam kod di atas, gaya ditetapkan untuk pengepala, kandungan dan pengaki. Bahagian kandungan menggunakan susun atur flexbox, dan setiap artikel menggunakan fungsi calc() untuk menetapkan lebar, yang boleh mengekalkan susunan di bawah saiz skrin yang berbeza.

3. Tambah gaya responsif

Untuk mencapai reka letak artikel responsif, kami boleh menggunakan pertanyaan media untuk menetapkan gaya untuk saiz skrin yang berbeza.

/* 响应式样式 */
@media screen and (max-width: 768px) {
  .content {
    flex-direction: column;
  }
  
  article {
    flex-basis: 100%;
  }
}

Salin selepas log masuk

Dalam kod di atas, apabila lebar skrin kurang daripada 768px, kami menetapkan arah lentur kandungan ke lajur supaya artikel disusun dalam arah menegak. Pada masa yang sama, kami menetapkan lebar artikel kepada 100%, supaya setiap artikel menduduki baris yang berasingan.

Ringkasan

Dengan menggunakan HTML dan CSS, kami boleh membuat susun atur artikel responsif dengan mudah. Dengan menggunakan pertanyaan media, kami boleh menetapkan gaya yang berbeza untuk saiz skrin yang berbeza. Kaedah ini boleh memastikan bahawa artikel itu boleh dibaca dengan baik pada peranti yang berbeza. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Cara membuat susun atur siaran responsif menggunakan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!