[Web 每日一练] 图文练习(4)
大家好我是 Nick ,今天分享一篇比较难的图文组合,我们话不多说,直接来看实现图吧!
乍一看感觉非常难,但是我们还是运用模块化的思维,来对图片做切割。我们可以将一张大的图片看成一个 div ,大的 div 里有小的四个 div ,小的 div 里面有背景图片、和字体,我们对它在细化,整个图片就完成了;
注意:高度坍塌和浮动问题哦!图片上的文字可以用背景图解决哦!。
实现:
<!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>Document</title> <style>*{ margin: 0; padding: 0; list-style: none;}.section{ width: 400px; overflow: hidden;}.item{ width: 180px; height: 173px; float: left; margin: 10px;}.item .pic{ height: 101px; background-size: 100% 100%; overflow: hidden;}.item .pic p{ color: white; font-size: 14px; height: 21px; line-height: 21px; margin-top: 80px; margin-right: 5px; text-align: right;}.item .title{ font-size: 18px; height: 40px; line-height: 40px; /* 一下三行会让文本出现省略号 */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.item .bottom{ overflow: hidden;}.item .bottom span{ float: left; width: 50%; height: 30px; line-height: 30px;}.item .bottom .money{ font-size: 16px; color: #ff6050;}.item .bottom .looks{ text-align: right; font-size: 14px; color: #a5a7b4;} </style></head><body> <div class="section"><div class="item"> <div class="pic" style="background-image: url(img4/1.png)"> <p>共12节</p> </div> <p class="title">使用爬虫和Flask建设XXXXXX</p> <p class="bottom"> <span class="money">¥99.0</span> <span class="looks">2184观看</span> </p></div><div class="item"> <div class="pic" style="background-image: url(img4/2.jpg)"> <p>共12节</p> </div> <p class="title">Python开发企业级标准XXXXXX</p> <p class="bottom"> <span class="money">¥29.0</span> <span class="looks">1143观看</span> </p></div><div class="item"> <div class="pic" style="background-image: url(img4/3.jpg)"> <p>共12节</p> </div> <p class="title">程序员面试宝典一助XXXXXX</p> <p class="bottom"> <span class="money">¥29.0</span> <span class="looks">9011观看</span> </p></div><div class="item"> <div class="pic" style="background-image: url(img4/4.jpg)"> <p>共12节</p> </div> <p class="title">7周Spring Cloud微服XXXXXX</p> <p class="bottom"> <span class="money">¥129.0</span> <span class="looks">1万+观看</span> </p></div> </div></body></html>
让文本后面出现…
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;