这是练习的浮动效果图
这是HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header class="header claerfix">
<div class="demao">1</div>
<div class="demao">2</div>
<div class="demao">3</div>
<div class="demao">4</div>
<div class="demao">5</div>
</header>
<div class="content">
<div class="left claerfix">
<div class="huangse">
6
</div>
<div class="hebai">
<div class="lef claerfix">8</div>
<div class="rig claerfix">9</div>
</div>
<div class="hunse">
11
</div>
</div>
<div class="right claerfix">
<div class="qi">7</div>
<div class="shi">10</div>
</div>
</div>
<footer class="shier">
12
</footer>
</body>
</html>
这是css部分。重置代码我就不发了
.clearfix::after{
content: '';
display: block;
clear: both;
}
body{
font-size: 18px;
color: aliceblue;
font-weight: 700;
}
.header{
width: auto;
height: 100px;
line-height: 100px;
text-align: center;
background-color: #008000;
}
.header .demao{
float: left;
width: 20%;
}
.content{
text-align: center;
}
.content .left{
float: left;
width: 60%;
height: 350px;
}
.content .left .huangse{
height: 100px;
line-height: 100px;
background: #ffff00;
}
.content .left .hebai{
height: 150px;
line-height: 150px;
}
.content .left .hebai .lef{
width:50%;
float: left;
background: #ebebeb;
}
.content .left .hebai .rig{
width:50%;
float: right;
background:#000;
}
.content .left .hunse{
line-height: 100px;
background: #ff0000;
}
.content .right{
float: right;
width: 40%;
height: 350px;
}
.content .right .qi{
height: 200px;
line-height: 200px;
background-color: #9acd32;
}
.content .right .shi{
line-height: 150px;
background: #00ffff;
}
.shier{
line-height: 100px;
background-color: #0000ff;
text-align: center;
}