html、css --苏宁官网静态界面

最新推荐文章于 2022-07-12 21:32:54 发布

置顶一蓑烟雨..

最新推荐文章于 2022-07-12 21:32:54 发布

阅读量3.5k

点赞数 1

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/weixin_44713688/article/details/119107663

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前一阵子自己扒下来的一个苏宁官网的界面：

html部分：

<!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"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>
        <img src="../0421/img2.png" alt="">苏宁App
    </title>
    <link rel="stylesheet" href="./base.css"> //适配部分
    <link rel="stylesheet" href="./suning.css">
</head>
<body>
    <div>
        <!-- 搜索栏 -->
        <div class="sn_nav_wrapper">
            <div class="index-nav">
                <div class="top-bg">
                    <img src="https://image1.suning.cn/uimg/cms/img/161243730178975729.png" alt="">
                </div>
                <div class="top-type">
                    <div class="content-wrap-one">
                        <div class="classes">
                            <img src="https://image3.suning.cn/uimg/cms/img/157199320847433454.png" alt="">
                        </div>
                        <div class="top-wrapper">
                            <img class="aa-img" src="https://image3.suning.cn/uimg/cms/img/161941781951334222.gif" alt="">
                        </div>
                        <div class="logbtn">
                            <img class="logImg" src="https://image1.suning.cn/uimg/cms/img/157199321817918653.png" alt="">
                        </div>
                    </div>
                    <div class="content-wrap-two">
                        <div class="search-bar">
                            <a class="search" href=""></a>
                            <i class="search-icon"></i>
                            <form>
                                <input class="searchInput" type="text" name="index_none_header_sysc" placeholder="好酒限时抢购" autocomplete="off">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主页面 -->
        <div class="index_wrap">

            <!-- 轮播图 -->
            <div class="banner">
                <img class="banner-bg" src="https://image2.suning.cn/uimg/cms/img/161243731909884312.png" alt="">
                <div class="swipe-wrapper">
                    <div class="swipe w">
                        <img src="https://oss.suning.com/aps/aps_learning/iwogh/2021/04/25/19/iwoghBannerPicture/d2294d94d1a7489891086a1bfe8076e1.png?format=_is_1242w_610h" alt="">
                    </div>
                </div>
            </div>

            <!-- 商品推荐 -->
            <div class="hor_view">
                <img src="https://image3.suning.cn/uimg/cms/img/161941922397576921.gif" alt="">
                <img src="https://image1.suning.cn/uimg/cms/img/161941924460383346.gif" alt="">
                <img src="https://image2.suning.cn/uimg/cms/img/161941927557187261.gif" alt="">
            </div>

            <!-- 进入列表 -->
            <div class="enter_list">
                <div class="fix">
                    <a href="">
                        <div class="enter-img">
                            <img class="enter" src="https://image2.suning.cn/uimg/cms/img/161294178174781132.png?from=mobile" alt="">
                        </div>
                        <div class="enter-title">苏宁秒杀</div>
                    </a>
                    <a href="">
                        <div class="enter-img">
                            <img class="enter" src="https://image3.suning.cn/uimg/cms/img/161293951076282456.png?from=mobile" alt="">
                        </div>
                        <div class="enter-title">苏宁超市</div>
                    </a>
                    <a href="">
                        <div class="enter-img">
                            <img class="enter" src="https://image2.suning.cn/uimg/cms/img/161294179334814175.png?from=mobile" alt="">
                        </div>
                        <div class="enter-title">苏宁拼购</div>
                    </a>
                    <a href="">
                        <div class="enter-img">
                            <img class="enter" src="https://image2.suning.cn/uimg/cms/img/161293957567317395.png?from=mobile" alt="">
                        </div>
                        <div class="enter-title">手机数码</div>
                    </a>
                    <a href="">
                        <div class="enter-img">
                            <img class="enter" src="https://image1.suning.cn/uimg/cms/img/161293958842515136.png?from=mobile" alt="">
                        </div>
                        <div class="enter-title">苏宁家电</div>
                    </a>
                    <a href="">
                        <div class="enter-img">
                            <img class="enter" src="https://image1.suning.cn/uimg/cms/img/161293959950045622.png?from=mobile" alt="">
                        </div>
                        <div class="enter-title">免费水果</div>
                    </a>
                    <a href="">
                        <div class="enter-img">
                            <img class="enter" src="https://image1.suning.cn/uimg/cms/img/161293961484173843.png?from=mobile" alt="">
                        </div>
                        <div class="enter-title">super会员</div>
                    </a>
                    <a href="">
                        <div class="enter-img">
                            <img class="enter" src="https://image3.suning.cn/uimg/cms/img/161293963977525820.png?from=mobile" alt="">
                        </div>
                        <div class="enter-title">签到有礼</div>
                    </a>
                    <a href="">
                        <div class="enter-img">
                            <img class="enter" src="https://image2.suning.cn/uimg/cms/img/161293965567020138.png?from=mobile" alt="">
                        </div>
                        <div class="enter-title">领券中心</div>
                    </a>
                    <a href="">
                        <div class="enter-img">
                            <img class="enter" src="https://image2.suning.cn/uimg/cms/img/161293968063152286.png?from=mobile" alt="">
                        </div>
                        <div class="enter-title">更多频道</div>
                    </a>

                </div>
            </div>

            <!-- 礼包 -->
            <div class="newImgFloor">
                <div class="newImgFloor-content">
                    <a class="newItem newItem2" href="">
                        <img class="" src="https://image1.suning.cn/uimg/cms/img/161940276611749059.png" alt="">
                    </a>
                    <a class="newItem newItem2" href="">
                        <img class="" src="https://image3.suning.cn/uimg/cms/img/161940277329467424.gif" alt="">
                    </a>
                    <a class="newItem newItem2" href="">
                        <img class="" src="https://image3.suning.cn/uimg/cms/img/161940277936245572.gif" alt="">
                    </a>

                </div>
            </div>

            <!-- 空格行 -->
            <div class="big-blank"></div>

            <!-- 秒杀 -->
            <div class="seckill">
                <div class="zsq-area lazyimg">
                    <div class="miaosha">
                        <div class="title">限时秒杀</div>
                        <div class="seckill-time">
                            <span class="time-hour">03</span>
                            <span class="time-minute">45</span>
                            <span class="time-second">56</span>  
                        </div>
                    </div>
                    <p class="seckill-text">人气好货限时抢</p>
                    <ul>
                        <li>
                            <img src="https://image2.suning.cn/uimg/nmps/MBLSPZT/10085278611927193136picH_1_370x370.jpg" alt="">
                            <p class="tag-price"><span>¥</span><span class="first-price">36</span><span>.8</span></p>
                        </li>
                        <li style="margin-left: 20px;">
                            <img src="https://image2.suning.cn/uimg/nmps/MBLSPZT/10085697611690748798picH_1_370x370.jpg" alt="">
                            <p class="tag-price"><span>¥</span><span class="first-price">16</span><span></span></p>
                        </li>
                    </ul>
                </div>
                <div class="discount lazyimg">
                    <div class="miaosha">
                        <div class="title">大聚惠</div>
                    </div>
                    <p class="seckill-text">聚优品 · 惠生活</p>
                    <ul style="display: flex;">
                        <li style="margin-left: 16px;">
                            <img src="https://imgservice.suning.cn/uimg1/b2c/image/Yh_Zj8o1Gqp33viiU6H3RA.jpg?format=_is_200w_200h_4e.webp" alt="">
                            <p class="img-desc">爱氏晨曦(Arla)</p>
                            
                        </li>
                        <li style="margin-left: 20px;">
                            <img src="https://imgservice.suning.cn/uimg1/b2c/image/Sh_DepyyCpYjiMu2LbGEYA.jpg?format=_is_200w_200h_4e.webp" alt="">
                            <p class="img-desc-right">伊利(YILI)</p>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 新品 -->
            <div class="sthnew">
                <div class="zsq-area lazyimg">
                    <div class="miaosha">
                        <div class="title">新品首发</div>
                    </div>
                    <p class="seckill-text">418免费试新机</p>
                    <ul>
                        <li>
                            <img src="https://image3.suning.cn/uimg/cms/img/161672229455884875.jpg?format=_is_200w_200h.webp" alt="">
                        </li>
                        <li style="margin-left: 20px;">
                            <img src="https://image3.suning.cn/uimg/cms/img/161732948498758177.jpg?format=_is_200w_200h.webp" alt="">
                        </li>
                    </ul>
                </div>
                <div class="discount lazyimg">
                    <div class="miaosha">
                        <div class="title">苏宁拼购</div>
                    </div>
                    <p class="seckill-text">2人拼更实惠 全场包邮</p>
                    <ul style="display: flex;">
                        <li style="margin-left: 16px;">
                            <img src="https://imgservice.suning.cn/uimg1/sniss/improve/YgHRlJGyO_RQ6ylAp_0k0g.jpg?format=_is_200w_200h_4e.webp" alt="">
                            <p class="img-desc">2人拼129</p>
                            
                        </li>
                        <li style="margin-left: 20px;">
                            <img src="https://imgservice.suning.cn/uimg1/sniss/improve/613Z_6unWrSogCdwabIBAQ.jpg?format=_is_200w_200h_4e.webp" alt="">
                            <p class="img-desc-right">2人拼12.9</p>
                        </li>
                    </ul>
                </div>
               
            </div>

            <div class="space-px"></div>

            <!-- 推荐 -->
            <div class="recommend">
                <div class="title-left">
                    <div>
                        <p class="rec-title">为您推荐</p>
                        <p class="rec-desc">精选频道</p>
                    </div>
                </div>
                <div class="four-space">
                    <div class="rec-item">
                        <img class="rec-img" src="https://image1.suning.cn/uimg/b2c/qrqm/0070225856000000011826433577_200x200.jpg?format=_is_200w_200h_4e.webp" alt="">
                        <p class="rec-img-tit">苏宁国际</p>
                    </div>
                    <div class="rec-item">
                        <img class="rec-img" src="https://image3.suning.cn/uimg/b2c/qrqm/0010211679000000011501638758_200x200.jpg?format=_is_200w_200h_4e.webp" alt="">
                        <p class="rec-img-tit">苏宁Outlets</p>
                    </div>
                    <div class="rec-item">
                        <img class="rec-img" src="https://image1.suning.cn/uimg/b2c/qrqm/0010133102000000012122891022_200x200.jpg?format=_is_200w_200h_4e.webp" alt="">
                        <p class="rec-img-tit">会员抢购</p>
                    </div>
                    <div class="rec-item">
                        <img class="rec-img" src="https://image3.suning.cn/uimg/cms/img/160941866483066340.png?from=mobile" alt="">
                        <p class="rec-img-tit">Super会员</p>
                    </div>
                </div>
            </div>

            <!-- 推荐榜单 -->
            <div class="new-bd">
                <div class="title-img">
                    <img class="bdtitle" src="https://image1.suning.cn/uimg/cms/img/157793125530122894.png?from=mobile" alt="">
                </div>
                <div class="newbd-list">
                    <div class="bd-three">
                        <div class="bd-one-item">
                            <img class="bditem-bg" src="https://image2.suning.cn/uimg/cms/img/156929156220838915.png?from=mobile" alt="">
                            <img class="bdpro-img" src="https://imgservice.suning.cn/uimg1/sniss/improve/BQjKVAQ-vC4caxB6niBhXQ.jpg?format=_is_200w_200h_4e.webp" alt="">
                            <p class="three-name">
                                <span>趋势榜</span>
                            </p>
                            <p class="three-title">日常防护口罩榜</p>
                            <p class="three-desc">卖爆6599件</p>
                        </div>
                        <div class="bd-one-item">
                            <img class="bditem-bg" src="https://image1.suning.cn/uimg/cms/img/156929175197393382.png?from=mobile" alt="">
                            <img class="bdpro-img" src="https://imgservice.suning.cn/uimg1/sniss/improve/FXpkjEoh3h5dA4pG9Zb98Q.jpg?format=_is_200w_200h_4e.webp" alt="">
                            <p class="three-name">
                                <span>人气榜</span>
                            </p>
                            <p class="three-title">营养滋补榜</p>
                            <p class="three-desc">卖爆8.4万件</p>
                        </div>
                        <div class="bd-one-item">
                            <img class="bditem-bg" src="https://image2.suning.cn/uimg/cms/img/156929156220838915.png?from=mobile" alt="">
                            <img class="bdpro-img" src="https://imgservice.suning.cn/uimg1/sniss/improve/3PtiBo9639zLGdi9ih9cCg.jpg?format=_is_200w_200h_4e.webp" alt="">
                            <p class="three-name">
                                <span>美食榜</span>
                            </p>
                            <p class="three-title">休闲补脑坚果榜</p>
                            <p class="three-desc">卖爆6.4万件</p>
                        </div>
                    </div>
                    <div class="bd-two">
                        <div class="two-hang">
                            <div class="two-item">
                                <div class="first-title">
                                    <span class="zTitle line-clamp1">休闲补脑坚果榜</span><span class="two-name line-clamp1">趋势榜</span>
                                </div>
                                <p class="fTitle line-clamp1">本周趋势上升50%</p>
                                <div class="img-wrapper">
                                    <img src="https://imgservice.suning.cn/uimg1/sniss/improve/COOxq8bfPwuDaQMflv5ssw.jpg?format=_is_200w_200h_4e.webp" alt="">
                                </div>
                                <div class="img-wrapper right-wrapper">
                                    <img src="https://imgservice.suning.cn/uimg1/sniss/improve/-l3x4DVK9OhS3bV9jnNFXA.jpg?format=_is_200w_200h_4e.webp" alt="">
                                </div>
                            </div>
                            <div class="hor-gap"></div>
                            <div class="two-item">
                                <div class="first-title">
                                    <span class="zTitle line-clamp1">逆龄活肤精华榜</span><span class="two-name line-clamp1">人气榜</span>
                                </div>
                                <p class="fTitle line-clamp1">卖爆5539件</p>
                                <div class="img-wrapper">
                                    <img src="https://image.suning.cn/uimg/b2c/qrqm/0000000000000000010531399642.jpg?format=_is_200w_200h_4e.webp" alt="">
                                </div>
                                <div class="img-wrapper right-wrapper">
                                    <img src="https://imgservice.suning.cn/uimg1/sniss/improve/9gXuk_vJnPaiH75XyfSKig.jpg?format=_is_200w_200h_4e.webp" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="space-px"></div>
                        <div class="two-hang">
                            <div class="two-item">
                                <div class="first-title">
                                    <span class="zTitle line-clamp1">滋润便携湿纸榜</span><span class="two-name line-clamp1">人气榜</span>
                                </div>
                                <p class="fTitle line-clamp1">卖爆3.3万件</p>
                                <div class="img-wrapper">
                                    <img src="https://imgservice.suning.cn/uimg1/sniss/improve/Hkd0M22B0HWzdsJ90JU4bQ.jpg?format=_is_200w_200h_4e.webp" alt="">
                                </div>
                                <div class="img-wrapper right-wrapper">
                                    <img src="https://imgservice.suning.cn/uimg1/sniss/improve/ItrVxtSi7ofC2W0uN-3OXw.jpg?format=_is_200w_200h_4e.webp" alt="">
                                </div>
                            </div>
                            <div class="hor-gap"></div>
                            <div class="two-item">
                                <div class="first-title">
                                    <span class="zTitle line-clamp1">无烟味油烟机榜</span><span class="two-name line-clamp1">人气榜</span>
                                </div>
                                <p class="fTitle line-clamp1">卖爆6293件%</p>
                                <div class="img-wrapper">
                                    <img src="https://imgservice.suning.cn/uimg1/sniss/improve/I5LMISCBdvy-axEQwYtALg.jpg?format=_is_200w_200h_4e.webp" alt="">
                                </div>
                                <div class="img-wrapper right-wrapper">
                                    <img src="https://image.suning.cn/uimg/b2c/qrqm/0000000000000000010576417885.jpg?format=_is_200w_200h_4e.webp" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 空格行 -->
            <div class="big-blank"></div>
            
            <!-- 猜你喜欢 -->
            <div class="guessUlike">
                <div class="like-title">
                    <img class="liketitle-img" src="https://image1.suning.cn/uimg/cms/img/157793128909842388.png?format=_is_1242w_100h.webp" alt="">
                </div>
                <div class="pro-list-wrapper">
                    <div class="pro-list">
                        <div class="left-list">
                            <div class="kw-wrapper normal-pro">
                                <img src="https://uimgproxy.suning.cn/uimg1/pcpv/pcpv/iwogh/2021/04/25/17/iwoghBannerPicture/F8Vq4pLIVA1619341291992.png?format=_is_300w_300h_4e.webp" alt="">
                                <p class="pro-title line-clamp-2">【新品】联想(Lenovo)YOGA 14s 2021款 标压锐龙版14英寸全面屏超轻薄本笔记本电脑(8核 R7-5800H 16G 512G 2.8K 90Hz高色域屏)深空灰</p>
                                <p class="cuxiao-tag">
                                    <img  class="ziying-icon" src="https://image1.suning.cn//uimg/cms/img/160448074804855377.png">
                                </p>
                                <div class="pro-price">
                                    <div class="real-price">
                                        <span class="flag">￥</span>
                                        <span class="pre-price">6299</span>
                                        <span class="price-comments">40+评价</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="right-list">
                            <div class="kw-wrapper normal-pro">
                                <div class="kw-wrapper normal-pro">
                                    <img src="https://imgservice.suning.cn/uimg1/b2c/image/MTgjhBE_H2mMi1Q-BAHdHw.jpg?format=_is_300w_300h_4e.webp" alt="">
                                    <p class="pro-title line-clamp-2">【1折价55.3元】唐狮春季情侣装牛仔外套男女韩版宽松港风牛仔衣帅气潮牛仔夹克_ B款/女款/深牛仔蓝 M</p>
                                    <p class="cuxiao-tag">
                                        <img  class="ziying-icon" src="https://image1.suning.cn//uimg/cms/img/160448074804855377.png">
                                        <span class="cx-text">满2件打1折</span>
                                    </p>
                                    <div class="pro-price">
                                        <div class="real-price">
                                            <span class="flag">￥</span>
                                            <span class="pre-price">533</span>
                                            <span class="price-comments">1评价</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="left-list">
                            <div class="kw-wrapper normal-pro">
                                <div class="kw-wrapper normal-pro">
                                    <img src="https://imgservice.suning.cn/uimg1/b2c/image/0tpM1_J4SoW0dy2QGPhNPg.jpg?format=_is_300w_300h_4e.webp" alt="">
                                    <p class="pro-title line-clamp-2">好奇Huggies铂金装纸尿裤XL64片(12-17kg)加大号婴儿尿不湿超薄透气</p>
                                    <p class="cuxiao-tag">
                                        <img  class="ziying-icon" src="https://image1.suning.cn//uimg/cms/img/160448074804855377.png">
                                    </p>
                                    <div class="pro-price">
                                        <div class="real-price">
                                            <span class="flag">￥</span>
                                            <span class="pre-price">159</span>
                                            <span class="price-comments">7.3万+评价</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="right-list">
                            <div class="kw-wrapper normal-pro">
                                <div class="kw-wrapper normal-pro">
                                    <div class="kw-wrapper normal-pro">
                                        <img src="https://imgservice.suning.cn/uimg1/b2c/image/MTgjhBE_H2mMi1Q-BAHdHw.jpg?format=_is_300w_300h_4e.webp" alt="">
                                        <p class="pro-title line-clamp-2">【1折价55.3元】唐狮春季情侣装牛仔外套男女韩版宽松港风牛仔衣帅气潮牛仔夹克_ B款/女款/深牛仔蓝 M</p>
                                        <p class="cuxiao-tag">
                                            <img  class="ziying-icon" src="https://image1.suning.cn//uimg/cms/img/160448074804855377.png">
                                            <span class="cx-text">满2件打1折</span>
                                        </p>
                                        <div class="pro-price">
                                            <div class="real-price">
                                                <span class="flag">￥</span>
                                                <span class="pre-price">533</span>
                                                <span class="price-comments">1评价</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="left-list">
                            <div class="kw-wrapper normal-pro">
                                <div class="kw-wrapper normal-pro">
                                    <img src="https://imgservice.suning.cn/uimg1/b2c/image/0tpM1_J4SoW0dy2QGPhNPg.jpg?format=_is_300w_300h_4e.webp" alt="">
                                    <p class="pro-title line-clamp-2">好奇Huggies铂金装纸尿裤XL64片(12-17kg)加大号婴儿尿不湿超薄透气</p>
                                    <p class="cuxiao-tag">
                                        <img  class="ziying-icon" src="https://image1.suning.cn//uimg/cms/img/160448074804855377.png">
                                    </p>
                                    <div class="pro-price">
                                        <div class="real-price">
                                            <span class="flag">￥</span>
                                            <span class="pre-price">159</span>
                                            <span class="price-comments">7.3万+评价</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="right-list">
                            <div class="kw-wrapper normal-pro">
                                <div class="kw-wrapper normal-pro">
                                    <div class="kw-wrapper normal-pro">
                                        <img src="https://imgservice.suning.cn/uimg1/b2c/image/bv_bliIsUKgNZuSIE6wbIg.png?format=_is_300w_300h_4e.webp" alt="">
                                        <p class="pro-title line-clamp-2">满300减200【三只松鼠 无骨凤爪110g】真空熟食卤味香辣味即食零食小吃 泡椒味 110g</p>
                                        <p class="cuxiao-tag">
                                            <img  class="ziying-icon" src="https://image1.suning.cn//uimg/cms/img/160448074804855377.png">
                                            <span class="cx-text">满2件打1折</span>
                                        </p>
                                        <div class="pro-price">
                                            <div class="real-price">
                                                <span class="flag">￥</span>
                                                <span class="pre-price">49.0</span>
                                                <span class="price-comments">100+评价</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="to-login">
                <img src="https://image1.suning.cn/uimg/cms/img/157588645542963955.png" alt="">
            </div>
            <!-- 底部导航栏 -->
            <div class="bottom-btns">
                <div class="bottom-btn1">
                    <a class="cur goto-btn" href="">
                        <img class="guess opa1" src="https://image3.suning.cn/uimg/cms/img/157543975265772267.png?from=mobile" alt="">
                        <img class="index opa1" src="https://image3.suning.cn/uimg/cms/img/157543974786039763.png?from=mobile" alt="">
                        <span class="guess-text">猜你喜欢</span>
                        <span class="index">首页</span>
                    </a>
                </div>
                <div class="bottom-btn1">
                    <a class="cur goto-btn" href="">
                        <img class="guess opa1" src="https://image1.suning.cn/uimg/cms/img/157562573743964714.png?from=mobile" alt="">
                        <span class="guess-text">分类</span>
                    </a>
                </div>
                <div class="bottom-btn1">
                    <a class="cur goto-btn" href="">
                        <img class="guess opa1" src="https://image2.suning.cn/uimg/cms/img/157543978244974042.png?from=mobile" alt="">
                        <span class="guess-text">排行榜</span>
                    </a>
                </div>
                <div class="bottom-btn1">
                    <a class="cur goto-btn" href="">
                        <img class="guess opa1" src="https://image1.suning.cn/uimg/cms/img/157543979328589256.png?from=mobile" alt="">
                        <span class="guess-text">购物车</span>
                    </a>
                </div>
                <div class="bottom-btn1">
                    <a class="cur goto-btn" href="">
                        <img class="guess opa1" src="https://image3.suning.cn/uimg/cms/img/157543980229048220.png?from=mobile" alt="">
                        <span class="guess-text">我的易购</span>
                    </a>
                </div>
            </div>

            <div class="lqwx">
                <img src="https://image3.suning.cn/uimg/cms/img/160976296805480325.gif" alt="">
            </div>
            <div class="lqwx" style="bottom: 8rem;">
                <img src="https://image.suning.cn/uimg/cms/img/159463095607612281.png" alt="">
            </div>
            
        </div>
    </div>
