站長(zhǎng)資訊網(wǎng)
之前的文章《手把手教你使用css3制作炫酷的導(dǎo)航欄效果（代碼詳解）》中，給大家介紹怎么使用css3制作炫酷的導(dǎo)航欄效果。下面本篇文章給大家介紹如何用html制作一個(gè)簡(jiǎn)單的布局的方法，我們一起看看怎么做。
生活中互聯(lián)網(wǎng)發(fā)達(dá)了，網(wǎng)頁(yè)中常常有這樣的布局，給大家分享一下看效果圖看完效果，我們來(lái)研究一下是怎么實(shí)現(xiàn)呢，給大家用于講解div+css布局的基本流程。
1、創(chuàng)建html
Html編輯代碼示例
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>
2、定義一個(gè)包含文本的div大標(biāo)題同時(shí)使用class屬性向樣式。
<div class="title">頂部</div> <div class="footer">底部</div>
3、在style之間，對(duì)body進(jìn)行樣式初始化，添加設(shè)置外邊距margin為0，內(nèi)邊距padding為0，然后使用設(shè)置文字居中text-align。
<style type="text/css"> body{text-align: center;margin: 0;padding: 0} </style>
4、在style之間，對(duì)div進(jìn)行樣式添加設(shè)置所有的div高度為200px，內(nèi)容的顏色為紅色。
div{height: 200px;color: red;}
5、在style之間，對(duì)title進(jìn)行樣式使用div創(chuàng)建網(wǎng)頁(yè)的頭部，使用margin:0 auto設(shè)置div居中，同時(shí)設(shè)置其寬度為800px，背景顏色為灰色。
.title{margin: 0 auto; width: 800px; background-color: #ccc}
6、在style之間，使用div創(chuàng)建網(wǎng)頁(yè)的底部，使用clear:both清除上面div的浮動(dòng)，避免影響底部的布局。接著使用margin:0 auto設(shè)置div居中，又使用設(shè)置其寬度為800px，最后背景顏色為#000fff。
.footer{clear: both;margin: 0 auto;width: 800px;clear: both;background-color:#000fff}
7、在瀏覽器打開(kāi)文件，查看實(shí)現(xiàn)的效果。
完整代碼
<!DOCTYPE html> <html> <head> <title>布局</title> </head> <body> <style type="text/css"> body{text-align: center;margin: 0;padding: 0} div{height: 200px;color: red;} .title{margin: 0 auto; width: 800px; background-color: #ccc} .footer{clear: both;margin: 0 auto;width: 800px;clear: both;background-color:#000fff} </style> <div class="title">頂部</div> <div class="footer">底部</div> </body> </html>
推薦學(xué)習(xí)：CSS視頻教程
