在我們訪問一個網站時，總會看到各種各樣的排版和布局，這些排版和布局都離不開HTML和CSS的幫助。HTML負責文本和結構的呈現，而CSS用于控制文本和結構的樣式，通過定義CSS樣式規則，我們可以很輕松地控制網頁上每一個元素的樣式和布局。

HTML中最基本的元素是"div"元素，它可以被用來分割一個網頁或一個區域，并且可以為每個區域指定不同的樣式，從而生成一種復雜的布局。下面是一個基本的"div"代碼示例。

<div class="container">
<div class="header">
<h1>這是網頁的標題</h1>
</div>
<div class="content">      
<p>這里是網頁的主體內容</p>      
</div>   
<div class="footer">      
<p>這里是網頁的底部內容</p>      
</div>
</div>

以上的代碼使用了class屬性來對不同的"div"元素賦予不同的樣式。例如，container類可以用來定義整個網頁的布局，header類可以用來定義網頁的頂部，content類可以用來定義網頁的主體，而footer類可以用來定義網頁的底部。

CSS用來定義HTML元素的樣式。例如，以下代碼用CSS將上述HTML中定義的類進行樣式設計：

.container {
width: 80%;
margin: 0 auto;
background-color: #f2f2f2;
}
.header {
background-color: #333;
color: #fff;
padding: 20px;
}
.content {
padding: 20px;
}
.footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}

以上代碼定義了每個類的背景顏色、字體顏色、內邊距和居中等屬性，以此來控制整個網頁的樣式。

在實際開發中，我們通常使用CSS框架來加速布局和設計。例如，Bootstrap是一個流行的CSS框架，它可以為網頁提供快速和現代的響應式設計。

在開發網頁時，HTML與CSS是不可分離的。通過使用"div"元素和CSS樣式，我們可以實現想要的布局和樣式，從而為網頁帶來更好的視覺效果和用戶體驗。