<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.hangbuju{
width: 100%;
height: auto;
}
.header{
width: 100%;/*自适应*/
height: 50px;
background-color: black;
color: white;
text-align: center;
line-height: 50px;
}
.banner{
width: 100%;
height: 400px;
background-color: green;
text-align: center;
padding-top:50px;
}
.content{
width: 800px;/*固定宽*/
height: 1000px;
background-color: yellow;
margin: 0 auto;
text-align: center;
}
.footer{
width: 100%;
height: 50px;
color: white;
text-align: center;
line-height: 50px;
background-color: black;
}
.liebuju{
width: 100%;
height: 1000px;
padding-top: 50px;
float: left;
}
.left{
width: 25%;
height: 1000px;
float: left;
background-color: red;
}
.middle{
width: 50%;
height: 1000px;
float: left;
background-color: blue;
}
.right{
width: 25%;
height: 1000px;
background-color: green;
float: right;
}
</style>
</head>
<body>
<div class="hangbuju">
<div class="header">三行布局</div>
<div class="banner">banner</div>
<div class="content">内容区</div>
<div class="footer">foot</div>
</div>
<div style="clear: both;"></div>
<!--自适应三列布局-->
<div class="liebuji">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<div style="clear: both;"></div>
</body>
</html>
1 回答
- 1 回答
- 0 关注
- 752 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消