网页布局可以通过表格和div元素来实现(注:table布局已经淘汰),首先我们来看看table布局
表格布局
实现效果
表格布局
**表格布局的思路就是把整个网页看成一个简单的表格,然后在不同的单元格内进行内容填充.下面我们再使用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与表格布局的区别
