图 文 组 合 练习

目录

前言

一、单图单文

案例一

 案例二

二、单图多文

案例三

案例四

---

---

前言

哈喽同学们大家好，本节我们开始学习html5基础部分------图文组合相关练习，下面有具体案例和素材同学们自行取用

本节内容是对前四节内容进行总结性练习

---

一、单图单文

案例一

 代码如下（示例）：

.item {
            width: 50px;
            height: 60px;
            /* background-color: pink; */
            text-align: center;
            overflow: hidden;
            float: left;
        }
        .item img {
            width: 28px;
            height: 28px;
            /* img默认下方有个隔离边，修改成block会去掉 */
            display: block;
            margin: 5px auto;
        }
        .item p {
            font-size: 12px;
            font-weight: 200;
            /* background-color: gold; */
        }

<div class="item">
        <img src="img/test01/1.png" alt="">
        <p>话费</p>
    </div>

注意：总结性知识点（需要背的！）

 

 案例二

.item {
            width: 140px;
            height: 63px;
            /* background-color: pink; */
            border-bottom: 1px solid gray;
        }
        .item img {
            width: 36px;
            height: 36px;
            float: left;
            margin: 13px 2px;
        }
        .item p {
            width: 100px;
            height: 63px;
            line-height: 63px;
            float: left;
        }

<div class="item">
        <img src="img/test02/1.jpg" alt="">
        <p>手机</p>
</div>

二、单图多文

多文组合把p标签放到块标签里更便于我们操作！

案例三

素材图片： 

代码如下（示例）：

.item{
         width: 206px;
         height: 268px;
         line-height: 268px;
         margin-top:5px ;
         /* background-color: pink; */
         border: 10px solid #f5f6f6;
         overflow: hidden;
         float: left;
         border-radius: 3%;
     }
     .item .pic{
         width: 48px;
         height: 48px;
         border-radius: 50%;
         margin-top: 26px;
         margin-left: 75px;
         background-size: 100% 100%;
         overflow: hidden;
        
     }
    .item .text{
        width:206px;
        height: 120px;
        text-align: center;
    }
    .item .text .part1{
        font-size: 18px;
        overflow: hidden;
        height: 20px;
        line-height: 20px;
        margin-top: 16px;
        font-weight: bold;
       
    }
    .item .text .part2{
         width: 190px;
        font-size: 16px;
        height: 40px;
        line-height: 20px;
        margin-top: 8px;
        color: #767676;
        overflow: hidden;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;  
        margin-left: 9px;
    }
    .item .text .part3{
        font-size: 16px;
        overflow: hidden;
        height: 20px;
        line-height: 20px;
        margin-top: 16px;
        color: #767676;
    }
    .item .bottom{
        width: 88px;
        height: 30px;
        line-height: 30px;
        overflow: hidden;
        margin-top: 14px;
        margin-left: 55px;
        border:2px solid #3fb27e;
        border-radius: 8%;
        text-align: center;

    }
    .item .bottom p.last{
        font-size: 18px;
        color: #3fb27e;
        height: 30px;
        line-height: 30px;
    }

<div class="item">
            <div class="pic" style=" background-image: url(../img/img3/1.jpg);"></div>
            <div class="text">
            <p class="part1">干货考研经验</p>
            <p class="part2">经验超市app为大家整理最干货的考研经验,大家可以参考</p>
            <p class="part3">914人关注|83篇文章</p>
            </div>
            <div class="bottom">
                <p class="last">进入专栏</p>
            </div>
        </div>

案例四

 素材图片： 

代码如下：
 

section{
            margin: 40px;
            width: 2000px;
        }
        *{
            margin:0;
            padding:0;
            list-style:none;
        }
        .a{
            width: 320px;
            float: left;
            margin-right: 56px;
        }
        .item{
            width: 320px;
            height:588px;
            overflow: hidden;
            float: left;
            border: 1px solid #efefef;
        }
        .item .pic{
            width: 320px;
            height: 440px;
            background-size: 100% 100%;
            overflow: hidden;
        }
       .item .pic p {
            margin-top:380px;
            margin-left: 20px;
            color:white;
            font-size: 32px;
        }
        .part1{
            width: 320px;
            height: 70px;
            line-height: 70px;
            background-color: #fbfbfb;
        }
        .part1 .look{
            margin-left: 18px;
            font-size: 30px;
            color: #ffb52a;
        }
         .part2{
            width: 156.9px;
            height: 78px;
            line-height: 78px;
            background-color: #ffffff;
            float: left;
            font-size: 30px;
            border-right:2px dashed #efefef;
            border-bottom:2px solid #efefef;
        }
        .part2 .time{
            margin-left: 20px;
            font-size: 30px;
            color: #999999;
        }
        .part3{
            width: 156.9px;
            height: 78px;
            line-height: 78px;
            background-color: #ffffff;
            float: left;
            border-bottom:2px solid #efefef;
        }
        .part3 .price{
            margin-left: 45px;
            font-size: 30px;
            color: #999999;
            text-align: center;
            font-size: 30px;
        }
        .bottom{
            width: 320px;
            height: 70px;
            line-height: 70px;
        }
        .bottom p{
            font-size: 32px;
            margin-top: 22px;
            color: #999999;
            text-align: center;
        }

<section>
        <div class="a">
        <div class="item">
            <div class="pic" style=" background-image: url(../img/img2/1.jpg);">
                <p>猎枪</p>
            </div> 
                <div class="part1">
                    <span class="look">1875人想看</span>
                </div>
                <div class="part2">
                    <span class="time">预告片</span>
                </div>
                <div class="part3">
                    <span class="price">预售</span>
                </div>
        </div>
        <div class="bottom">
            <p>1月20日上映</p>
        </div>
    </div>

本节over,再见！ 

---