Tingkatkan tahap profesional reka bentuk web dan pelajari rangka kerja CSS biasa

Kuasai rangka kerja CSS biasa untuk menjadikan reka bentuk web anda lebih profesional

Dalam era Internet hari ini, reka bentuk web telah menjadi bidang yang sangat penting. Reka bentuk laman web yang baik bukan sahaja mestilah mempunyai pengalaman pengguna yang baik, tetapi juga mempunyai penampilan yang menarik dan rasa profesional. Untuk mencapai matlamat ini, rangka kerja CSS adalah alat yang sangat diperlukan. Artikel ini akan memperkenalkan beberapa rangka kerja CSS biasa dan menyediakan beberapa contoh kod khusus untuk membantu anda menguasai rangka kerja ini dengan lebih baik dan menjadikan reka bentuk web anda lebih profesional.

1. Bootstrap
   Bootstrap ialah salah satu rangka kerja CSS paling popular di luar sana. Ia menyediakan banyak gaya dan komponen untuk membantu anda membina halaman web responsif dengan cepat. Berikut ialah kod sampel ringkas yang menunjukkan cara membuat bar navigasi menggunakan Bootstrap:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">网站名称</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">首页</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">产品</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">关于我们</a>
      </li>
    </ul>
  </div>
</nav>

2. Foundation
   Foundation ialah satu lagi rangka kerja CSS popular yang menyediakan pelbagai sistem dan komponen grid fleksibel yang sesuai untuk membina web responsif dan apl mudah alih. Berikut ialah contoh kod untuk mencipta butang menggunakan Foundation:

<button class="button">点击这里</button>

3. Bulma
   Bulma ialah rangka kerja CSS ringan yang menggunakan teknologi CSS moden untuk menyusun halaman web dengan cara yang ringkas dan intuitif. Berikut ialah contoh kod yang menggunakan Bulma untuk mencipta bentuk ringkas:

<form>
  <div class="field">
    <label class="label">用户名</label>
    <div class="control">
      <input class="input" type="text" placeholder="请输入用户名">
    </div>
  </div>
  <div class="field">
    <label class="label">密码</label>
    <div class="control">
      <input class="input" type="password" placeholder="请输入密码">
    </div>
  </div>
  <div class="field">
    <div class="control">
      <button class="button is-primary">登录</button>
    </div>
  </div>
</form>

4. UI Semantik
   UI Semantik ialah rangka kerja CSS yang memfokuskan pada semantik Ia menggunakan bahasa semula jadi untuk mentakrifkan gaya, menjadikan penulisan kod lebih mudah dibaca dan difahami. . Berikut ialah contoh kod untuk mencipta kad menggunakan UI Semantik:

<div class="ui card">
  <div class="image">
    <img  src="image.jpg" alt="Tingkatkan tahap profesional reka bentuk web dan pelajari rangka kerja CSS biasa" >
  </div>
  <div class="content">
    <div class="header">卡片标题</div>
    <div class="meta">发布于今天</div>
    <div class="description">这是卡片的描述内容。</div>
  </div>
  <div class="extra content">
    <span class="right floated">
      <i class="heart outline icon"></i>
      喜欢
    </span>
    <span>
      <i class="comment icon"></i>
      评论
    </span>
  </div>
</div>

Di atas hanyalah beberapa rangka kerja CSS biasa dan contoh kod mudah Untuk menguasai rangka kerja ini dengan lebih baik, anda disyorkan untuk pergi ke tapak web rasmi lihat dokumentasi terperinci dan kod sampel , dan gunakannya pada projek anda sendiri. Dengan mempelajari dan menggunakan rangka kerja CSS ini, anda boleh mereka bentuk dan membangunkan halaman web dengan lebih cekap, menjadikan reka bentuk web anda lebih profesional.

Atas ialah kandungan terperinci Tingkatkan tahap profesional reka bentuk web dan pelajari rangka kerja CSS biasa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!