<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
.top{
margin:0 auto;
width: 1200px;
height: 24px;
background-color:blue ;
}
.main{
margin:0 auto;
width: 1200px;
height: 672px;
background-color: orange;
}
.left{
float: left;
width: 87px;
height: 672px;
background-color: black;
}
.right{
float: right;
width: 1113px;
height: 672px;
background-color: red;
}
.right-top{
width: 1113px;
height: 168px;
background-color:pink;
}
.right-top-left{
float: left;
width: 408px;
height: 168px;
background-color: deeppink;
}
.img-top{
float: left;
width: 408px;
height: 111px;
background-color: orangered;
}
.img-bottom{
float: left;
width: 408px;
height: 57px;
background-color: orange;
}
.right-top-right{
float:left;
width: 705px;
height: 168px;
background-color: hotpink;
}
.right-main{
float:left;
width: 1113px;
height: 504px;
background-color: green;
}
.right-main-left{
float:left;
width: 30px;
height: 504px;
background-color: deepskyblue;
}
.right-main-bettwen{
float:left;
width: 621px;
height: 504px;
background-color: green;
}
.img1{
float:left;
width: 621px;
height: 419px;
background-color: greenyellow;
}
.img2{
float:left;
width: 621px;
height: 85px;
background-color: darkgreen
}
.right-main-right{
float:left;
width: 462px;
height: 504px;
background-color: darkred;
}
</style>
</head>
<body>
<div class="top">
<img src="img/images/index_01.jpg">
</div>
<div class="main">
<div class="left">
<img src="img/images/index_02.jpg">
</div>
<div class="right">
<div class="right-top">
<div class="right-top-left">
<div class="img-top"><img src="img/images/上.jpg"></div>
<div class="img-bottom"><img src="img/images/index_05.jpg"></div>
</div>
<div class="right-top-right"><img src="img/images/index_04.jpg"></div>
</div>
<div class="right-main">
<div class="right-main-left"><img src="img/images/index_06.jpg"></div>
<div class="right-main-bettwen">
<div class="img1"><img src="img/images/index_07.jpg"></div>
<div class="img2"><img src="img/images/下1.jpg"></div>
</div>
<div class="right-main-right"><img src="img/images/右.jpg"></div>
</div>
</div>
</body>
</html>
生成结果：
练习的结构：
注意
1、子父级关系
2、左悬浮：{float：left}
3、命名清晰
4、hello Word 小驼峰
Hello Word 大驼峰
浙公网安备 33010602011771号