要求：
分析（看蓝色区域）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动实战练习</title>
<style>
*{
padding: 0px;
margin: 0px;
}
.head{
width: 980px;
height: 100px;
/*background-color: pink;*/
margin: 0 auto;
margin-bottom: 10px;
}
.head .logo{
width: 250px;
height: 100px;
background-color: #00faff;
float: left;
}
.head .language{
width: 150px;
height: 50px;
background-color: #e68500;
float: right;
}
.head .nav{
width: 650px;
height: 50px;
background-color: #7e007d;
float: right;
}
.content{
width: 980px;
height: 400px;
/*background-color: blue;*/
margin: 0 auto;
margin-bottom: 10px;
}
.content .centerleft{
width: 320px;
height: 400px;
background-color: yellow;
float: left;
}
.content .centerright{
width: 650px;
height: 400px;
/*background-color: beige;*/
float: right;
}
.content .centerright .centerrighttop{
width: 650px;
height: 350px;
/*background-color: green;*/
}
.content .centerright .centerrighttop .left{
width: 400px;
height: 350px;
/*background-color: #fd1393;*/
float: left;
}
.content .centerright .centerrighttop .left .lefttop{
width: 400px;
height: 200px;
background-color: #fd1393;
margin-bottom: 10px;
}
.content .centerright .centerrighttop .left .leftfoot{
width: 400px;
height: 140px;
background-color: #00bbfc;
}
.content .centerright .centerrighttop .right{
width: 240px;
height: 350px;
background-color: #9aca31;
float: right;
}
.content .centerright .centerrightfoot{
width: 650px;
height: 40px;
background-color: #b68511;
margin-top: 10px;
}
.foot{
width: 980px;
height: 40px;
background-color: tomato;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="head">
<div class="logo"></div>
<div class="language"></div>
<div class="nav"></div>
</div>
<div class="content">
<div class="centerleft"></div>
<div class="centerright">
<div class="centerrighttop">
<div class="left">
<div class="lefttop"></div>
<div class="leftfoot"></div>
</div>
<div class="right"></div>
</div>
<div class="centerrightfoot"></div>
</div>
</div>
<div class="foot"></div>
</body>
</html>
201
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
