块级元素

 

<!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>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
    
    }
    li{
        list-style: none;
        height: 320px;
        width: 250px;
        margin: 10px;
        padding: 10px;
        border: 1px solid #ccc;
    }
    p{
        font-size: 12px;
        color: #66667f;
        line-height: 25px;
    }
    p:first-of-type{
        line-height: 32px;
        font-size: 14px;
        color: #666;
    }
    p:nth-of-type(2) span{
        font-weight: 600;
        color: #ff5584;
    }
    p:last-of-type span:nth-of-type(2n+1){
        font-weight: 600;
        color: #ff5584;
    }
    img:first-child{
        width: 250px;
        height: 188px;
    }
</style>
<body>
    <ul>
        <li>
            <img src="./images/pic1.jpg" alt="">
            <p>动画便利店X果壳网《西门子洗碗机...</p>
            <p><span>原创作品</span>-影视-Motion Graphic</p>
            <p>2小时前上传</p>
            <p><span>1284</span> &nbsp;<span>人气</span>/<span>11</span><span> 评论/</span> <span>47</span> &nbsp;&nbsp; 推荐</p>
            <img src="./images/play.png" alt="">
        </li>
        <li>
                <img src="./images/pic2.gif" alt="">
                <p>动画便利店X视知《到底工资怎么发...</p>
                <p><span>原创作品</span>-影视-Motion Graphic</p>
                <p>3小时前上传</p>
                <p><span>1569&nbsp;</span> 人气/<span>50</span> 评论/ <span>125</span> &nbsp;&nbsp; 推荐</p>
                <img src="./images/play.png" alt="">
        </li>
    </ul>
</body>
</html>

 

posted @ 2021-04-21 17:18  Sherlockmmc  阅读(50)  评论(0)    收藏  举报