【揭秘CSS布局】經典案例分析，掌握網頁設計實戰技巧

1. 引言

CSS規劃是網頁計劃中弗成或缺的一環，它決定了網頁的構造跟視覺後果。經由過程公道應用CSS規劃技能，可能發明出既美不雅又實用的網頁。本文將經由過程經典案例分析，幫助讀者控制CSS規劃的實戰技能。

2. 盒模型與規劃基本

2.1 盒模型

盒模型是CSS規劃的基本，每個HTML元素都可能視為一個盒子，包含內容區（content）、內邊距（padding）、邊框（border）跟外邊距（margin）。

div {
  width: 300px;
  padding: 20px;
  border: 1px solid black;
  margin: 10px;
}

2.2 流式規劃

流式規劃是最罕見的規劃方法，它使網頁內容可能順應差別大小的屏幕。

.container {
  width: 100%;
  padding: 0 20px;
}
.item {
  width: 20%;
  float: left;
  box-sizing: border-box;
}

3. 經典規劃案例分析

3.1 流式規劃案例分析

案例描述：製作一個呼應式兩列規劃，左側牢固寬度，右側自順應寬度。

HTML構造：

<div class="container">
  <div class="left">左側內容</div>
  <div class="right">右側內容</div>
</div>

CSS款式：

.container {
  overflow: hidden;
}
.left {
  width: 200px;
  float: left;
}
.right {
  margin-left: 200px;
}

3.2 Flexbox規劃案例分析

案例描述：利用Flexbox實現一個三列規劃，旁邊列自順應寬度，兩側列牢固寬度。

HTML構造：

<div class="container">
  <div class="left">左側內容</div>
  <div class="center">旁邊內容</div>
  <div class="right">右側內容</div>
</div>

CSS款式：

.container {
  display: flex;
}
.left,
.right {
  width: 150px;
}
.center {
  flex-grow: 1;
}

3.3 Grid規劃案例分析

案例描述：利用Grid規劃實現一個兩行三列的呼應式規劃。

HTML構造：

<div class="container">
  <div class="row">
    <div class="cell">單位格1</div>
    <div class="cell">單位格2</div>
    <div class="cell">單位格3</div>
  </div>
  <div class="row">
    <div class="cell">單位格4</div>
    <div class="cell">單位格5</div>
    <div class="cell">單位格6</div>
  </div>
</div>

CSS款式：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
}
.row {
  display: flex;
}
.cell {
  flex: 1;
}

4. 總結

經由過程本文的經典案例分析，讀者可能控制CSS規劃的實戰技能。在現實開辟中，可能根據須要抉擇合適的規劃方法，發明出美不雅實用的網頁。