first commit

历届学生/韩想/项目开发/练习项目/静态页面作业/赵俊凯/pc端/css/clear.css

@@ -0,0 +1,13 @@
+body,a,p,ul,li,h1,h2,h3,h4,h5,h6,input{
+    margin: 0;
+    padding: 0;
+}
+input {
+    outline: none;
+}
+li{
+    list-style: none;
+}
+a{
+    text-decoration: none;
+}

历届学生/韩想/项目开发/练习项目/静态页面作业/赵俊凯/pc端/css/index.css

@@ -0,0 +1,246 @@
+.header{
+    width: 100%;
+    position: relative;
+}
+.header .logo{
+    width: 100%;
+}
+.header_conten{
+    position: absolute;
+    top: 136px;
+    left: 294px;
+}
+.conten_logo img:nth-child(1){
+    width: 281px;
+    margin-right: 24px;
+}
+.conten_logo img:nth-child(2){
+    width: 180px;
+    margin-bottom: 8px;
+}
+.header_conten p:nth-child(2){
+    margin-top: 10px;
+    color:rgb(255, 255, 255) ;
+    font-size: 15px;
+}
+.down{
+    width: 135px;
+    height: 40px;
+    background: #fff;
+    border-radius: 20px;
+    text-align: center;
+    line-height: 40px;
+    font-size: 14px;
+    color: rgb(46, 51, 58);
+    margin-top: 25px;
+}
+.down img{
+    width: 11px;
+    height: 18px;
+    vertical-align: sub;
+}
+.header_list{
+    width: 100%;
+    height: 43px;
+    background: rgb(0 0 0 / 70%);
+    line-height: 43px;
+    position: absolute;
+    bottom: 3px;
+    left: 0px;
+}
+.header_list img{
+    width: 16px;
+    height: 16px;
+    margin-left: 294px;
+    vertical-align: sub;
+}
+.header_list span{
+    color: rgb(255, 255, 255);
+    font-size: 12px;
+    transform: scaleY(0.75);
+}
+.content{
+    width: 100%;
+}
+.content_top{
+    width: 475px;
+    margin: 0 auto;
+}
+.content_top img{
+    width: 475px;
+}
+.content_top p{
+    font-family: PingFangSC-Regular;
+    font-size: 18px;
+    color: rgb(46, 51, 58);
+    margin-top: 10px;
+    text-align: center;
+}
+.content_tx{
+display: flex;
+justify-content: center;
+margin-top: 45px;
+}
+.list{
+width: 104px;
+margin: 0px 28px;
+text-align: center;
+}
+.list img{
+    width: 80px;
+    height: 80px;
+}
+.list p{
+    font-size: 14px;
+    color: rgb(46, 51, 58);
+    margin-top: 12px;
+}
+.pic{
+    width: 1330px;
+    margin: 0 auto;
+    position: relative;
+    margin-top: 25px;
+    margin-bottom: 60px;
+}
+.pic .lm{
+    width: 100%;
+}
+.pic_left{
+    position: absolute;
+    top: 227px;
+    left: 18px;
+}
+.pic_right{
+    position: absolute;
+    top: 227px;
+    right: 18px;
+}
+.pic_left img{
+    width: 26px !important;
+    height: 26px;
+}
+.pic_right img{
+    width: 26px !important;
+    height: 26px;
+}
+.pic .wm{
+    position: absolute;
+    top:175px;
+    left: 0px;
+    width: 100%;
+}
+.lw{
+    display: flex;
+    justify-content: center;
+    margin-top: 21px;
+}
+.lw_l{
+    position: relative;
+}
+.lw_l .bjt{
+    width: 368px;
+    z-index: -1;
+}
+.lw_ll{
+    position: absolute;
+    top: 80px;
+    left: 104px;
+    text-align: center;
+}
+.lw_ll .lwpic{
+    width: 158px;
+    display: block;
+}
+.lw_ll .lwwz{
+    width: 128px;
+    
+}
+.lw_ll p{
+    line-height: 29px;
+    font-family: PingFangSC-Regular;
+    font-size: 21px;
+    color: rgba(46, 51, 58, 0.7);
+    margin-top: 17px;
+}
+.ty{
+    margin: 75px;
+    width: 1041px;
+    margin: 0 auto;
+}
+.ty_pic{
+    margin-top: 44px;
+}
+.ty_pic img{
+    width: 1041px;
+}
+.bq{
+    width: 371px;
+    background: rgb(255, 255, 255);
+    border-radius: 1vw;
+    box-shadow: rgba(0, 0, 0, 0.08) 0px 0.2vw 1.6vw 0px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+    margin-top: 100px;
+}
+.bq_left{
+    margin-right: 10px;
+}
+.bq_left h3{
+    line-height: 24px;
+    font-family: PingFangSC-Regular;
+    font-size: 24px;
+    color: rgb(46, 51, 58);
+    font-weight: 500;
+}
+.bq_left p{
+    color: rgba(46, 51, 58, 0.804);
+    line-height: 19px;
+    font-size: 13px;
+    margin-top: 15px;
+}
+.bq img{
+    width: 159px;
+    margin: 15px  15px 15px 0px;
+}
+.footer{
+    margin-top: 105px;
+    background: rgb(255, 255, 255);
+    box-shadow: rgb(224, 224, 224) 0px -1px 0px 0px;
+}
+.footer_top{
+    width: 80%;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    margin: 0 auto;
+    padding-top: 52px;
+}
+.footer_top div img{
+    width: 47px;
+    margin-right: 12px;
+    vertical-align: middle;
+}
+.footer_top div span{
+    font-family: PingFangSC-Semibold;
+    font-size: 15px;
+    color: rgb(46, 51, 58);
+}
+.footer p{
+    margin-top: 40px;
+    text-align: center;
+    line-height: 42px;
+}
+.footer_dibu{
+    text-align: center;
+    margin-top: 70px;
+    margin-bottom: 17px;
+}
+.footer .footer_dibu img{
+    width: 80px;
+    margin-right: 18px;
+}
+.footer .footer_dibu .gh{
+    width: 18px;
+}

