day06_练习

于 2022-05-05 17:40:43 发布
阅读量45 收藏
点赞数
文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44627935/article/details/124593805
版权

work3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>work3</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .item{
            width: 852px;
            height: 152px;
            /* background-color: cyan; */
            overflow: hidden;
            /* float: left; */
        }
        .item .wz{
            /* background-color: darkgoldenrod; */
            width: 680px;
            height: 152px;
            float: left;
        }
        .item .wz .tm{
            /* background-color: pink; */
            font-size: 18px;
            margin-top: 26px;
            margin-left: 10px;
        }
        .item .wz .nr{
            /* background-color: salmon; */
            font-size: 14px;
            margin-top: 20px;
            margin-left: 10px;
            color: #969696;
        }
        .item .wz img{
            /* background-color: yellow; */
            width: 18px;
            height: 14px;
            float: left;
            margin-top: 20px;
            margin-left: 10px;
        }
        .item .wz .look{
            /* background-color: aqua; */
            margin-top: 16px;
            margin-left: 10px;
            float: left;
        }
        .item .wz .xh{
            /* background-color: aqua; */
            margin-top: 16px;
            margin-left: 10px;
            float: left;
        }
        .item .wz .pl{
            /* background-color: aqua; */
            margin-top: 16px;
            margin-left: 10px;
            float: left;
        }
        .item .wz .jl{
            /* background-color: aqua; */
            margin-top: 16px;
            margin-left: 10px;
            float: left;
            color: #ff8ba2;
        }
        .item .tp {
            /* background-color: brown; */
            width: 172px;
            height: 152px;
            float: left;
        }
        .item .tp img{
            width: 150px;
            height: 100px;
            margin-top: 26px;
            margin-left: 11px;
        }
    </style>
</head>
<body>
    <div class="item">
        <div class="wz">
            <p class="tm">你有没有想过，帮助孩子正确认识“死亡”！</p>
            <p class="nr">死亡。一直是一个沉重的话题，父母很少去跟孩子谈死亡，怕孩子心里有压力，产生更多的恐惧。然而，孩子错误的认识死亡，更容易让孩子产生恐惧心理。玲玲的女人糯糯，自从爷爷走后，变得...</p>
            <div class="tw">
                <img src="img/work3/look.png" alt="">
                <p class="look">1366</p>
                <img src="img/work3/like.png" alt="">
                <p class="xh">1</p>
                <img src="img/work3/pl.png" alt="">
                <p class="pl">0</p>
                <img src="img/work3/circle.png" alt="" style="width: 14px;">
                <p class="jl">情感交流</p>
            </div>
        </div>
        <div class="tp">
            <img src="img/work3/1.webp" alt="">
        </div>
    </div>
    <div class="item">
        <div class="wz">
            <p class="tm">你有没有想过，帮助孩子正确认识“死亡”！</p>
            <p class="nr">死亡。一直是一个沉重的话题，父母很少去跟孩子谈死亡，怕孩子心里有压力，产生更多的恐惧。然而，孩子错误的认识死亡，更容易让孩子产生恐惧心理。玲玲的女人糯糯，自从爷爷走后，变得...</p>
            <div class="tw">
                <img src="img/work3/look.png" alt="">
                <p class="look">1366</p>
                <img src="img/work3/like.png" alt="">
                <p class="xh">1</p>
                <img src="img/work3/pl.png" alt="">
                <p class="pl">0</p>
                <img src="img/work3/circle.png" alt="" style="width: 14px;">
                <p class="jl">情感交流</p>
            </div>
        </div>
        <div class="tp">
            <img src="img/work3/2.webp" alt="">
        </div>
    </div>
</body>
</html>