</body>
</html>

下面是css部分：

body{
    background-color: #f7f7f7;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    /* min-width: 750px; */
}
img{
    max-width: 100%;
    vertical-align: middle;
    
}
a{
    color: #333;
    text-decoration: none;
}


/* -- 搜索栏 -- */
.sn_nav_wrapper{
    width: 15rem;
    height: 3.6rem;
    /* 90px */
    margin: 0 auto;
    
}
.index_nav{
    position: relative;
    background: #FFDB47;
    width: 15rem;
    margin: 0 auto;
    z-index: 100;
    font-size: 0.48rem;
    line-height: 1.76rem;
    overflow: hidden;
}
.top-bg{
    position: absolute;
    top: 0;
    /* left: 0; */
    width: 15rem;
    height: 3.6rem;
    overflow: hidden;
}
.top-type{
    width: 15rem;
    display: block;
    position: relative;
}
.content-wrap-one{
    width: 13.64rem;
    height: 1.76rem;
    margin: 0 auto;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
}
.classes{
    display: block;
    width: 0.72rem;
    height: 1.2rem;
}
.top-wrapper{
    width: 11.4rem;
    height: 1.76rem;
    justify-content: center;
    display: flex;
    align-items: center;
}
.aa-img{
    width: 7.8rem;
    height: 1.52rem;
    background: 0;
    display: block;
}
.logbtn{
    width: 0.72rem;
    height: 1.2rem;
    text-align: center;
}

