網頁布局可以通過表格和div元素來實現(注:table布局已經淘汰),首先我們來看看table布局

表格布局

導航
推薦文章 一個猴子成長史 你看個毛線 我就瞅你咋地 村里出了個半邊天	一個猴子的成長史 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
頁腳

實現效果

表格布局

**表格布局的思路就是把整個網頁看成一個簡單的表格,然后在不同的單元格內進行內容填充.下面我們再使用div+css進行布局,一般的div結構元素如下圖

**

圖片來自實驗樓

擼起袖子寫代碼

div布局

這是一個導航

優秀文章展現

• 你好,一只雞
• 我在西河大橋看大腿
• 啊,大海好多水
• 我們走皮皮蝦

開學啦

坑比小學僧們再見啦

good good study, day day up

css部分

#container{

width: 100%;

/*clear: both;*/

}

#header{

width: 100%;

background-color: blue;

text-align: center;

float: left;

/*clear: both;*/

}

#pagebody{

//float: left;

}

#sidebar{

width: 40%;

height: 500px;

background-color: red;

float: left;

/*clear: both;*/

}

#mainbody{

width: 60%;

height: 500px;

background-color: yellow;

float: left;

}

#footer{

width: 100%;

background-color: gray;

text-align: center;

font-size: 50px;

float: left;

}

實現效果

div+css布局

div布局的思路是是把頁面看成一個大盒子,用盒子來盛裝內容,至于兩種布局方法的區別,看這里看這里:淺析div+css與表格布局的區別

總結

以上是生活随笔為你收集整理的关于css加div布局和表格布局,菜鸟学习笔记:表格布局和div+css布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。