本指導書旨在幫助初學者掌握div+css技術，進一步提高頁面的布局效果。下面將就如何使用div+css進行頁面布局作為一個參考進行簡要介紹。
/* css樣式 */
/* 設置整個頁面的寬度 */
body{
width: 960px;
}
/* 定義header的屬性 */
header{
height: 100px;
background-color: #FFF;
}
/* 定義left-block的屬性 */
.left-block{
width: 200px;
height: 500px;
float: left;
background-color: #EEE;
}
/* 定義right-block的屬性 */
.right-block{
width: 760px;
height: 500px;
float: left;
}
/* 定義footer的屬性 */
footer{
height: 50px;
background-color: #999;
}以上是一段常用于頁面布局的css樣式表代碼。其中，我們設置了整個頁面的寬度為960px，header的高度為100px，背景顏色為白色，left-block的寬度為200px，高度為500px，浮動在左側，背景顏色為灰色，right-block的寬度為760px，高度為500px，也浮動在左側，footer的高度為50px，背景顏色為灰色。
接下來我們來看一個應用div+css進行頁面布局的實例代碼：
/* html代碼 */ <body> <header> <h1>My header</h1> </header> <div class="left-block"> <p>左側欄目內容</p> </div> <div class="right-block"> <p>右側欄目內容</p> </div> <footer> <p>@2019 All Rights Reserved</p> </footer> </body>
以上是頁面布局的HTML代碼。其中，我們使用header標簽定義了頁面的頂部，使用left-block和right-block兩個div塊屬性定義了左右兩側兩個主要區域的內容，使用footer標簽定義了頁面的底部。
總的來說，div+css技術是目前最常用且優秀的頁面布局方案之一。通過合理地運用div和css的特性，可以輕松實現自己所期望的頁面布局效果。希望本指導書能夠為學習者提供一些參考，幫助各位學有所成。
上一篇css注釋標簽與html
下一篇div+css技術簡介