.content-wrap-two{
    width: 15rem;
    height: 1.84rem;
    box-sizing: border-box;
    padding: 0 .48rem;
    margin: auto;
}

.search-bar{
    position: relative;
}
a.search{
    display: block;
    position: absolute;
    height: 1.76rem;
    width: 100%;
    z-index: 10;
    margin: 0;
}
.search-icon{
    position: absolute;
    width: .72rem;
    height: .72rem;
    top: .56rem;
    left: .4rem;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAABGtJREFUWAntl8tr1EkQxzMT4qhBo/FBFLMylyWQwJIHiqCnqAdFXfci6klZkFW8uUpUPKjgHyAiomgCHnYRMRg8uHtSlyWuk5dBJ3pJloCPKIkoiUJmJn5q7PrRv4e/yTxO4g96qrq6Ht/uru6uKSv7/oWvQCR8OHx0dHR03sTExIpUKrWgoqLiVUNDw5tIJJIJtwofzQvQ0NDQgsnJyS24/HlmZmYjdKnHfYp+ElC3aZ1NTU0Jz3jO7qwADQ8Pzx0fHz+MtzaALM7p1SgA6gHs0ebm5u5Z2+RS7O/vX8OW3EDvhwDdj8heEvgDQGugy6BRrx7ya9XV1Qfj8fgn75i3H7pCPT09ewlwBaO5luEz+A6CdDLzpCUvk5waGxtrRfYLbQ+2MWv8IfzOlpaWl5bMx34VkAFz3bJ4C4jj5MVVaNqSB7K9vb2rM5nMOQZ3WwrPy8vL1zY2Nr6zZC42EJDZpntoZlcGAI9p2wHzv8t6Fh0mdoCVOo9qhVH/i5Xd8rVJ+fZbEtjkjAOmsrJyfSFgBADBLxF8F23GANrc19d3xPA+4gNkTpMmsGzT9rq6ug8+yzwEgLqFn1Nqwla2JZPJJdq3qQuQ3DMMtqkCTiRn8t4mtbcpeSP59MTIqqampo7Z48q7AKG0lf3We+aZJLAqFkuZXJrmTBZ/coJ9OewChMIOK3CHOLH6RbNM8A5OXosjYq3k8LR4nXoByXOQ/QDTqXypKD4z+OpSf+TSJuWVOoDkUkOob9NH76WnBsXSaDTaoz5YpVrllTqA5NVWITT0NrX0CmFfqBErtlJ5pQ4gKSFUiGJRx1z9BFF8v1c5K7RQeaUOIKlnVIhijfKlpuRNtfoE3LjySh1AUlwhlHqmDMVlJqdUr2SUyf5oOfOlhgMIEHICsq83RlHzalu2JWM3qCdi/qe8UgeQCFC4rQNQKSFK+g0MDCzHoXPUiXffG8ALyL579kgJ4TUopp9Opw9hn331AfOA52TE688FiJs0IYqixLbFTD3jtSmoPzg4WIu/39WYOBeVt6kLkBk4ainslnrG6hfMTk9P/4axXL6SGo9YnT+CnPkAcUN3Y9CuyqzUeUDt1H6hFD9b1Rb+JDG0PlJxlvoAiZSCXGbzMKvxZc9vkk8ncRSob/RCCbZzVIEydkx5Lw0MYP4dyKo8FwOcRdj/M6zUY9q2XMA4TXH0ziYSiX9EX3ywIt1C5cPXafH5pef+DRSqCqXmIk7Gn/Q3q8zQ19Au81DK2zRFgFpanMDr6LdaAd/zT6MKcGsZ+xd5dhHgr3KIfoW6ti4UkATHQbnUwMxKiqsqkeXzEbCdvNwnNrJq+Duh9kGgcgJSY6mBTdkplZ7vlVY9Q1ME66Jd5jTdhcorkN16cvEK9vst/Yus4EHtzxqQGuAsIpUeK7YJvpZgAm4+bZT+CNs4HIvF/q6vr3cea7UVKvY2KAGLbJX+gcwbkO28UF5AsX0XACP/2Z6ypT/pKhbqsyR2JPoKAAWe9JIE+CadfAZDI9Qzc39rMQAAAABJRU5ErkJggg==);
    background-size: .72rem .72rem;
}
.search-bar form{
    height: 1.76rem;
}
.search-bar input{
    border: none;
    border-radius: .6rem;
    padding: 0.06rem 0.4rem 0 1.3rem;
    width: 100%;
    height: 1.28rem;
    line-height: 1.28rem;
    background: #FFF;
    font-size: .56rem;
    color: #999999;
    -webkit-appearance: none;
    vertical-align: middle;
    margin-top: .24rem;
}


