Rumah > Artikel > hujung hadapan web > Hanya kuasai rangka kerja CSS dan cepat buat halaman web yang cantik

Hanya kuasai rangka kerja CSS dan cepat buat halaman web yang cantik

WBOYasal: 2024-01-05 16:37:291042semak imbas

Mudah untuk bermula dengan rangka kerja CSS dan membuat halaman web yang cantik dengan mudah diperlukan

Dengan pembangunan Internet yang berterusan, reka bentuk web telah menjadi bidang yang penting. Kemunculan rangka kerja CSS (Cascading Style Sheet) telah sangat memudahkan proses reka bentuk web, membolehkan pengguna biasa membuat halaman web yang cantik dengan mudah. Dalam artikel ini, kami akan memperkenalkan beberapa rangka kerja CSS yang biasa digunakan dan menyediakan contoh kod khusus untuk membantu pembaca bermula dengan cepat.

1. Rangka kerja Bootstrap
Bootstrap ialah salah satu rangka kerja CSS yang paling popular pada masa ini. Ia mempunyai gaya dan komponen yang kaya, reka bentuk responsif, dan sokongan dan dokumentasi yang meluas. Di bawah ialah contoh kod halaman web ringkas yang dibina menggunakan rangka kerja Bootstrap.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Bootstrap Website</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
</head>

<body>
  <header class="bg-primary text-white text-center py-5">
    <h1>Welcome to My Website</h1>
  </header>

  <div class="container mt-5">
    <h2>About Me</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil sequi numquam rerum repellat? Fugit, ut?</p>
  </div>

  <div class="container mt-5">
    <h2>Contact Me</h2>
    <form>
      <div class="mb-3">
        <label for="name" class="form-label">Your Name</label>
        <input type="text" class="form-control" id="name">
      </div>
      <div class="mb-3">
        <label for="email" class="form-label">Your Email</label>
        <input type="email" class="form-control" id="email">
      </div>
      <div class="mb-3">
        <label for="subject" class="form-label">Subject</label>
        <input type="text" class="form-control" id="subject">
      </div>
      <div class="mb-3">
        <label for="message" class="form-label">Message</label>
        <textarea class="form-control" id="message" rows="5"></textarea>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Dalam kod di atas, kami memperkenalkan fail CSS dan JavaScript rangka kerja Bootstrap dengan merujuk pautan CDN. Kemudian gunakan kelas yang disediakan oleh Bootstrap untuk menentukan gaya dan reka letak. Sebagai contoh, kami menggunakan kelas bekas untuk mencipta bekas dan menggunakan mt-5 untuk menetapkan jidar atas dan bawah. Pada masa yang sama, kami juga menggunakan kelas bg-primary dan text-white untuk menetapkan warna latar belakang dan warna teks kepala. container类来创建一个容器，并使用mt-5来设置上下边距。同时，我们还使用了bg-primary和text-white类来设置头部的背景色和文字颜色。

二、Semantic UI框架
Semantic UI是另一个流行的CSS框架，它注重语义化的设计，并提供了丰富的主题和自定义选项。下面是一个使用Semantic UI框架构建的简单网页的代码示例。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Semantic UI Website</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
</head>

<body>
  <header class="ui inverted vertical center aligned segment">
    <h1>Welcome to My Website</h1>
  </header>

  <div class="ui container segment">
    <h2>About Me</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil sequi numquam rerum repellat? Fugit, ut?</p>
  </div>

  <div class="ui container segment">
    <h2>Contact Me</h2>
    <form class="ui form">
      <div class="field">
        <label for="name">Your Name</label>
        <input type="text" id="name">
      </div>
      <div class="field">
        <label for="email">Your Email</label>
        <input type="email" id="email">
      </div>
      <div class="field">
        <label for="subject">Subject</label>
        <input type="text" id="subject">
      </div>
      <div class="field">
        <label for="message">Message</label>
        <textarea id="message" rows="5"></textarea>
      </div>
      <button class="ui primary button" type="submit">Submit</button>
    </form>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
</body>

</html>

在上述代码中，我们通过引用CDN链接的方式引入了Semantic UI框架的CSS和JavaScript文件。然后使用Semantic UI提供的类来进行样式和布局的定义。例如，我们使用了inverted、vertical、center aligned这些类来实现头部的样式。

