div + css布局
1.引入
我们之前学习了两种排版,分别是表格布局和流式布局,那么我们发现这俩中排版都有自己的局限性,那么下面呢,我们就一起来学习一个比较重要的布局css+div布局。这一种布局方式是基于盒子模型的一种布局方式,在实际的开发中使用的比较多。
2.div+css布局
css+div布局是一种重要的布局方式,可以按照不同的排版方式实现不同效果的页面布局。
3.div+css布局
(1).简单的上中下结构布局
<style type="text/css">
body{
font-size: 25px;
font-family: "宋体";
color: #0000ff;
text-align: center;
}
.containner{
margin: 0 auto;
height: 900px;
width: 1200px;
padding: 10px;
background-color: #bfbfbf;
}
.containner .head{
height: 180px;
background-color: #00AA00;
margin-bottom: 10px;
}
.containner .content{
height: 600px;
background-color: #b90000;
margin-bottom: 10px;
}
.containner .foot{
height: 100px;
background-color: #55ff00;
margin-bottom: 10px;
}
</style>
<div class="containner">
<div class="head">
这是头部
</div>
<div class="content">
这是内容
</div>
<div class="foot">
这是底部
</div>
</div>
(2).简单的上左中(窄)右宽(宽)下结构布局
<style type="text/css">
body{
font-size: 25px;
font-family: "宋体";
color: #0000ff;
text-align: center;
}
.containner{
margin: 0 auto;
height: 900px;
width: 1200px;
padding: 10px;
background-color: #bfbfbf;
}
.containner .head{
height: 180px;
background-color: #00AA00;
margin-bottom: 10px;
}
.containner .content{
height: 600px;
margin-bottom: 10px;
}
.content-left{
float: left;
height: 600px;
width: 300px;
background-color: #b90000;
margin-bottom: 10px;
}
.containner .content .content-right{
float: right;
height: 600px;
width: 890px;
background-color: #ff5500;
margin-bottom: 10px;
}
.containner .foot{
height: 100px;
background-color: #55ff00;
margin-bottom: 10px;
}
</style>
<body>
<div class="containner">
<div class="head">
这是头部
</div>
<div class="content">
<div class="content-left">
导航
</div>
<div class="content-right">
详细内容
</div>
</div>
<div class="foot">
这是底部
</div>
</div>
</body>
(3).简单的上中(左中右)下结构布局
<style type="text/css">
body{
font-size: 25px;
font-family: "宋体";
color: #0000ff;
text-align: center;
}
.containner{
margin: 0 auto;
height: 900px;
width: 1200px;
padding: 10px;
background-color: #bfbfbf;
}
.containner .head{
height: 180px;
background-color: #00AA00;
margin-bottom: 10px;
}
.containner .content{
height: 600px;
margin-bottom: 10px;
}
.content-left{
float: left;
height: 600px;
width: 300px;
background-color: #b90000;
margin-bottom: 10px;
}
.content-center{
float: left;
height: 600px;
width: 590px;
background-color: #4c7300;
margin-bottom: 10px;
margin-left: 10px;
}
.content-right{
float: right;
height: 600px;
width: 290px;
background-color: #ff5500;
margin-bottom: 10px;
margin-left: 10px;
}
.containner .foot{
height: 100px;
background-color: #55ff00;
margin-bottom: 10px;
}
</style>
<body>
<div class="containner">
<div class="head">
这是头部
</div>
<div class="content">
<div class="content-left">
内容左
</div>
<div class="content-center">
内容中
</div>
<div class="content-right">
内容右
</div>
</div>
<div class="foot">
这是底部
</div>
</div>
</body>
上述给出的是几种常见的div布局,我们还可以根据客户的需求设计出更多的按照实际要求的内容,但是无论如何设计,我们只要抓住一点就是使用块级结构div产生的盒子进行页面内容的布局即可完成。