本指導(dǎo)書旨在幫助初學(xué)者掌握div+css技術(shù)，進(jìn)一步提高頁面的布局效果。下面將就如何使用div+css進(jìn)行頁面布局作為一個(gè)參考進(jìn)行簡要介紹。
/* css樣式 */
/* 設(shè)置整個(gè)頁面的寬度 */
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樣式表代碼。其中，我們設(shè)置了整個(gè)頁面的寬度為960px，header的高度為100px，背景顏色為白色，left-block的寬度為200px，高度為500px，浮動(dòng)在左側(cè)，背景顏色為灰色，right-block的寬度為760px，高度為500px，也浮動(dòng)在左側(cè)，footer的高度為50px，背景顏色為灰色。
接下來我們來看一個(gè)應(yīng)用div+css進(jìn)行頁面布局的實(shí)例代碼：
/* html代碼 */ <body> <header> <h1>My header</h1> </header> <div class="left-block"> <p>左側(cè)欄目內(nèi)容</p> </div> <div class="right-block"> <p>右側(cè)欄目內(nèi)容</p> </div> <footer> <p>@2019 All Rights Reserved</p> </footer> </body>
以上是頁面布局的HTML代碼。其中，我們使用header標(biāo)簽定義了頁面的頂部，使用left-block和right-block兩個(gè)div塊屬性定義了左右兩側(cè)兩個(gè)主要區(qū)域的內(nèi)容，使用footer標(biāo)簽定義了頁面的底部。
總的來說，div+css技術(shù)是目前最常用且優(yōu)秀的頁面布局方案之一。通過合理地運(yùn)用div和css的特性，可以輕松實(shí)現(xiàn)自己所期望的頁面布局效果。希望本指導(dǎo)書能夠?yàn)閷W(xué)習(xí)者提供一些參考，幫助各位學(xué)有所成。