历届学生/韩想/项目开发/练习项目/静态页面作业/赵俊凯/pc端/css/public.css

@@ -0,0 +1,20 @@
+.left{
+float: left;
+}
+
+.right{
+    float: right;
+}
+
+.width_1226{
+   width: 1226px;
+   margin: 0 auto; 
+}
+
+.center{
+    text-align: center;
+}
+.p_75{
+    padding: 0px 0.75rem;
+    box-sizing: border-box;
+}

历届学生/韩想/项目开发/练习项目/静态页面作业/赵俊凯/pc端/index.html

@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="./css/clear.css">
+    <link rel="stylesheet" href="./css/index.css">
+    <link rel="stylesheet" href="./css/public.css">
+</head>
+<body>
+    <div class="header">
+        <img class="logo" src="./image/banner.jpg" alt="">
+        <div class="header_conten">
+            <div class="conten_logo">
+                <img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/logo.svg" alt="">
+                <img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/bannerTag.png" alt="">
+            </div>
+            <p>原1号店于2020年7月22日正式升级为1号会员店，通过全场自营、精选商品模式，<br> 致力于为用户提供品质升级、超值天天低价、便捷省心的会员制购物体验。</p>
+            <div class="down">
+                <img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_Mobile.svg" alt="">
+                <span>下载APP</span>
+            </div>
+        </div>
+        <div class="header_list">
+            <img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_Notice.svg" alt="">
+            <span>1号店PC及H5调整公告</span>
+        </div>
+    </div>
+    <div class="content">
+        <div class="content_top">
+            <img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_jxpz.png" alt="">
+            <p>自营全站商品 以严格选品标准 精挑细选3000+最优好货</p>
+        </div>
+        <div class="content_tx">
+            <div class="list">
+                <img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_jxpzItem1.png" alt="">
+                <p>肉蛋果蔬</p>
+            </div>
+            <div class="list">
+                <img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_jxpzItem2_click.png" alt="">
+                <p>食品饮料</p>
+            </div>
+            <div class="list">
+                <img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_jxpzItem3.svg" alt="">
+                <p>服饰鞋包</p>
+            </div>
+            <div class="list">
+                <img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_jxpzItem4.png" alt="">
+                <p>餐厨日用</p>
+            </div>
+            <div class="list">
+                <img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_jxpzItem5_click.png" alt="">
+                <p>粮油速食</p>
+            </div>
+            <div class="list">
+                <img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_jxpzItem6_click.svg" alt="">
+                <p>精致小店</p>
+            </div>
+        </div>
+        <div class="pic">
+            <img class="lm" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_mainBox2_1_2.png" alt="">
+            <div class="pic_left">
+                <img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_banner_before_default.png" alt="">
+            </div>
+            <div class="pic_right">
+                <img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_banner_after_default.png" alt="">
+            </div>
+            <img class="wm" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_mainBox2_2_1.png" alt="">
+        </div>
+        <div class="wcsz">
+            <div class="content_top">
+                <img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_wcsz.png" alt="">
+                <p>入会专享超值好礼，天天低价</p>
+            </div>
+            <div class="lw">
+                <div class="lw_l">
+                    <img class="bjt" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_wcsz_bgm_1.png" alt="">
+                    <div class="lw_ll">
+                        <img class="lwpic" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_wcsz_item1_1.png" alt="">
+                        <img class="lwwz" src="https://www.yhd.com/yhdmember/static/media/img_wcsz_item1_2.d3f3daa2.png" alt="">
+                        <p>首次入会专享<br>单件免运费</p>
+                    </div>
+                </div>
+                <div class="lw_l">
+                    <img class="bjt" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_wcsz_bgm_2.png" alt="">
+                    <div class="lw_ll">
+                        <img class="lwpic" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_wcsz_item2_1.png" alt="">
+                        <img class="lwwz" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_wcsz_item2_2.png" alt="">
+                        <p>比价京东自营<br>全场会员价</p>
+                    </div>
+                </div>
+                <div class="lw_l">
+                    <img class="bjt" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_wcsz_bgm_3.png" alt="">
+                    <div class="lw_ll">
+                        <img class="lwpic" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_wcsz_item3_1.png" alt="">
+                        <img class="lwwz" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_wcsz_item3_2.png" alt="">
+                        <p>到期没省出会费<br>全额赔付</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="ty">
+            <div class="content_top">
+                <img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_wcsz.png" alt="">
+                <p>入会专享超值好礼，天天低价</p>
+            </div>
+            <div class="ty_pic">
+                <img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/img_fxty_1.png" alt="">
+            </div>
+        </div>
+        <div class="bq">
+            <div class="bq_left">
+                <h3>扫码下载APP<br>开启品质生活</h3>
+                <p>一期仅开放部分城市，<br>敬请期待。</p>
+            </div>
+            <img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_qrCode.png" alt="" srcset="">
+        </div>
+    </div>
+    <div class="footer">
+        <div class="footer_top">
+            <div>
+                <img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_footer_line1_1.svg" alt="">
+                <span>精选好货</span>
+            </div>
+            <div>
+                <img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_footer_line1_2.png" alt="">
+                <span>天天低价</span>
+            </div>
+            <div>
+                <img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_footer_line1_3.png" alt="">
+                <span>全场自营</span>
+            </div>
+            <div>
+                <img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_footer_line1_4.png" alt="">
+                <span>京东物流</span>
+            </div>
+        </div>
+        <p>沪ICP备16050468号 | 经营证照 | 互联网药品信息服务资格证(沪)-经营性-2017-0006 | 违法和不良信息举报电话：4006063968 | 沪B2-20170039 | 沪公网安备 31010502002939号 | 增值电信业务经营许可证 <br>Copyright© 1号会员店 2007-2020， All Rights Reserved
+        </p>
+        <div class="footer_dibu">
+            <img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_footer_line3_1.png" alt="">
+            <img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_footer_line3_3.png" alt="">
+            <img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_footer_line3_4.png" alt="">
+            <img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_footer_line3_5.png" alt="">
+            <img class="gh" src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_footer_line3_small.png" alt="">
+            <img src="https://img.yihaodianimg.com/vip-pro/images/pcQuality/icon_footer_line3_6.png" alt="">
+        </div>
+    </div>
+</body>
+</html>