三、Bulma框架
Bulma是一个轻量级的CSS框架，它提供了简洁、灵活的网页设计解决方案。下面是一个使用Bulma框架构建的简单网页的代码示例。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Bulma Website</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css">
</head>

<body>
  <header class="hero is-primary is-bold">
    <h1 class="title has-text-centered">Welcome to My Website</h1>
  </header>

  <section class="section">
    <div class="container">
      <h2 class="title">About Me</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil sequi numquam rerum repellat? Fugit, ut?</p>
    </div>
  </section>

  <section class="section">
    <div class="container">
      <h2 class="title">Contact Me</h2>
      <form>
        <div class="field">
          <label class="label" for="name">Your Name</label>
          <div class="control">
            <input class="input" type="text" id="name">
          </div>
        </div>
        <div class="field">
          <label class="label" for="email">Your Email</label>
          <div class="control">
            <input class="input" type="email" id="email">
          </div>
        </div>
        <div class="field">
          <label class="label" for="subject">Subject</label>
          <div class="control">
            <input class="input" type="text" id="subject">
          </div>
        </div>
        <div class="field">
          <label class="label" for="message">Message</label>
          <div class="control">
            <textarea class="textarea" id="message" rows="5"></textarea>
          </div>
        </div>
        <div class="field">
          <div class="control">
            <button class="button is-primary" type="submit">Submit</button>
          </div>
        </div>
      </form>
    </div>
  </section>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/js/bulma.min.js"></script>
</body>

</html>

在上述代码中，我们通过引用CDN链接的方式引入了Bulma框架的CSS和JavaScript文件。然后使用Bulma提供的类来进行样式和布局的定义。例如，我们使用了hero、is-primary、is-bold

2. Rangka Kerja UI Semantik

UI Semantik ialah satu lagi rangka kerja CSS popular yang memfokuskan pada reka bentuk semantik dan menyediakan tema yang kaya dan pilihan penyesuaian. Di bawah ialah contoh kod halaman web ringkas yang dibina menggunakan rangka kerja UI Semantik.
rrreee

Dalam kod di atas, kami memperkenalkan fail CSS dan JavaScript bagi rangka kerja UI Semantik dengan merujuk pautan CDN. Kemudian gunakan kelas yang disediakan oleh Semantic UI untuk menentukan gaya dan reka letak. Sebagai contoh, kami menggunakan kelas seperti terbalik, menegak dan center aligned untuk melaksanakan gaya kepala. 🎜🎜3. Bulma Framework🎜Bulma ialah rangka kerja CSS ringan yang menyediakan penyelesaian reka bentuk web yang mudah dan fleksibel. Di bawah ialah contoh kod halaman web ringkas yang dibina menggunakan rangka kerja Bulma. 🎜rrreee🎜Dalam kod di atas, kami memperkenalkan fail CSS dan JavaScript rangka kerja Bulma dengan merujuk pautan CDN. Kemudian gunakan kelas yang disediakan oleh Bulma untuk menentukan gaya dan reka letak. Contohnya, kami menggunakan kelas seperti hero, is-primary dan is-bold untuk melaksanakan gaya kepala. 🎜🎜Ringkasan🎜Di atas ialah pengenalan ringkas kepada tiga rangka kerja CSS yang biasa digunakan dan menyediakan contoh kod khusus. Dengan menggunakan rangka kerja ini, anda boleh membuat halaman web yang cantik dengan cepat dan mudah. Walau bagaimanapun, sebagai pemula, anda tidak seharusnya terlalu bergantung pada rangka kerja pada mulanya, tetapi harus mempelajari secara beransur-ansur sintaks asli CSS dan kemahiran susun atur untuk lebih memahami dan menguasai intipati reka bentuk web. Saya harap artikel ini berguna untuk pembelajaran anda, dan saya doakan anda berjaya dalam perjalanan reka bentuk web anda! 🎜

Atas ialah kandungan terperinci Hanya kuasai rangka kerja CSS dan cepat buat halaman web yang cantik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript 架构 css bootstrap 样式表 ui

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Panduan Mudah: Cipta rangka kerja CSS diperibadikan dalam lima langkah sahajaArtikel seterusnya：Panduan Mudah: Cipta rangka kerja CSS diperibadikan dalam lima langkah sahaja

Artikel berkaitan

Lihat lagi