(针对html和css的常见图文组合实现)
图文组合1(书籍专栏)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo1</title>
<style>
* {
margin: 0;
padding: 0;
}
.all {
width: 820px;
height: 620px;
background-color: #f7f7f7;
border: 20px solid black;
}
.title {
margin: 20px 0 12px 20px;
height: 20px;
}
.title p {
line-height: 20px;
font-size: 18px;
color: #006600;
}
.show {
height: 560px;
}
.show>div {
height: 280px;
}
.single {
width: 100px;
height: 140px;
margin-left: 32px;
margin-right: 32px;
float: left;
}
.single div,
.single p {
margin-bottom: 10px;
}
.img {
width: 100px;
height: 140px;
text-align: center;
}
.single p {
font-size: 16px;
text-align: center;
line-height: 20px;
color: #101010;
}
.subject {
text-align: center;
font-size: 14px;
line-height: 20px;
color: #dbdbdb;
}
</style>
</head>
<body>
<div class="all">
<div class="title">
<p>热门专栏······<a href="" style="text-decoration: none;color: #5a8bb4;">(更多)</a></p>
</div>
<div class="show">
<div>
<div class="single">
<div><img class="img" src="../demo01/img/1.jpg" alt=""></div>
<div>
<p>爆诞:世界科幻200年</p>
<div class="subject">音频专栏</div>
</div>
</div>
<div class="single">
<div><img class="img" src="../demo01/img/2.jpg" alt=""></div>
<div>
<p>工作之苦——解决2020年代的工作新问题</p>
<div class="subject">音频专栏</div>
</div>
</div>
<div class="single">
<div><img class="img" src="../demo01/img/3.jpg" alt=""></div>
<div>
<p>和思想家一起漫步——20世纪留给我们的10种远见</p>
<div class="subject">音频专栏</div>
</div>
</div>
<div class="single">
<div><img class="img" src="../demo01/img/4.jpg" alt=""></div>
<div>
<p>用性别之尺丈量世界——18堂思想课解读女性问题</p>
<div class="subject">音频专栏</div>
</div>
</div>
<div class="single">
<div><img class="img" src="../demo01/img/5.jpg" alt=""></div>
<div>
<p>爆诞:世界科幻200年</p>
<div class="subject">音频专栏</div>
</div>
</div>
</div>
<div>
<div class="single">
<div><img class="img" src="../demo01/img/6.png" alt=""></div>
<div>
<p>爆诞:世界科幻200年</<