实现：
在这里插入图片描述
work4：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>work4</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .item{
            /* background-color: cyan; */
            margin-top: 18px;
            margin-left: 18px;
            width: 182px;
            height: 336px;
            border: 1px solid #f3f3f3;
            border-radius: 5px;
            float: left;
        }
        .item img{
            width: 182px;
            height: 242px;
            border-radius: 5px;
        }
        .item .tm{
            /* background-color: pink; */
            margin-top: 18px;
            font-size: 12px;
            margin-left: 13px;
            margin-right: 14px;
        }
        .item .tw{
            /* background-color: tomato; */
            margin-top: 13px;
            width: 182px;
            height: 24px;
        }
        .item .tw img{
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-left: 14px;
            float: left;
        }
        .item .tw .wz{
            /* background-color: yellow; */
            font-size: 10px;
            margin-left: 5px;
            margin-top: 3px;
            float: left;
            color: #949494;
        }
        .item .tw .tp img{
            width: 14px;
            height: 12px;
            margin-left: 12px;
            margin-top: 5px;
            float: left;
        }
        .item .tw .tp .dz{
            /* background-color: yellow; */
            font-size: 10px;
            margin-left: 5px;
            margin-top: 3px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="item">
        <img src="img/work4/1.jpg" alt="">
        <p class="tm">干货分享 | 宝宝夏日骑平衡车暴汗怎么穿</p>
        <div class="tw">
            <img src="img/work4/6.jpg" alt="">
            <p class="wz">全能辣妈Yuki咯</p>
            <div class="tp">
                <img src="img/work4/like.png" alt="">
                <p class="dz">96</p>
            </div>
        </div>
    </div>
    <div class="item">
        <img src="img/work4/2.jpg" alt="">
        <p class="tm">干货分享 | 宝宝夏日骑平衡车暴汗怎么穿</p>
        <div class="tw">
            <img src="img/work4/7.jpg" alt="">
            <p class="wz">全能辣妈Yuki咯</p>
            <div class="tp">
                <img src="img/work4/like.png" alt="">
                <p class="dz">96</p>
            </div>
        </div>
    </div>
    <div class="item">
        <img src="img/work4/3.jpg" alt="">
        <p class="tm">干货分享 | 宝宝夏日骑平衡车暴汗怎么穿</p>
        <div class="tw">
            <img src="img/work4/8.jpg" alt="">
            <p class="wz">全能辣妈Yuki咯</p>
            <div class="tp">
                <img src="img/work4/like.png" alt="">
                <p class="dz">96</p>
            </div>
        </div>
    </div>
    <div class="item">
        <img src="img/work4/4.jpg" alt="">
        <p class="tm">干货分享 | 宝宝夏日骑平衡车暴汗怎么穿</p>
        <div class="tw">
            <img src="img/work4/9.jpg" alt="">
            <p class="wz">全能辣妈Yuki咯</p>
            <div class="tp">
                <img src="img/work4/like.png" alt="">
                <p class="dz">96</p>
            </div>
        </div>
    </div>
    <div class="item">
        <img src="img/work4/5.jpg" alt="">
        <p class="tm">干货分享 | 宝宝夏日骑平衡车暴汗怎么穿</p>
        <div class="tw">
            <img src="img/work4/10.jpg" alt="">
            <p class="wz">全能辣妈Yuki咯</p>
            <div class="tp">
                <img src="img/work4/like.png" alt="">
                <p class="dz">96</p>
            </div>
        </div>
    </div>
</body>
</html>

实现：
在这里插入图片描述
work5：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>work5</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .item{
            width: 715px;
            height: 216px;
            /* background-color: cyan; */
            overflow: hidden;
        }
        .item .tm{
            /* background-color: pink; */
            font-size: 18px;
            font-weight: 600;
            margin-top: 18px;
            margin-left: 12px;
        }
        /* .item .tp{
            
        } */
        .item img{
            width: 160px;
            height: 120px;
            border-radius: 5px;
            margin-top: 14px;
            margin-left: 12px;
        }
        .item .zh{
            /* background-color: yellow; */
            margin-left: 12px;
            font-size: 14px;
            color: #aaaaaa;
            float: left;
            margin-top: 8px;
        }
        .item .pl{
            /* background-color: yellow; */
            margin-left: 12px;
            font-size: 14px;
            color: #aaaaaa;
            float: left;
            margin-top: 8px;
        }
        .item .time{
            /* background-color: yellow; */
            margin-left: 12px;
            font-size: 14px;
            color: #aaaaaa;
            float: left;
            margin-top: 8px;
        }
    </style>
</head>
<body>
    <div class="item">
        <p class="tm">油价调整消息：今天4月18日，全国加油站调价后92、95汽油价格</p>
        <!-- <div class="tp"> -->
            <img src="img/work5/1.jpg" alt="">
            <img src="img/work5/2.jpg" alt="">
            <img src="img/work5/3.jpg" alt="">
            <img src="img/work5/4.jpg" alt="">
        <!-- </div> -->
        <p class="zh">每日财经整合</p>
        <p class="pl">24评论</p>
        <p class="time">17小时前</p>
    </div>
    <div class="item">
        <p class="tm">油价调整消息：今天4月18日，全国加油站调价后92、95汽油价格</p>
        <!-- <div class="tp"> -->
            <img src="img/work5/5.jpg" alt="">
            <img src="img/work5/6.jpg" alt="">
            <img src="img/work5/7.jpg" alt="">
            <img src="img/work5/8.jpg" alt="">
        <!-- </div> -->
        <p class="zh">娱人故事</p>
        <p class="pl">199评论</p>
        <p class="time">02月05日</p>
    </div>
</body>
</html>

实现：
在这里插入图片描述
work6：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>work6</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .item{
            width: 388px;
            height: 210px;
            border: 1px solid #787878;
            margin-top: 10px;
            margin-left: 20px;
            /* background-color: cyan; */
            float: left;
        }
        .item .top{
            /* background-color: pink; */
            width: 356px;
            height: 130px;
            margin-left:16px;
            /* float: left; */
            border-bottom: 1px dotted #787878;
        }
        .item .top .zw{
            /* margin-left: 20px; */
            font-size: 18px;
            margin-top: 20px;
            float: left;
            /* background-color: purple; */
        }
        .item .top .sj{
            margin-left: 5px;
            font-size: 14px;
            margin-top: 23px;
            float: left;
            color: #787878;
            /* background-color: saddlebrown; */
        }
        .item .top .xz{
            margin-left: 50px;
            font-size: 18px;
            margin-top: 20px;
            float: left;
            color: #fc3e00;
            /* background-color: seagreen; */
        }
        .item .top .jy{
            margin-left: 0px;
            font-size: 14px;
            margin-top: 14px;
            color: #787878;
            float: left;
            /* background-color: springgreen; */
        }
        .item .top .border{
            margin-top: 14px;
            width: 356px;
            height: 26px;
            /* background-color: yellow; */
            float: left;
        }
        .item .top .border .fw{
            width: 60px;
            height: 26px;
            line-height: 26px;
            border: 1px solid #787878;
            font-size: 12px;
            text-align: center;
            float: left;
        }
        .item .top .border .rg{
            width: 60px;
            height: 26px;
            line-height: 26px;
            border: 1px solid #787878;
            font-size: 12px;
            text-align: center;
            float: left;
            margin-left: 12px;
        }
        .item .top .border .gg{
            width: 60px;
            height: 26px;
            line-height: 26px;
            border: 1px solid #787878;
            font-size: 12px;
            text-align: center;
            float: left;
            margin-left: 12px;
        }
        .item .bottom{
            width: 356px;
            height: 79px;
            /* background-color: #fc3e00; */
            margin-left: 16px;
        }
        .item .bottom img{
            width: 40px;
            height: 40px;
            margin-top: 20px;
            float: left;
        }
        .item .bottom .mt{
            color: #00b48b;
            width: 200px;
            height: 14px;
            margin-top: 21px;
            margin-left: 15px;
            float: left;
            /* font-size: 14px;*/
            /* background-color: aqua;  */
            
        }
        .item .bottom .xx{
            color: #787878;
            margin-top: 8px;
            margin-left: 15px;
            float: left;
            font-size: 14px;
            /* background-color: aqua; */
        }
    </style>
</head>
<body>
    <div class="item">
        <div class="top">
            <p class="zw">储备营业处...</p>
            <p class="sj">[1天前发布]</p>
            <p class="xz" style="margin-left: 90px;">20k-25k</p>
            <p class="jy">经验1-3年 / 大专</p>
            <div class="border">
                <p class="fw">软件服务</p>
                <p class="rg">人工智能</p>
                <p class="gg">广告产品</p>
            </div>
        </div>
        <div class="bottom">
            <img src="img/work6/1.png" alt="">
            <div>
                <p class="mt">中美大都会</p>
                <p class="xx">金融业 / 上市公司 / 北京</p>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="top">
            <p class="zw">产品经理</p>
            <p class="sj">[1天前发布]</p>
            <p class="xz" style="margin-left: 80px;">11k-16k·13薪</p>
            <p class="jy">经验1-3年 / 本科</p>
            <div class="border">
                <p class="fw">软件服务</p>
                <p class="rg">人工智能</p>
                <p class="gg">广告产品</p>
            </div>
        </div>
        <div class="bottom">
            <img src="img/work6/2.png" alt="">
            <div>
                <p class="mt">微媒</p>
                <p class="xx">社交媒体 / 未融资 / 杭州</p>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="top">
            <p class="zw">用户运营经理</p>
            <p class="sj">[1天前发布]</p>
            <p class="xz">14k-24k·16薪</p>
            <p class="jy">经验1-3年 / 本科</p>
            <div class="border">
                <p class="fw">软件服务</p>
                <p class="rg">人工智能</p>
                <p class="gg">广告产品</p>
            </div>
        </div>
        <div class="bottom">
            <img src="img/work6/3.png" alt="">
            <div>
                <p class="mt">度小满</p>
                <p class="xx">专业服务 | 咨询 / A轮 / 北京</p>
            </div>
        </div>
    </div>
</body>
</html>

实现：
在这里插入图片描述

[Augenstern]
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值