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

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;
}

html、css --苏宁官网静态界面相关推荐

  1. 仿淘宝电商官网静态页面(HTML+CSS+JS)+ 常见布局解析,学会如果做是关键!

    仿淘宝电商官网静态页面 作为一个前端开发,布局+样式已经成为了必备的技能,你做得好是应该的,做的不好可以原谅,但当你意识到不足时,补足它 这是我刚"入坑"的时候写的Demo,因为当 ...

  2. HTML期末大作业~玄幻情缘游戏官网静态html模板

    HTML期末大作业~玄幻情缘游戏官网静态html模板 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系列问 ...

  3. 仿猫眼官网静态页面(纯HTML)

    仿猫眼官网静态页面(纯HTML) 准备工作 正文 HTML CSS 小结 准备工作 用到的图片如下,具体可以去官网下面截取(这里就不上传图片了,供参考) 界面效果 正文 HTML <!DOCTY ...

  4. 实战小米官网静态页面1:导航栏部分

    小米官网静态页面: 导航栏部分: 这里用id选择器,猫脸动画:class选择器(复习!) F12 导航栏分了左右两个部分: 下图18行少了个v,记得补上,是navCenter 设置好网页的边距 图片原 ...

  5. 游戏网站的设计与实现(HTML和CSS实现魔兽世界官网)

    学习游戏网站的设计与实现(HTML和CSS实现魔兽世界官网),本文实现该系统的功能截图,HTML和CSS部分关键语句,系统功能图等供大家参考 整个页面是由很多很多DIV标签和ul标签构成 /*部分代码 ...

  6. 用html和css仿作小米官网(静态)

    目录 一:准备工作 二:头部导航栏部分 三:中间照片部分 四:尾部文字部分​​​​​​​ 准备工作: 首先我们需要从小米官网的网页源文件上下载需要的图片等素材,其次我们需要准备一个reset.css的 ...

  7. html+css复刻NIKE官网静态页面(一)

    nike的官网比较简洁,是我喜欢的风格,那么,复刻nike官网要怎么入手呢? html部分 对一个网页进行复刻,我们应该先从结构下手. 这是初步的结构的分析,在html中我们可以用div或者secti ...

  8. HTML+CSS仿BMW官网

    看着苹果官网使劲敲代码. 我的期末作业. 先看看两张参考图片... 再来一个参考视频..... 乐爷宝马 - 360极速浏览器 12.0 2020-12-17 20-14-05 再来看看我敲的东东.. ...

  9. 小米官网静态网页练习记录

    本次练习是在完成京东网页的独自完成,来达到提升熟练度的目的. 完成效果图 总结 (1)logo:在logo处不只是放图片,还外加文字通过检索权重 .header-b .logo::before{ co ...

最新文章

  1. CentOS服务器上的 git 包版本控制
  2. IOS开发之自定义UIActionSheet
  3. php round half even,PHP round( )用法及代碼示例
  4. 计算机二级考试Access教程
  5. oracle++dtcol,Oracle 中的 Incarnation 到底是个什么?实验操作篇
  6. 未来是计算机科学的天下,美国留学信息与计算机科学发展方向
  7. 十分钟快速上手结巴分词
  8. easyUi load方法重新加载表单的数据
  9. 上位机和下位机的概念
  10. 小学身高体重测试软件,儿童身高体重在线测评
  11. 搜索引擎整体结构图以及描述
  12. 一周市场摘抄20210125
  13. 【建立个人品牌】自媒体人必须知道的28个新媒体平台
  14. 2022上半年软考电子证书可以查询拉!
  15. 手把手教你做树莓派魔镜-MagicMirror(七)-接下来
  16. python求平均值
  17. android手机密码忘了哪个电话打开,安卓手机锁屏密码忘了怎么办 解决锁屏密码六种方法介绍...
  18. 阿里云网盘,图什么?
  19. MapReduce统计部门员工组别,并排序
  20. Arthas在线诊断工具使用

热门文章

  1. 傻白入门芯片设计,盘点计算机体系结构顶会
  2. PIP更新问题丨You should consider upgrading via the 'python -m pip install —upgrade pip' command.
  3. java Excel导入导出工具类 及使用demo
  4. crash工具分析sysdump使用
  5. 男人和女人是怎样吹牛的
  6. VC6 SP6下载地址
  7. 如何在R中画出高效美观的相关性分析图
  8. 【Unity Shader】屏幕后处理3.0:均值模糊和高斯模糊
  9. OPPO A53线刷刷机包 解账号锁
  10. Chrome无法安装axure插件