> 文档中心 > [Web 每日一练] 图文练习(4)

[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;