组合实现"/>
前端入门——基于html和css常见图文组合实现
（针对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年</p><div class="subject">音频专栏</div></div></div><div class="single"><div><img class="img" src="../demo01/img/7.png" alt=""></div><div><p>爆诞：世界科幻200年</p><div class="subject">音频专栏</div></div></div><div class="single"><div><img class="img" src="../demo01/img/8.png" alt=""></div><div><p>爆诞：世界科幻200年</p><div class="subject">音频专栏</div></div></div><div class="single"><div><img class="img" src="../demo01/img/9.jpg" alt=""></div><div><p>爆诞：世界科幻200年</p><div class="subject">音频专栏</div></div></div><div class="single"><div><img class="img" src="../demo01/img/10.jpg" alt=""></div><div><p>爆诞：世界科幻200年</p><div class="subject">音频专栏</div></div></div></div></div></div></body></html>
图文组合2（院线电影）
<!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>demo2</title><style>* {margin: 0;padding: 0;}.all {width: 1504px;height: 674px;}.single {width: 320px;height: 650px;margin-left: 28px;margin-right: 28px;float: left;}.single .movie {height: 590px;border: 1px solid gray;position: relative;}.single .movie .name {line-height: 40px;font-size: 36px;color: white;position: absolute;top: 390px;left: 10px;}.single .movie>div {height: 510px;}.single .data {height: 34px;}.single .data p {margin-top: 22px;font-size: 32px;color: #999999;text-align: center;line-height: 34px;}.img {width: 318px;height: 438px;}.single .movie .look {height: 70px;}.single .movie .look p {color: #ffb52a;line-height: 32px;font-size: 30px;margin-left: 20px;margin-top: 15px;}.single .movie .show {color: gray;width: 155px;height: 78px;float: left;font-size: 30px;line-height: 78px;text-align: center;}</style>
</head><body><div class="all"><!-- 基础单元 --><div class="single"><div class="movie"><div style="border-bottom: 1px solid grey;"><div><img class="img" src="../demo02/img/1.jpg" alt=""><div class="name">猎枪</div></div><div class="look"><p>1875人想看</p></div></div><div><div style="border-right: 1px solid grey;" class="show">预告片</div><div class="show">预售</div></div></div><div class="data"><p>1月20日上映</p></div></div><!-- 基础单元 --><div class="single"><div class="movie"><div style="border-bottom: 1px solid grey;"><div><img class="img" src="../demo02/img/2.jpg" alt=""><div class="name">芭比公主历险记</div></div><div class="look"><p>1107人想看</p></div></div><div><div style="border-right: 1px solid grey;" class="show">预告片</div><div class="show">预售</div></div></div><div class="data"><p>1月21日上映</p></div></div><div class="single"><div class="movie"><div style="border-bottom: 1px solid grey;"><div><img class="img" src="../demo02/img/3.png" alt=""><div class="name">反击者2</div></div><div class="look"><p>605人想看</p></div></div><div><div style="border-right: 1px solid grey;" class="show">预告片</div><div class="show">预售</div></div></div><div class="data"><p>1月21日上映</p></div></div><div class="single"><div class="movie"><div style="border-bottom: 1px solid grey;"><div><img class="img" src="../demo02/img/4.jpg" alt=""><div class="name">长津湖之水门桥</div></div><div class="look"><p>686074人想看</p></div></div><div><div style="border-right: 1px solid grey;" class="show">预告片</div><div class="show">预售</div></div></div><div class="data"><p>2月1日上映</p></div></div></div>
</body>
</html>
图文组合3（学习专栏）
<!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>demo3</title><style>* {margin: 0;padding: 0;}.all {width: 864px;height: 268px;background-color: #f5f6f6;}.single {width: 206px;height: 268px;background-color: #ffffff;margin-left: 5px;margin-right: 5px;float: left;}.single .img,img {height: 48px;margin-top: 16px;border: 50%;text-align: center;}.single .title {text-align: center;margin-top: 16px;font-size: 20px;height: 22px;line-height: 22px;}.single .contain {text-align: center;font-size: 16px;color: #767676;height: 40px;line-height: 20px;margin-top: 8px;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}.single .data {color: #767676;height: 20px;line-height: 20px;font-size: 16px;width: 100px;margin-top: 16px;float: left;}.single button {height: 30px;margin-top: 14px;text-align: center;color: #3fb37e;border: solid #3fb37e;border-radius: 3px;line-height: 30px;font-size: 18px;width: 88px;margin-left: 59px;background-color: transparent;}</style>
</head><body><div class="all"><!-- 基本单元 --><div class="single"><div class="img"><img src="../demo03/1.jpg" alt=""></div><div class="title">干货考研经验</div><div class="contain">经验超市APP为大家整理最干货的考研经验，大家可以什么红烧鸡块</div><div><div style="text-align: right;border-right-color: #767676;" class="data">914人关注 | </div><div style="text-align: left;" class="data"> 83篇文章</div></div><div> <button>进入专栏</button></div></div><!-- 基本单元 --><div class="single"><div class="img"><img src="../demo03/2.jpg" alt=""></div><div class="title">行走的审计汪</div><div class="contain">货的考研经验，大家可以什么红烧鸡块</div><div><div style="text-align: right;border-right-color: #767676;" class="data">914人关注 | </div><div style="text-align: left;" class="data"> 83篇文章</div></div><div> <button>进入专栏</button></div></div><div class="single"><div class="img"><img src="../demo03/3.jpg" alt=""></div><div class="title">TD北美留学进化论</div><div class="contain">经验超市AP考研经验</div><div><div style="text-align: right;border-right-color: #767676;" class="data">914人关注 | </div><div style="text-align: left;" class="data"> 83篇文章</div></div><div> <button>进入专栏</button></div></div><div class="single"><div class="img"><img src="../demo03/4.jpg" alt=""></div><div class="title">王喆的机器学习笔记</div><div class="contain">经验超市APP为大家整理最干货的考研经验，大家可以什么红烧鸡块</div><div><div style="text-align: right;border-right-color: #767676;" class="data">914人关注 | </div><div style="text-align: left;" class="data"> 83篇文章</div></div><div> <button>进入专栏</button></div></div></div>
</body></html>
图文组合4（小说作者推荐）
<!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>demo4</title><style>* {margin: 0;padding: 0;}.all {width: 620px;height: 650px;}.single {height: 122px;overflow: hidden;}/* .single .img, */img {margin: 15px;border-radius: 50%;border: 1px solid #eaeaea;text-align: center;height: 92px;width: 92px;}.single>div {float: left;}.single .middle {margin: 15px;}.single .middle div {color: #333333;height: 40px;line-height: 40px;font-size: 36px;}.single .middle p {margin-top: 4px;color: #969696;height: 40px;font-size: 32px;line-height: 40px;}.single .right {color: #3dbf40;font-size: 36px;height: 40px;line-height: 40px;margin-right: 15px;margin-top: 15px;}</style>
</head><body><div class="all"><!-- 基础单元 --><div class="single"><div class="img"><img src="../demo05/1.webp" alt=""></div><div class="middle"><div>卢璐说</div><p>写了2133.8字·34.7k喜欢</p></div><div class="right">+关注</div></div><!-- 基础单元 --><div class="single"><div class="img"><img src="../demo05/2.webp" alt=""></div><div class="middle"><div>简书钻首席小管家</div><p>写了2133.8字·34.7k喜欢</p></div><div class="right">+关注</div></div><div class="single"><div class="img"><img src="../demo05/3.webp" alt=""></div><div class="middle"><div>格列柯南</div><p>写了2133.8字·34.7k喜欢</p></div><div class="right">+关注</div></div><div class="single"><div class="img"><img src="../demo05/4.webp" alt=""></div><div class="middle"><div>hobbit霍比特人</div><p>写了2133.8字·34.7k喜欢</p></div><div class="right">+关注</div></div><div class="single"><div class="img"><img src="../demo05/5.webp" alt=""></div><div class="middle"><div>梅拾璎</div><p>写了2133.8字·34.7k喜欢</p></div><div class="right">+关注</div></div></div>
</body></html>
更多图文组合（商品评价、歌曲榜单、电商商品陈列、新闻条目陈列等）
详见：前端学习——CSS入门
更多推荐
前端入门——基于html和css常见图文组合实现
发布评论