Cepat bina tapak web yang hebat: Panduan reka bentuk rangka kerja reka letak halaman web CSS-tutorial css-php.cn

Cepat bina tapak web yang hebat: Panduan reka bentuk rangka kerja reka letak halaman web CSS

王林

Lepaskan： 2024-01-16 09:44:06

asal

910 orang telah melayarinya

Cepat bina tapak web yang hebat: Panduan reka bentuk rangka kerja reka letak halaman web CSS

Sebagai pereka web, tugas penting ialah mereka bentuk rangka kerja susun atur halaman web CSS yang sangat baik. Rangka kerja jenis ini boleh menjadikan tapak web anda lebih cantik, lebih mudah digunakan dan meningkatkan pengalaman pengguna. Dalam artikel ini, kami akan memberikan anda beberapa garis panduan reka bentuk rangka kerja reka letak halaman web CSS, digabungkan dengan contoh kod khusus, untuk membantu anda membina tapak web yang sangat baik dengan cepat.

1 Pilih rangka kerja CSS yang sesuai

Sebelum mereka bentuk rangka kerja susun atur halaman web CSS, anda perlu memilih rangka kerja CSS yang sesuai terlebih dahulu. Terdapat banyak rangka kerja CSS untuk dipilih, seperti Bootstrap, Foundation, Materialize dan banyak lagi. Adalah penting untuk ambil perhatian bahawa setiap rangka kerja CSS mempunyai kelebihan dan keburukan tersendiri, dan anda perlu memilih rangka kerja yang sesuai dengan anda berdasarkan keperluan dan keutamaan anda.

Sebagai contoh, jika anda perlu membangunkan tapak web responsif dengan cepat, maka Bootstrap mungkin salah satu rangka kerja yang paling sesuai. Sistem grid terbina dalam membolehkan anda membuat reka letak responsif dengan cepat, dan terdapat banyak kelas CSS yang tersedia untuk mereka bentuk pelbagai elemen yang berbeza.

Berikut ialah contoh kod untuk struktur tapak web asas yang dibuat menggunakan Bootstrap:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

<div class="container">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
</div>

</body>
</html>

Salin selepas log masuk

2. Buat sistem grid

Mencipta sistem grid ialah langkah penting dalam mereka bentuk rangka kerja susun atur halaman web CSS. Sistem grid yang baik boleh menjadikan susun atur tapak web anda lebih konsisten dan stabil, serta membolehkan anda mengurus dan susun atur pelbagai elemen dengan lebih mudah.

Berikut ialah kod sistem grid sampel:

.container {
  margin: 0 auto;
  max-width: 960px;
  padding-left: 15px;
  padding-right: 15px;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}

.col {
  float: left;
  padding-left: 15px;
  padding-right: 15px;
}

.col-1 {
  width: 8.33333%;
}

.col-2 {
  width: 16.66667%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.33333%;
}

.col-5 {
  width: 41.66667%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.33333%;
}

.col-8 {
  width: 66.66667%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.33333%;
}

.col-11 {
  width: 91.66667%;
}

.col-12 {
  width: 100%;
}

Salin selepas log masuk

Dalam kod sampel ini, kami mencipta kelas .container dan kelas .row Kelas kontena bertanggungjawab untuk mengehadkan lebar halaman web kepada julat tertentu . Kelas .row ditakrifkan untuk menetapkan margin negatif untuk baris.

Selain itu, kami telah menentukan kelas .col yang merupakan blok binaan sistem grid kami. Kami menggunakan sifat apungan (kiri) untuk menjajarkan lajur seperti yang diharapkan. Untuk saiz lajur yang berbeza, kami mentakrifkan kelas col-1 hingga col-12, setiap kelas mempunyai lebar yang berbeza, dan jumlah lebar ialah 100%.

Apabila menggunakan sistem grid ini, setiap bekas harus mempunyai kelas .container, setiap baris harus mempunyai kelas .row dan lajur seperti .col-4 harus digunakan untuk elemen yang memerlukan lebar 33.33333%.

3 Jadikan tapak web anda responsif

Rangka kerja reka letak web CSS yang baik harus responsif, yang bermaksud tapak web anda boleh menyesuaikan diri dengan saiz skrin dan peranti yang berbeza. Untuk melaksanakan laman web responsif, kita perlu menggunakan pertanyaan media.

Berikut ialah kod sampel:

/* 在768px宽度以下屏幕上隐藏.slide类 */
@media only screen and (max-width: 767px) {
  .slide {
    display: none;
  }
}

/* 在768px宽度以下屏幕上将.container-fluid类更改为.container类 */
@media only screen and (max-width: 767px) {
  .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 在992px宽度以下屏幕上将.col-md-4类更改为.col-xs-6类 */
@media only screen and (max-width: 991px) {
  .col-md-4 {
    width: 33.33333%;
  }
}

@media only screen and (max-width: 767px) {
  .col-xs-6 {
    width: 50%;
  }
}

/* 在小屏幕上使图片缩小 */
@media only screen and (max-width: 767px) {
  img {
    max-width: 100%;
  }
}

Salin selepas log masuk

Dalam kod sampel ini, kami mentakrifkan tiga pertanyaan media. Pertanyaan media pertama menyembunyikan elemen dengan kelas .slide pada skrin di bawah lebar 768px. Pertanyaan media kedua menukar kelas .container-cecair kepada kelas .container agar sesuai dengan skrin kecil dan meningkatkan jidar serta padding. Pertanyaan media ketiga menukar kelas .col-md-4 kepada kelas .col-xs-6 agar sesuai dengan skrin kecil dan menjadikan imej mengecut pada skrin kecil.

4. Pertimbangan reka bentuk lain

Selain garis panduan reka bentuk yang dinyatakan di atas, terdapat beberapa pertimbangan reka bentuk lain.

Sebagai contoh semasa mereka bentuk laman web, anda perlu memastikan laman web anda mudah digunakan dan dinavigasi. Anda boleh melaksanakan navigasi menggunakan bar navigasi dengan menu lungsur turun, serbuk roti, navigasi sisi, dsb.

Selain itu, pastikan tapak web anda menarik secara visual. Anda boleh menggunakan warna, animasi, kecerunan, imej, dsb. untuk meningkatkan kesan visual tapak web anda dan menjadikannya lebih menarik.

Akhir sekali, kita perlu mempertimbangkan prestasi laman web. Menggunakan sprite CSS untuk mengurangkan permintaan HTTP, memampatkan fail CSS dan Javascript, sumber statik cache, dll. semuanya boleh meningkatkan prestasi tapak web.

Ringkasan

Mereka bentuk rangka kerja reka letak web CSS ialah tugas yang kompleks dengan banyak faktor berbeza untuk dipertimbangkan. Saya berharap garis panduan reka bentuk rangka kerja reka letak halaman web CSS dan contoh kod khusus yang disediakan dalam artikel ini dapat membantu anda membina tapak web yang cemerlang dengan cepat dan meningkatkan pengalaman dan prestasi pengguna.

Atas ialah kandungan terperinci Cepat bina tapak web yang hebat: Panduan reka bentuk rangka kerja reka letak halaman web CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!