<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学校官网首页</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clear{
clear: both;
}
.container{
width: 970px;
margin: 0 auto;
}
.header{
width: 970px;
height: 103px;
}
.header .bg-red{
width: 277px;
height: 103px;
background-color: red;
}
.header .rg{
width: 679px;
height: 103px;
margin-left: 14px;
}
.header .rg .bg-green1{
width: 137px;
height: 49px;
background-color: green;
}
.header .rg .bg-green2{
width: 679px;
height: 46px;
margin-top: 8px;
background-color: green;
}
.middle{
width: 970px;
height: 435px;
margin-top: 10px;
}
.middle .orange{
width: 310px;
height: 435px;
background-color: orange;
}
.middle .right{
width: 650px;
height: 435px;
margin-left: 10px;
}
.middle .right .top{
width: 650px;
height: 400px;
}
.middle .right .top .blue{
width: 450px;
height: 400px;
}
.middle .right .top .blue .blue1{
width: 450px;
height: 240px;
background-color: blue;
}
.middle .right .top .blue .blue2{
width: 450px;
height: 110px;
margin-top: 10px;
background-color: blue;
}
.middle .right .top .blue .blue3{
width: 450px;
height: 30px;
margin-top: 10px;
background-color: blue;
}
.middle .right .top .purple{
width: 190px;
height: 400px;
margin-left: 10px;
background-color: purple;
}
.middle .right .bottom{
width: 650px;
height: 25px;
margin-top: 10px;
background-color: #008000;
}
.tail{
width: 970px;
height: 35px;
margin-top: 10px;
background-color: #00007F;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="bg-red fl"></div>
<div class="rg fr">
<div class="bg-green1 fr"></div>
<div class="bg-green2 fr"></div>
</div>
</div>
<div class="middle">
<div class="orange fl"></div>
<div class="right fl">
<div class="top fl">
<div class="blue fl">
<div class="blue1"></div>
<div class="blue2"></div>
<div class="blue3"></div>
</div>
<div class="purple fl"></div>
</div>
<div class="bottom fl"></div>
<div class="clear"></div>
</div>
</div>
<div class="tail"></div>
</div>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
