<div>是HTML中的一個重要標簽，用于創建一個具有特定樣式的區塊。而CSS（層疊樣式表）是一種用于描述HTML文檔外觀的樣式語言。在網頁設計中，我們經常需要使用CSS來自定義頁面的樣式，使其具有獨特的外觀和布局。
在使用CSS時，我們可以使用自制的樣式模板，以便更高效和簡潔地設計網頁。這些自制的CSS模板可以幫助我們統一管理樣式，提高代碼重用性，并降低開發時間和維護成本。
下面是幾個使用CSS自制模板的案例，來說明其用途和實際應用方法。
第一個案例是創建一個簡單的頁面布局。我們可以使用自制的CSS模板實現自定義的頁面布局，而不必從頭開始編寫樣式。例如，我們可以創建一個名為“layout.css”的CSS文件，其中包含以下代碼：

.container {
width: 80%;
margin: 0 auto;
}
<br>
.header {
background-color: #f5f5f5;
padding: 20px;
}
<br>
.content {
margin-top: 20px;
}
<br>
.footer {
background-color: #f5f5f5;
padding: 10px;
}

在HTML文件中，我們可以通過引入“layout.css”文件，并使用對應的類名來應用這些樣式。例如：

<div class="container">
<div class="header">
<h1>這是標題</h1>
</div>
<div class="content">
<p>這是內容</p>
</div>
<div class="footer">
<p>這是頁腳</p>
</div>
</div>

這樣，我們就可以快速創建一個簡單的頁面布局，只需添加對應的類名即可。
第二個案例是創建一個響應式的網格布局。使用自制的CSS模板，我們可以輕松創建出具有響應式特性的網格布局。例如，我們可以創建一個名為“grid.css”的CSS文件，其中包含以下代碼：

.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}
<br>
.grid-item {
background-color: #f5f5f5;
padding: 10px;
}

在HTML文件中，我們只需引入“grid.css”文件，并在相應的元素上添加對應的類名即可實現網格布局。例如：

<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>

這樣，我們就可以輕松創建一個響應式的網格布局，方便展示多個項目或圖片。
通過上面兩個案例，我們可以看到使用自制的CSS模板可以有效地簡化網頁設計和開發過程。我們可以預定義一些常用的樣式，并在需要的時候直接引用，提高代碼的復用性和可維護性。
除了以上的例子，還有很多其他的自制CSS模板可以根據具體需求進行使用，例如按鈕樣式、導航欄樣式等。我們可以從網上的資源庫中獲取這些模板，或者根據自己的需求進行創作和定制。
最后，我希望以上的例子能幫助您更好地理解和使用自制的CSS模板。在網頁設計和開發過程中，使用這些模板可以提高工作效率，并使網頁更加美觀和專業。記住，CSS模板只是我們工具箱中的一部分，合理選擇和靈活運用才能發揮最佳效果。祝您網頁設計愉快！