用css網(wǎng)站布局之十步實錄！(三)_DIV+CSS實例
教程Tag：暫無Tag,歡迎添加,賺取U幣!
第三步：將網(wǎng)站分為五個div，網(wǎng)頁基本布局的基礎：
1.將“第一步”提到的五個部分都放入盒子中，在html文件中寫入：
2.為了將五個部分區(qū)分開來，我們將這五個部分用不同的背景顏色標示出來，在css文件寫入：
表現(xiàn)如下：
1.將“第一步”提到的五個部分都放入盒子中，在html文件中寫入：
示例代碼 [www.hl5o.cn]
<div id="page-container">
<div id="main-nav">Main Nav</div>
<div id="header">Header</div>
<div id="sidebar-a">Sidebar A</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
<div id="main-nav">Main Nav</div>
<div id="header">Header</div>
<div id="sidebar-a">Sidebar A</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
2.為了將五個部分區(qū)分開來，我們將這五個部分用不同的背景顏色標示出來，在css文件寫入：
示例代碼 [www.hl5o.cn]
#main-nav {
background: red;
height: 50px;
}
#header {
background: blue;
height: 150px;
}
#sidebar-a {
background: darkgreen;
}
#content {
background: green;
}
#footer {
background: orange;
height: 66px;
}
background: red;
height: 50px;
}
#header {
background: blue;
height: 150px;
}
#sidebar-a {
background: darkgreen;
}
#content {
background: green;
}
#footer {
background: orange;
height: 66px;
}
表現(xiàn)如下：
相關DIV+CSS實例：
- 相關鏈接：
- 教程說明：
DIV+CSS實例-用css網(wǎng)站布局之十步實錄！(三)
。