如何使用 div 和 CSS 來創建漂亮的網頁布局？

HTML 是用于創建網頁內容的標記語言，而 CSS 是用于定義網頁布局的樣式語言。在創建網頁時，通常需要使用 HTML 和 CSS 來創建頁面結構，并使用 JavaScript 來添加交互性。其中，CSS 用于定義頁面的布局、樣式、顏色和字體等，而 HTML 用于創建頁面的內容。

下面是一些使用 div 和 CSS 創建漂亮網頁布局的基本步驟：

1. 理解 div 和 CSS 的工作原理

div 和 CSS 是用于創建網頁布局的基本框架。div 是一種容器，可以包含其他 div 元素，而 CSS 可以定義 div 元素的樣式和外觀。通過使用 div 和 CSS，可以創建各種類型的網頁布局，例如表格布局、導航欄布局、段落布局等等。

2. 創建 div 元素

在 HTML 中，可以使用 div 元素來創建各種類型的布局。例如，可以創建一個表格布局，如下所示：

<div class="table">

<table>

<thead>

<tr>

<th>姓名</th>

<th>年齡</th>

<th>性別</th>

</tr>

</thead>

<tbody>

<tr>

<td>張三</td>

<td>20</td>

<td>男</td>

</tr>

<tr>

<td>李四</td>

<td>22</td>

<td>女</td>

</tr>

</tbody>

</table>

</div>

在這個例子中，使用 div 元素創建了一個表格布局。使用 CSS 可以定義表格的樣式，例如表格背景色、邊框樣式、單元格字體和顏色等。

3. 添加 div 元素

可以使用 div 元素來添加其他各種類型的元素，例如導航欄、段落等。例如，可以創建一個導航欄布局，如下所示：

<div class="nav">

<ul>

<li><a href="#">首頁</a></li>

<li><a href="#">產品</a></li>

<li><a href="#">服務</a></li>

</ul>

</div>

在這個例子中，使用 div 元素創建了一個導航欄布局。使用 CSS 可以定義導航欄的樣式，例如導航欄字體、顏色、背景色等。

4. 使用 CSS 進行布局

使用 CSS 可以進行復雜的布局。例如，可以使用 CSS 表格布局來創建表格布局。使用 CSS 可以定義表格的背景色、邊框樣式、單元格字體和顏色等。

下面是一個簡單的 CSS 表格布局示例：

.table {

border-collapse: collapse;

width: 300px;

th, td {

border: 1px solid #ccc;

padding: 8px;

background-color: #f2f2f2;

在這個例子中，使用 CSS 創建了一個簡單的表格布局。使用 th 元素來定義表格的單元格，并使用 background-color 屬性定義單元格的背景顏色。

通過以上步驟，可以創建各種類型的網頁布局，并使用 div 和 CSS 進行布局，從而打造出一個漂亮的網頁。