用css網(wǎng)站布局之十步實(shí)錄！(三)_DIV+CSS實(shí)例
教程Tag：暫無Tag,歡迎添加,賺取U幣!
第三步：將網(wǎng)站分為五個(gè)div，網(wǎng)頁基本布局的基礎(chǔ)：
1.將“第一步”提到的五個(gè)部分都放入盒子中，在html文件中寫入：
2.為了將五個(gè)部分區(qū)分開來，我們將這五個(gè)部分用不同的背景顏色標(biāo)示出來，在css文件寫入：
表現(xiàn)如下：
1.將“第一步”提到的五個(gè)部分都放入盒子中，在html文件中寫入：
示例代碼 [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.為了將五個(gè)部分區(qū)分開來，我們將這五個(gè)部分用不同的背景顏色標(biāo)示出來，在css文件寫入：
示例代碼 [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)如下：
相關(guān)DIV+CSS實(shí)例：
- 固定div容器的寬高，圖片居中（圖片不限制大�。�
- 用css制作有滾動條的居中彈出框
- 鼠標(biāo)指住(hover)變色的按鈕演示demo
- 10個(gè)很酷的涂鴉風(fēng)格國外網(wǎng)店設(shè)計(jì)展示
- jquery模擬瀏覽器滾動條效果
- 仿谷歌google的搜索框下拉提示列表效果
- JS顯示網(wǎng)頁最后更新時(shí)間
- CSS技巧：text-indent隱藏文字(以圖換字)
- CSS實(shí)例：三列自適應(yīng)等高且中列寬度自適應(yīng)
- DivCSS布局實(shí)例：很實(shí)用的圖文混排CSS列表-富有語義
- DivCSS實(shí)例：CSS菜單Flash效果用圖片模擬實(shí)現(xiàn)
- DivCSS布局實(shí)例用dldtdd來制作列表
DIV+CSS實(shí)例Rss訂閱Div+Css教程搜索
DIV+CSS實(shí)例推薦
- CSS實(shí)例教程：用列表ul制作CSS橫向菜單的基礎(chǔ)知識
- CSS去除表格td默認(rèn)間距及制作1px細(xì)線表格
- CSS折疊菜單一例：可自由伸縮折疊
- CSS實(shí)例教程：CSS橫向菜單會動的小豎條
- 用css網(wǎng)站布局之十步實(shí)錄！(九)
- DIVCSS實(shí)例：一款不錯(cuò)的CSS翻頁效果(DIGG)
- DivCSS布局實(shí)例：詳解建立Flash上面浮動層
- Div CSS實(shí)例：如何用CSS實(shí)現(xiàn)背景半透明效果
- CSS布局實(shí)例：隱藏input文字
- CSS實(shí)例：如何讓無空格的長字符在IE和FF下面實(shí)現(xiàn)自動換行？
猜你也喜歡看這些
- 相關(guān)鏈接：
- 教程說明：
DIV+CSS實(shí)例-用css網(wǎng)站布局之十步實(shí)錄！(三)
。