无聊的样式图

最新推荐文章于 2021-06-04 20:00:48 发布

HelloWorld. py

最新推荐文章于 2021-06-04 20:00:48 发布

阅读量215

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/AK47red/article/details/114683021

版权

Web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!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>
        .Work_1_Div{
            width: 442px;
            height: 187px;
            background-color: #f3f7fa;
        }
        .Work_1_Text1{
            width: 396px;
            height: 36px;
            margin: 24px 10px 19px;
            background-color: #00adef;
            font: bold 16px/36px "微软雅黑";
            color: white;
            padding-left: 24px;
        }
        .Work_1_Text2{
            width: 400px;
            height: 60px;
            margin-right: 0px;
            margin-left: 10px;
            background-color: #f1faff;
            border-width: 1px;
            border-color: #00afee;
            border-style: solid;
            font-size: 14px;
            font-family: "微软雅黑";
            padding: 14px 0px 13px 19px;
        }
        .D_2{
            width: 290px;
            height: 290px;
            border-width: 10px 5px;
            border-color: #f5f5f5;
            border-style: solid;
        }
        .img2{
            width: 162px;
            height: 162px;
            padding: 15px 65px 0 65px;
        }
        .D_3{
            width: 182px;
            height: 28px;
            padding: 0px 58px 0 54px;
            font: 14px/28px "微软雅黑";
        }
        .D_4{
            width: 72px;
            height: 25px;
            padding: 0 110px 0 110px;
            font: 12px/25px "微软雅黑";
        }
        .D_5{
            width: 21px;
            height: 17px;
            padding: 0 156px 0 115px;
            font-size: 14px;
            font-family: "微软雅黑";
            font-weight: bold;
            color: #e52e2e;
        }
        .D_6{
            height: 18px;
            font-weight: 87px;
            font: bold 14px/18px "微软雅黑";
            color: #e52e2e;
            padding: 0 103px 0 102px;
        }
        .wy_31{
            width: 296px;
            height: 417px;
            border-style: solid;
            border-color: #f5f5f5;
            border-width: 9px;
        }
        .img3{
            width: 296px;
            height: 220px;
        }
        .wy_32{
            width: 240px;
            height: 72px;
            font: 14px/26px "微软雅黑";
            padding: 28px 30px 0 27px;
        }
        .wy_33{
            width: 142px;
            height: 24px;
            font:  12px/24px "微软雅黑";
            padding: 19px 129px 0 27px;
            color: #ccb7c2;
        }
        .wy_34{
            width: 140px;
            height: 28px;
            font:  14px/28px "微软雅黑";
            padding: 6px 98px 0 30px;
            color: #333333;
        }
        ul{
            margin: 0;
            padding: 0;
        }
        li{
            margin: 0;
            width: 141px;
            height: 49px;
            padding-left:  21px;
            font: 16px/49px "微软雅黑";
            border-width: 0.5px 1px 0.5px 1px;
            border-style: solid;
            border-color: #e6e6e6;
        }
        a{
            color: #333333;
            text-decoration: none;
        }
        .d_4{
            width: 164px;
            height: 50px;
            background-color: #ff4a00;
        }
        span{
            width: 88px;
            height: 50px;
            font: 18px/50px "微软雅黑";
            color: white;
            padding-left: 16px;
        }
    </style>
</head>
<body>
    <div class="Work_1_Div">
        <div class="Work_1_Text1">我是内容</div>
        <div class="Work_1_Text2">我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</div>
    </div>
    <br><br><br><br><br>
    <div class="D_2">
        <div class="D_img">
            <img class="img2" src="images/2.jpg" alt="">
        </div>
        
        <div class="D_3">北京联通100M宽带包14个月</div>
        <div class="D_4">办理送路由器</div>
        <div class="D_5">87</div>
        <div class="D_6">￥879 ￥<del>880</del> </div>
        
    </div>
    <br><br><br><br><br>

    <div class="wy_31">
        <img class="img3" src="images/3.jpg" alt="">
        <div class="wy_32">
            非常完美，孩子使用防止沉迷于电话影<br>
            响学习，做工很好，定位基本准确，通<br>话清晰，如果加入时间显示就更完美...
        </div>
        <div class="wy_33">来自于17857629的评价</div>
        <div class="wy_34">米免定位电话 <span style="color: #ece5e0;">|</span> <span style="color: #ff6700;">149元</span></div>

    </div>
    <br><br><br><br><br>
    <div>
        <div class="d_4"> <span> IT培训课程</span>
        <ul style="list-style: none;">
            <li><a href="#">互联网营销培训</a></li>            
            <li><a href="#">SEO网站运营培训</a></li>            
            <li><a href="#">SEM与信息流培训</a></li>            
            <li><a href="#">新媒体运营培训</a></li>            
            <li><a href="#">高端电商培训</a></li>            
            <li><a href="#">UI/UE交互涉及培训</a></li>            
            <li><a href="#">JAVA培训</a></li>            
        </ul>
    </div>
</body>
</html>

效果：

HelloWorld. py

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
无聊的样式图

<!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>Do.
复制链接

扫一扫

专栏目录