<!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">內(nèi)容區(qū)</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>
添加回答
舉報
0/150
提交
取消