关于css加div布局和表格布局,菜鸟学习笔记:表格布局和div+css布局

网页布局可以通过表格和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与表格布局的区别