html css 字体与文本属性案例：视频封面信息制作（python）（前端）

三无082

已于 2022-10-23 16:17:11 修改

阅读量624

点赞数

于 2022-10-22 19:26:12 首次发布

本文链接：https://blog.csdn.net/weixin_54450346/article/details/127465961

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link rel="stylesheet" href="https://static.zzhitong.com/lesson-files/html/code/reset.css ">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
        }
        li{
            list-style: none;
        }
        .box1{
            width: 250px;
            height: 320px;
            margin: auto;
            display: inline-block;
            border: 1px #DDDDDD solid;
            padding: 10px;
            font: 12px/1.6 微软雅黑, 宋体, Helvetica, sans-serif;
        }
        .box2{
            width: 250px;
            height: 320px;
            margin:  auto;
            display: inline-block;
            border: 1px #DDDDDD solid;
            padding: 10px;
            font: 12px/1.6 微软雅黑, 宋体, Helvetica, sans-serif;
        }
        .box{
            width: 549px;
            height: 340px;
            /*border: 1px #DDDDDD solid;*/
            margin: 50px auto;
        }
        a img{
            width: 250px;
            height: 188px;
        }
        h3{
            color: #666;
            font-size: 14px;
            line-height: 30px;
        }
        p{
            color: #666;
            line-height: 20px;
            margin: 5px 0;
        }
        .s1 span{
            color: #ff0084;
            line-height: 20px;
            font-weight: bold;
        }
        .s2 span{
            color: #FF3300;
            line-height: 20px;
            font-weight: bold;
        }

    </style>
</head>
<body>
<div class="box">
    <div class="box1">
    <a href="#">
        <img src="https://static.zzhitong.com/lesson-files/html/img/6-2-images/pic1.jpg" alt="">
        <h3>动画便利店X果壳网《西门子洗碗机》...</h3>
    </a>
    <p class="s1"><span >原创作品</span>- 影视 - Motion Graphic</p>
    <p>3小时前上传</p>
    <p class="s2"><span>1284</span>人气/<span>11</span>评论 / <span>47</span>推荐</p>
    <img src="https://static.zzhitong.com/lesson-files/html/img/6-2-images/play.png" alt="">
    </div>

    <div class="box2">
    <a href="#">
        <img src="https://static.zzhitong.com/lesson-files/html/img/6-2-images/pic2.jpg" alt="">
        <h3>动画便利店X果壳网《西门子洗碗机》...</h3>
    </a>
    <p class="s1"><span >原创作品</span>- 影视 - Motion Graphic</p>
    <p>3小时前上传</p>
    <p class="s2"><span>1284</span>人气/<span>11</span>评论 / <span>47</span>推荐</p>
    <img src="https://static.zzhitong.com/lesson-files/html/img/6-2-images/play.png" alt="">
    </div>
</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link rel="stylesheet" href="https://static.zzhitong.com/lesson-files/html/code/reset.css ">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
        }
        li{
            list-style: none;
        }
        .box1{
            width: 250px;
            height: 320px;
            margin: auto;
            display: inline-block;
            border: 1px #DDDDDD solid;
            padding: 10px;
            font: 12px/1.6 微软雅黑, 宋体, Helvetica, sans-serif;
        }
        .box2{
            width: 250px;
            height: 320px;
            margin:  auto;
            display: inline-block;
            border: 1px #DDDDDD solid;
            padding: 10px;
            font: 12px/1.6 微软雅黑, 宋体, Helvetica, sans-serif;
        }
        .box{
            width: 549px;
            height: 340px;
            /*border: 1px #DDDDDD solid;*/
            margin: 50px auto;
        }
        a img{
            width: 250px;
            height: 188px;
        }
        h3{
            color: #666;
            font-size: 14px;
            line-height: 30px;
        }
        p{
            color: #666;
            line-height: 20px;
            margin: 5px 0;
        }
        .s1 span{
            color: #ff0084;
            line-height: 20px;
            font-weight: bold;
        }
        .s2 span{
            color: #FF3300;
            line-height: 20px;
            font-weight: bold;
        }

    </style>
</head>
<body>
<div class="box">
    <div class="box1">
    <a href="#">
        <img src="https://static.zzhitong.com/lesson-files/html/img/6-2-images/pic1.jpg" alt="">
        <h3>动画便利店X果壳网《西门子洗碗机》...</h3>
    </a>
    <p class="s1"><span >原创作品</span>- 影视 - Motion Graphic</p>
    <p>3小时前上传</p>
    <p class="s2"><span>1284</span>人气/<span>11</span>评论 / <span>47</span>推荐</p>
    <img src="https://static.zzhitong.com/lesson-files/html/img/6-2-images/play.png" alt="">
    </div>

    <div class="box2">
    <a href="#">
        <img src="https://static.zzhitong.com/lesson-files/html/img/6-2-images/pic2.jpg" alt="">
        <h3>动画便利店X果壳网《西门子洗碗机》...</h3>
    </a>
    <p class="s1"><span >原创作品</span>- 影视 - Motion Graphic</p>
    <p>3小时前上传</p>
    <p class="s2"><span>1284</span>人气/<span>11</span>评论 / <span>47</span>推荐</p>
    <img src="https://static.zzhitong.com/lesson-files/html/img/6-2-images/play.png" alt="">
    </div>
</div>

</body>
</html>