/* -- 主界面内容 -- */
.index_wrap{
    position: relative;
    width: 15rem;
    margin: 0 auto;
}

/* -- 轮播图 -- */
.banner{
    position: relative;
    height: 3.36rem;
    /* 84px */
    
}
.banner-bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3.36rem;
}
.swipe-wrapper{
    position: absolute;
    width: 14.04rem;
    height: 3.36rem;
    top: 0;
    left: .48rem;
}
.swipe{
    position: relative;
    overflow: hidden;
}
.w{
    margin: 0 auto;
    max-width: 15rem;
}
.swipe-wrapper img{
    border-radius: .24rem;
}


/* -- 商品推荐 -- */
.hor_view{
    width: 15rem;
    height: 5.157rem;
    display: flex;
    overflow: hidden;
    /* flex-direction: row; */
    
}
.hor_view img{
    width: 5rem;
    height: 5.157rem;
}



/* -- 入口列表 -- */
.enter_list{
    width: 15rem;
    height: 6.4rem;
    /* 160px */
    overflow: hidden;
    margin: 0 auto;
    background-image: url(https://image1.suning.cn/uimg/cms/img/160518148756923951.png);
    background-size: 5rem 6.4rem;
}
.fix{
    width: 15rem;
    height: 5.6rem;
}
.enter_list a{
    float: left;
    width: 3rem;
    height: 2.84rem;
    text-align: center;
    
}
.enter-img{
    position: relative;
    width: 1.68rem;
    height: 1.68rem;
    margin: .48rem auto 0;
}
.enter{
    width: 1.68rem;
    height: 1.68rem;
    background: none;
}
.enter-title{
    line-height: .56rem;
    width: 3rem;
    height: .56rem;
    overflow: hidden;
    font-size: .44rem;
    margin-top: .1rem;
    color: #666;
}
/* -- 礼包入口 -- */
.newImgFloor{
    width: 15rem;
    height: 4.68rem;
    margin: .48rem auto 0;
    display: block;
    transform-origin: 0px 0px;
    opacity: 1;
    transform: scale(1,1);
    justify-content: space-between;
    /* background-color: #fa9905; */
}
.newImgFloor .newImgFloor-content {
    display: flex;
    width: 15rem;
    height: 4.68rem;
}
.newItem .newItem2{
    width: 7.5rem;
}



/* -- 间隔栏 -- */
.big-blank{
    width: 15rem;
    height: .48rem;
    margin: 0 auto;
}
/* -- 秒杀 -- */
.seckill{
    width: 14.04rem;
    height: 5.16rem;
    margin: 0 auto;
    overflow: hidden;
    border-radius: .24rem .24rem 0 0;
    display: flex;
    background-color: #f7f7f7;
    justify-content: space-between;
}
.zsq-area{
    position: relative;
    width: 7rem;
    height: 5.16rem;
    background: #FFF;
}
.miaosha{
    width: 7rem;
    height: 1.16rem;
    /* background-color: #fdca40; */
    display: flex;
    justify-content: start;
}
.title{
    font-weight: 700;
    font-size: .56rem;
    position: relative;
    margin: 0.36rem 0.16rem 0 0.48rem;
    letter-spacing: 0;
    line-height: .8rem;
    overflow: hidden;
    max-width: 3.5rem;
    height: .8rem;
    color: #333;
}
.seckill-time{
    position: relative;
    z-index: 1;
    height: 0.8rem;
    color: #333;
}
.time-hour{
    width: 0.70rem;
    height: 0.68rem;
    background-color: #ffcc00;
    font-size: .4rem;
    font-weight: bold;
    color: #333;
    display: inline-block;
    vertical-align: middle;
    margin: 0.05rem;
    text-align: center;
    border-radius: .18rem;
    position: absolute;
    top:10px;
}
.time-hour::after{
    content: ":";
    display: block;
    position: absolute;
    right: -14px;
    font-weight: bolder;
    font-size: 12px;
    width: 20px;
    height: 100%;
    top: 0;
}
.time-minute{
    width: 0.70rem;
    height: 0.68rem;
    background-color: #ffcc00;
    font-size: .4rem;
    font-weight: bold;
    color: #333;
    display: inline-block;
    vertical-align: middle;
    margin: 0.05rem;
    text-align: center;
    border-radius: .18rem;
    position: absolute;
    top:10px;
    left: 34px;
}
.time-second{
    width: 0.70rem;
    height: 0.68rem;
    background-color: #ffcc00;
    font-size: .4rem;
    font-weight: bold;
    color: #333;
    display: inline-block;
    vertical-align: middle;
    margin: 0.05rem;
    text-align: center;
    border-radius: .18rem;
    position: absolute;
    top:10px;
    left: 68px;
}
.time-minute::after{
    content: ":";
    display: block;
    position: absolute;
    right: -14px;
    font-weight: bolder;
    font-size: 12px;
    width: 20px;
    height: 100%;
    top: 0;
}
.seckill-text{
    font-size: .48rem;
    color: #999;
    overflow: hidden;
    margin: 0.08rem 0 0 0.48rem;
    width: 6rem;
    height: 0.6rem;
    line-height: 0.6rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: .08rem;
}
.zsq-area ul{
    display: flex;
    padding-left: .56rem;
    position: relative;
    z-index: 1;
    width: 7rem;
    margin: .1rem 0 0 0;
}
.zsq-area ul li img {
    width: 2.4rem;
    height: 2.4rem;
}
.zsq-area ul li .tag-price {
    text-align: center;
    color: #F50;
    font-size: .44rem;
    line-height: .56rem;
    height: .56rem;
    margin-top: .02rem;
}
.zsq-area ul li .first-price {
    font-size: .52rem;
}
.discount{
    background-color: #fff;
    position: relative;
    width: 7rem;
    height: 5.16rem;
}
.discount img{
    display: block;
    width: 2.4rem;
    height: 2.4rem;
    background: none;
}
.img-desc {
    position: absolute;
    bottom: .16rem;
    left: 10px;
    box-sizing: border-box;
    background-image: url(data:image/png;base64,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);
    background-size: 3rem 1.08rem;
    width: 3rem;
    height: 1.08rem;
    padding-top: 0.44rem;
    line-height: .64rem;
    overflow: hidden;
    font-size: .4rem;
    text-align: center;
}
.img-desc-right {
    position: absolute;
    bottom: .16rem;
    left: 105px;
    box-sizing: border-box;
    background-image: url(data:image/png;base64,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);
    background-size: 3rem 1.08rem;
    width: 3rem;
    height: 1.08rem;
    padding-top: 0.44rem;
    line-height: .64rem;
    overflow: hidden;
    font-size: .4rem;
    text-align: center;
}



/* -- 新品 -- */
.sthnew{
    width: 14.04rem;
    height: 5.16rem;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    background-color: #f7f7f7;
    justify-content: space-between;
}

/* -- 分隔线 -- */
.space-px{
    width: 14.04rem;
    height: 1px;
    margin: 0 auto;
    background: #f2f2f2;
}

/* -- 推荐 -- */
.recommend{
    display: flex;
    width: 14.04rem;
    height: 3.44rem;
    background: #fff;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 0 0 .24rem .24rem;
    justify-content: space-between;
}
.recommend{
    display: flex;
    width: 14.04rem;
    height: 3.44rem;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 0 0 .24rem .24rem;
    background-color: #fff;
}
.title-left{
    box-sizing: border-box;
    width: 3.46rem;
    height: 3.44rem;
    padding: .94rem .36rem 0 .36rem;
}
.rec-title{
    width: 2.74rem;
    height: .9rem;
    line-height: .9rem;
    font-size: .64rem;
    color: #444;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.rec-desc{
    width: 2.74rem;
    height: .64rem;
    line-height: .64rem;
    font-size: .48rem;
    color: #999;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.four-space{
    display: flex;
}
.rec-item{
    position: relative;
    box-sizing: border-box;
    width: 2.4rem;
    height: 3.44rem;
}
.rec-img{
    position: absolute;
    display: block;
    width: 2rem;
    height: 2rem;
    top: .36rem;
    left: .2rem;
}
.rec-img-tit{
    position: absolute;
    top: 2.48rem;
    left: 0;
    width: 2.4rem;
    height: .6rem;
    line-height: .6rem;
    font-size: .44rem;
    text-align: center;
    color: #333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}




/* -- 推荐榜单 -- */
.new-bd{
    padding-bottom: .26rem;
    /* 6.5px */
    /* background-color: #fdca40; */
}
.new-bd .title-img{
    width: 15rem;
    height: 1.2rem;
    /* 30px */
    margin: 0 auto;
}
.bdtitle{
    width: 100%;
    height: 100%;
    opacity: 1!important;
    display: block;
}
.bd-three{
    width: 14.04rem;
    margin: 0 auto .26rem;
    display: flex;
    justify-content: space-between;
}
.bd-one-item{
    position: relative;
    width: 4.52rem;
    height: 5.32rem;
    border-radius: .24rem;
    background: #FFF;
}
.bditem-bg{
    position: absolute;
    width: 4.52rem;
    height: 1.86rem;
    left: 0;
    bottom: 0;
    border-radius: 0 0 .24rem .24rem;
}
.bdpro-img{
    position: relative;
    display: block;
    width: 3rem;
    height: 3rem;
    margin: .3rem auto 0;
}
.three-name{
    position: absolute;
    width: 100%;
    height: .68rem;
    top: 3.16rem;
    left: 0;
    display: flex;
    justify-content: space-between;
}
.three-name span{
    box-sizing: border-box;
    display: block;
    height: .68rem;
    font-size: .44rem;
    line-height: .6rem;
    min-width: 2rem;
    max-width: 4rem;
    background: #FFF;
    color: #D9A87A;
    border: .04rem solid #D9A87A;
    border-radius: .34rem;
    text-align: center;
    margin: 0 auto;
    overflow: hidden;
}
.three-title{
    position: relative;
    width: 4.4rem;
    height: .64rem;
    font-size: .52rem;
    line-height: .64rem;
    margin: .62rem auto .06rem;
    color: #FFFFFF;
    text-align: center;
    overflow: hidden;
}
.three-desc{
    position: relative;
    width: 4rem;
    height: .48rem;
    line-height: .48rem;
    font-size: .44rem;
    margin: 0 auto;
    color: #FFFFFF;
    opacity: .8;
    text-align: center;
    overflow: hidden;
}

.bd-two{
    width: 14.04rem;
    display: flex;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: space-between;
    border-radius: .24rem;
    background: #FFF;
    overflow: hidden;
}
.two-hang{
    display: flex;
    width: 14.04rem;
    margin: 0 auto;
}
.two-item{
    position: relative;
    box-sizing: border-box;
    width: 7rem;
    height: 4.8rem;
    background: #FFF;
    overflow: hidden;
    padding: .42rem 0 .32rem .36rem;
}
.first-title{
    display: flex;
    height: .64rem;
}
.zTitle{
    display: block;
    max-width: 4.2rem;
    height: .64rem;
    line-height: .64rem;
    font-size: .52rem;
    font-weight: bold;
}
.two-name{
    position: relative;
    top: .02rem;
    display: block;
    background: #F9F5EE;
    border-radius: .56rem;
    height: .56rem;
    line-height: .56rem;
    font-size: .44rem;
    color: #AB813A;
    margin-left: .24rem;
    padding: 0 .24rem;
    
}
.fTitle{
    display: block;
    width: 6.4rem;
    height: .6rem;
    line-height: .6rem;
    font-size: .48rem;
    margin-top: .12rem;
    color: #999;
}
.line-clamp1{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.img-wrapper{
    position: absolute;
    width: 2.8rem;
    height: 2.8rem;
    top: 1.86rem;
    left: .48rem;
    overflow: hidden;
}
.two-item img{
    display: block;
    width: 2.8rem;
    height: 2.8rem;
    background: none;
}
.right-wrapper{
    left: 3.72rem;
}

/* -- 猜你喜欢 -- */
.guessUlike{
    width: 15rem;
    /* min-height: 41rem; */
    margin: 0 auto;

}
.like-title{
    display: block;
    width: 14.04rem;
    /* 351px */
    height: 1.2rem;
    margin: 0 auto;
}
.liketitle-img{
    display: block;
    width: 14.04rem;
    height: 1.2rem;
    background: none;
    opacity: 1!important;
}
.pro-list-wrapper{
    width: 15rem;
    background-color: #f7f7f7;
}
.pro-list{
    width: 14.04rem;
    /* 351px */
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.left-list{
    width: 6.84rem;
    /* 171px */
}
.right-list{
    width: 6.84rem;
}
.kw-wrapper{
    position: relative;
    box-sizing: border-box;
    width: 6.84rem;
    overflow: hidden;
    border-radius: .24rem;
    margin-bottom: .36rem;
    background-color: #FFF;
}
.normal-pro{
    height: 10.84rem;
    padding: 0 0 .28rem 0;
}
.pro-title {
    margin: .36rem auto 0;
    width: 6.36rem;
    height: 1.34rem;
    font-size: .52rem;
    line-height: .68rem;
    font-weight: bold;
    overflow: hidden;
}
.ziying-icon{
    width: 0.96rem;
    margin-left: .12rem;
    height: .48rem;
    margin-bottom: .04rem;
}
.pro-price {
    height: .76rem;
    margin-left: .24rem;
    line-height: .76rem;
    margin-top: 10px;
}
.real-price {
    display: -webkit-flex;
    display: flex;
    height: .76rem;
    font-size: .48rem;
    color: #FF4422;
    font-weight: bold;
    align-items: flex-end;
}
.flag {
    line-height: .56rem;
}
.pre-price {
    font-size: .72rem;
    line-height: .72rem;
}
.price-comments {
    color: #999999;
    margin-left: .26rem;
    font-weight: normal;
    font-size: .4rem;
}
.cx-text {
    margin: 0 .06rem .04rem .04rem;
    border-radius: .12rem;
    height: .48rem;
    /* width: 2.29rem; */
    padding: .04rem .24rem;
    line-height: .4rem;
    font-size: .36rem;
    box-sizing: border-box;
    border: 1px solid #FFBB00;
    background: #FEFBEE;
}

/* -- 底部导航 -- */
.bottom-btns{
    box-sizing: content-box;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    width: 15rem;
    height: 2rem;
    z-index: 199;
    border-top: 1px solid #EEE;
    background: #FFF;
    display: flex;
    /* top:20px; */
}
.bottom-btn1{
    position: relative;
    display: block;
    width: 3rem;
    height: 2rem;
    background: #fff;
}
.guess{
    display: block;
}
.guess-text{
    display: block;
    color: #000000;
    font-weight: bold;
    font-size: 0.4rem;
    line-height: .64rem;;
    text-align: center;
}
.index{
    display: none;
}
.bottom-btn1 img{
    width: .96rem;
    height: .96rem;
    margin: .24rem auto 0
}
/* login */
.to-login{
    position:fixed;
    bottom: 2rem;
    display: block;
    z-index: 999;
}
.to-login img {
    width: 15rem;
    height: 1.8rem;
}

/* 红包 */
.lqwx{
    display: block;
    transform-origin: 0px 0px;
    opacity: 1;
    transform: scale(1, 1);
    position: fixed;
    width: 2rem;
    height: 2rem;
    right: 0.2rem;
    bottom: 17rem;
    z-index: 999;
}

一蓑烟雨..

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
html、css --苏宁官网静态界面

官网链接：苏宁官网前一阵子自己扒下来的一个苏宁官网的界面：html部分：<!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-wid
复制链接

扫一扫

专栏目录