框架的基本搭建
HTML：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/reset.css"/>
<link rel="stylesheet" href="../css/bfc.css"/>
</head>
<body>
<!--主体-->
<header>
<div class="suoye">首页首页首页首页首页</div>
<div class="denglu">登录</div>
</header>
<!--内容区-->
<section>
<!-- 内容区左边-->
<div class="zuofangkuai"></div>
<!--内容区主体部分-->
<div class="zhuti">
<!--内容主体左边-->
<div class="neirong">
<div class="neirongshang">
<p></p>
<p></p>
</div>
<div class="neirongxia">要求：只要最里层的盒子才能设置高度，外层盒子高度必须自动</div>
</div>
<!--内容主体右边-->
<div class="neirongyou">
<p></p>
<p></p>
</div>
</div>
</section>
<!--尾部-->
<footer>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p></p>
</footer>
</body>
</html>
CSS：/*锟斤拷锟斤拷*/
header{
width: 100%;
background-color: #212121;
position: absolute;
top: 0px;
}
.suoye{
width: 400px;
height: 30px;
background-color: #807f7f;
margin: 10px;
}
.denglu{
width: 100px;
height: 30px;
background-color: #807f7f;
position: absolute;
right: 10px;
top: 10px;
text-align: center;
}
/*锟斤拷锟斤拷锟斤拷*/
section{
width: 100%;
background-color: #ffffff;
}
/*锟斤拷锟斤拷锟斤拷锟斤拷锟?*/
section .zuofangkuai{
height: 100px;
width: 100px;
background-color:#607880 ;
position: absolute;
top: 180px;
}
/*锟斤拷锟斤拷锟斤拷锟藉部锟斤拷*/
.zhuti{
width: 800px;
background-color: #9a7777;
overflow: hidden;
margin: 80px auto 30px ;}
/*锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟?*/
.neirong{
position: absolute;
}
.neirongshang{
background-color: #ccd7db;
margin: 30px 10px 20px 30px;
}
.neirongshang p:first-child{
width: 300px;
height: 30px;
background-color:#807f7f ;
margin: 10px 300px 10px 30px;
display: inline-block;
}
.neirongshang p:nth-child(2){
width: 100px;
height: 30px;
background-color:#807f7f ;
position: absolute;
right: 10px;
top: 40px;
margin-right: 30px;
}
.neirongxia{
height: 700px;
width: 630px;
background-color: #ccd7db;
margin: 0px 10px 30px 30px;
position: absolute;
text-align: center;
}
/*锟斤拷锟斤拷锟斤拷锟斤拷锟揭憋拷*/
.neirongyou{
float: right;
margin-bottom: 340px;
}
.neirongyou p{
width: 100px;
height: 200px;
margin: 30px 30px 30px 0px;
background-color: #dbcccc;
}
/*尾锟斤拷*/
footer {
width: 100%;
background-color: #232323;
overflow: hidden;
}
footer div{
height: 100px;
width: 50px;
margin: 10px; background-color: #818080; float: left;}footer p{ width: 50px; height: 50px; background-color: #617981; position: fixed; bottom: 100px; right:0px ;}
浙公网安备 33010602011771号