图文排版
效果图
文件结构：
代码演示：
<!DOCTYPE html>
<html>
<head>
<title>图文排版</title>
<style>
*{
margin: 0;
padding: 0;
}
.main{
width: 1200px;
height: 500px;
/* background-color: bisque; */
margin:50px auto;
}
.main, .main > div.one, .main > div.two, .main > div.three{
height: 500px;
}
.main > div.one, .main > div.two, .main > div.three{
float: left;
}
.main > div.one{
width: 300px;
background-color: aqua;
}
.main > div.two{
width: 600px;
/* background-color: black; */
}
.main > div.three{
width: 300px;
/* background-color: blue; */
}
.main > div.one > div.top{
width: 300px;
height: 400px;
background-color: rgb(0, 185, 124);
}
.main > div.one > div.bottom{
width: 300px;
height: 100px;
background-color: rgb(6, 255, 172);
}
.main > div.two >div.top{
width: 580px;
height: 290px;
margin: 0 10px 10px;
background-color: antiquewhite;
}
.main > div.two > div.bottom{
width: 600px;
height: 200px;
/* background-color: rgb(173, 164, 151); */
}
.main > div.two > div.bottom div{
width: 180px;
height: 200px;
margin: 0 10px;
float: left;
background-color: aqua;
}
.main > div.three > .top{
width: 300px;
height: 200px;
background-color: rgb(245, 46, 218);
}
.main > div.three > .bottom{
width: 300px;
height: 290px;
margin-top: 10px;
background-color: rgb(158, 34, 142);
}
#one > div.one > div.top, #one > div.two > div.top,
.twobottom1, .twobottom2, .twobottom3,
#one > div.three > div.top,#one > div.three > div.bottom{
background-size: 100%;
}
#one > div.one > div.top{
background-image: url('img/001.png');
}
#one > div.two > div.top{
background-image: url('img/002.png');
}
.twobottom1{
background-image: url('img/003.png');
}
.twobottom2{
background-image: url('img/004.png');
}
.twobottom3{
background-image: url('img/005.png');
}
#one > div.three > div.top{
background-image: url('img/006.png');
}
#one > div.three > div.bottom{
background-image: url('img/007.png');
}
</style>
</head>
<body>
<h1>图文排版</h1>
<div class="main">
<div class="one">
<div class="top"></div>
<div class="bottom"></div>
</div>
<div class="two">
<div class="top"></div>
<div class="bottom">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="three">
<div class="top"></div>
<div class="bottom"></div>
</div>
</div>
<div class="main" id="one">
<div class="one">
<div class="top"></div>
<div class="bottom" id="onebottom"></div>
</div>
<div class="two">
<div class="top" id="twotop"></div>
<div class="bottom">
<div class="twobottom1"></div>
<div class="twobottom2"></div>
<div class="twobottom3"></div>
</div>
</div>
<div class="three">
<div class="top"></div>
<div class="bottom"></div>
</div>
</div>
</body>
</html>
