css+html 苏宁易购网页

已于 2022-07-13 11:56:57 修改
阅读量1.4k 收藏 11
点赞数 1
文章标签： css html 前端
于 2022-07-12 09:30:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65717727/article/details/125735937
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<!DOCTYPE html>
    <html lang=" ch ">
    <head>
        <meta charset="UTF-8 ">
        <title>current-苏宁易购(itlike.com)-送货更准时、价格更超值、上新货更快</title>
        <meta name="keywords " content="苏宁易购网上商城,苏宁电器,Suning,手机,电脑,冰箱,洗衣机,相机,数码,家居用品,鞋帽,化妆品,母婴用品,图书,食品,正品行货 ">
        <meta name="description " content="苏宁易购-综合网上购物平台，商品涵盖家电、手机、电脑、超市、母婴、服装、百货、海外购等品类。送货更准时、价格更超值、上新货更快，正品行货、全国联保、可门店自提，全网更低价，让您放心去喜欢！ ">
        <link rel="shortcut icon " href="favicon.ico " type="image/x-icon ">
        <link rel="stylesheet " href="css/style.css ">
        <link rel="stylesheet " href="css/base.css ">
        <link rel="stylesheet " href="css/index.css ">.
    </head>
    <body>
        <section class="sn-top-banner ">
            <div class="top-banner-center w ">
                <a href="# ">
                    <img src="images/top-banner.jpg " alt=" ">
                </a>
            </div>
            <a href="# " class="banner-close "></a>
        </section>
    
      
        <nav class="sn-toolbar ">
     
            <div class="w clearfix ">
              
                <div class="fl "></div>
                    <ul>
                    <li class="down ">
                        <a href="# ">网站导航</a>
                        <i><s>◇</s></i>
                    </li>
                    <li class="down ">
                        <a href="# ">商家入驻</a>
                        <i><s>◇</s></i>
                    </li>
                    <li class="down ">
                        <a href="# ">客户服务</a>
                        <i><s>◇</s></i>
                    </li>
                    <li class="down ">
                        <img src="images/position.png " alt=" " class="img ">
                        <a href="# ">网站导航</a>
                        <i class="wang "><s>▼</s></i>
                    </li>
                </ul>
                <!--右边-->
                <div class="fr ">
                    <ul>
                        <li>
                            <a href="# ">请登录</a>
                            <a href="# " class="f60 ">注册有礼</a>
                        </li>
                        <li class="down ">
                            <a href="# ">我的订单</a>
                            <i><s>◇</s></i>
                        </li>
                        <li class="down ">
                            <a href="# ">我的易购</a>
                            <i><s>◇</s></i>
                        </li>
                        <li>
                            <a href="# ">苏宁会员</a>
                        </li>
                        <li class="down address ">
                            <img src="images/cart.png " alt=" ">
                            <a href="# " class="f60 ">购物车</a>
                            <i><s class="f60 ">◇</s></i>
                        </li>
                        <li>
                            <a href="# ">易宝付</a>
                        </li>
                        <li>
                            <a href="# ">企业采购</a>
                        </li>
                        <li class="down ">
                            <a href="# ">手机苏宁</a>
                            <i><s>◇</s></i>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
       
    
        
        <section class="sn-top-search ">
 
            <div class="w ">
              
                <div class="logo-set ">
                    <a href="# " class="main-logo "></a>
                    <a href="# " class="sec-logo "></a>
                </div>
         
                <form action="https://blog.csdn.net/KaiSarH " class="search-input ">
                    <input type="text " name="search " placeholder="周年庆赢好礼 ">
                    <input type="submit " value="搜 索 ">
                </form>
               
                <div class="search-more-link ">
                    <ul>
                        <li><a href=" ">烤箱</a></li>
                        <li><a href=" ">老板林内CP趴</a></li>
                        <li><a href=" ">iPhone XS</a></li>
                        <li><a href=" ">空气感拉拉裤</a></li>
                        <li><a href=" ">空调立减500</a></li>
                        <li><a href=" ">浪琴</a></li>
                        <li><a href=" ">手机</a></li>
                        <li><a href=" ">冰箱</a></li>
                    </ul>
                </div>
            </div>
        </section>
        <section class="sn-nav ">
            <div class="w ">
                <div class="sn-nav-menu ">
                    <div class="sn-nav-menu-all ">
                        <a href="# ">全部商品分类</a>
                    </div>
                </div>
                <div class="sn-nav-items ">
                    <ul>
                        <li><a href="# ">大聚惠</a></li>
                        <li><a href="# ">红孩子</a></li>
                        <li><a href="# ">苏宁超市</a></li>
                        <li><a href="# ">电器械</a></li>
                        <li><a href="# ">生活家电</a></li>
                        <li><a href="# ">时尚服饰</a></li>
                        <li><a href="# ">苏宁国际</a></li>
                        <li><a href="# ">苏宁Outlets</a></li>
                        <li><a href="# ">苏宁金融</a></li>
                    </ul>
                </div>
            </div>
        </section>
        <section class="sn-casual ">
            <div class="w ">
                <div class="sn-casual-center ">
                    <div class="sn-casual-center-w ">
                        <div class="content ">
                            <img src="images/casual.jpg " alt=" ">
                        </div>
                      
                        <div class="control ">
                            <a href="# " class="c-prev ">
                                <i class="lk-left ">＜</i>
                            </a>
                            <a href="# " class="c-next ">
                                <i class="lk-right ">＞</i>
                            </a>
                            <ul class="c-bottom ">
                                <li class="current "></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="sn-casual-left ">
                    <ul class="index-list ">
                        <li class=" ">
                            <a target="_blank ">手机</a><em>/</em>
                            <a target="_blank ">运营商</a><em>/</em>
                            <a target="_blank ">智能数码</a>
                        </li>
                        <li class=" ">
                            <a target="_blank ">电视</a><em>/</em>
                            <a target="_blank ">冰箱</a><em>/</em>
                            <a target="_blank ">空调</a><em>/</em>
                            <a target="_blank ">洗衣机</a>
                        </li>
                        <li class=" ">
                            <a target="_blank ">厨卫大电</a><em>/</em>
                            <a target="_blank ">生活家电</a><em>/</em>
                            <a target="_blank ">厨具</a>
                        </li>
                        <li class=" ">
                            <a target="_blank ">电脑办公</a><em>/</em>
                            <a target="_blank ">相机</a><em>/</em>
                            <a target="_blank ">DIY</a>
                        </li>
                        <li class=" ">
                            <a target="_blank ">家居</a><em>/</em>
                            <a target="_blank ">家具</a><em>/</em>
                            <a target="_blank ">家装</a><em>/</em>
                            <a target="_blank ">家纺</a>
                        </li>
                        <li class=" ">
                            <a target="_blank ">食品</a><em>/</em>
                            <a target="_blank ">酒水</a><em>/</em>
                            <a target="_blank ">生鲜</a><em>/</em>
                            <a target="_blank ">特产</a>
                        </li>
                        <li class=" ">
                            <a target="_blank ">个性护妆</a><em>/</em>
                            <a target="_blank ">纸品清洁</a><em>/</em>
                            <a target="_blank ">宠物</a>
                        </li>
                        <li class=" ">
                            <a target="_blank ">母婴</a><em>/</em>
                            <a target="_blank ">玩具</a><em>/</em>
                            <a target="_blank ">车床</a><em>/</em>
                            <a target="_blank ">童装</a>
                        </li>
                        <li class=" ">
                            <a target="_blank ">运动</a><em>/</em>
                            <a target="_blank ">户外</a><em>/</em>
                            <a target="_blank ">足球</a><em>/</em>
                            <a target="_blank ">跑步机</a>
                        </li>
                        <li class=" ">
                            <a target="_blank ">男装</a><em>/</em>
                            <a target="_blank ">女装</a><em>/</em>
                            <a target="_blank ">内衣</a>
                        </li>
                        <li class=" ">
                            <a target="_blank ">鞋靴</a><em>/</em>
                            <a target="_blank ">箱包</a><em>/</em>
                            <a target="_blank ">钟表</a><em>/</em>
                            <a target="_blank ">珠宝</a>
                        </li>
                        <li class=" ">
                            <a target="_blank ">汽摩</a><em>/</em>
                            <a target="_blank ">二手车</a><em>/</em>
                            <a target="_blank ">汽车用品</a>
                        </li>
                        <li class=" ">
                            <a target="_blank ">图书</a><em>/</em>
                            <a target="_blank ">童书</a><em>/</em>
                            <a target="_blank ">教辅教材</a>
                        </li>
                        <li class=" ">
                            <a target="_blank ">理财</a><em>/</em>
                            <a target="_blank ">分期</a><em>/</em>
                            <a target="_blank ">保险</a><em>/</em>
                            <a target="_blank ">房产</a>
                        </li>
                    </ul>
                </div>
                <div class="sn-casual-right ">
                    <div class="sn-casual-right-top ">
                        <div class="logo ">
                            <a href="# "></a>
                        </div>
                        <p>Hi,你好</p>
                        <div class="new_vip ">
    
                            <a href=" ">新人有礼</a>
                            <a href=" "></a>
                        </div>
                        <div class="down ">
                            <a href=" "><em></em><span>领云钻</span><span>></span></a>
                            <a href=" "><em></em><span>领云钻</span><span>></span></a>
                        </div>
                    </div>
                    <div class="sn-casual-right-middle ">
                        <div class="tag1 "><a href=" "><span>[活动]</span><span>苏宁红孩子&新丝路少儿型秀大赛</span></a></div>
                        <div class="tag2 "><a href=" "><span>[知识]</span><span>别让孩子这样睡觉，可能比同龄人矮</span></a></div>
                    </div>
                    <div class="sn-casual-right-bottom ">
                        <ul>
                            <li><a href=" "><i class="sn-4 "></i><span>话费</span></a></li>
                            <li><a href=" "><i class="sn-4 "></i><span>水电煤</span></a></li>
                            <li><a href=" "><i class="sn-4 "></i><span>苏宁卡</span></a></li>
                            <li><a href=" "><i class="sn-4 "></i><span>理财</span></a></li>
                            <li><a href=" "><i class="sn-4 "></i><span>分期</span></a></li>
                            <li><a href=" "><i class="sn-4 "></i><span>苏宁公益</span></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
 
    
    
        <main class="sn-main ">
            <div class="w ">
                <div class="main-header ">
                    <a href=" "><img src="//image3.suning.cn/uimg/cms/img.png " alt=" "></a>
                </div>
                <div class="main-content ">
                    <div class="main-content-1 ">
                        <ul>
                            <li><a href=" "><img src="//image1.suning.cn/uimg/cms/img.png " alt=" "></a></li>
                            <li><a href=" "><img src="//image1.suning.cn/uimg/cms/img.png " alt=" "></a></li>
                            <li><a href=" "><img src="//image1.suning.cn/uimg/cms/img.png " alt=" "></a></li>
                            <li><a href=" "><img src="//image1.suning.cn/uimg/cms/img.png " alt=" "></a></li>
                            <li><a href=" "><img src="//image1.suning.cn/uimg/cms/img.png " alt=" "></a></li>
                        </ul>
                    </div>
                    <div class="main-content-1 ">
                        <ul>
                            <li><a href=" "><img src="//image1.suning.cn/uimg/cms/img.png " alt=" "></a></li>
                            <li><a href=" "><img src="//image1.suning.cn/uimg/cms/img.png " alt=" "></a></li>
                            <li><a href=" "><img src="//image1.suning.cn/uimg/cms/img.png " alt=" "></a></li>
                            <li><a href=" "><img src="//image1.suning.cn/uimg/cms/img.png " alt=" "></a></li>
                            <li><a href=" "><img src="//image1.suning.cn/uimg/cms/img.png " alt=" "></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </main>
     
    
     
        <footer class="sn-footer ">
            <div class="w footer-top ">
                <div class="footer-top-1 ">
                    <ul>
                        <li><a href=" "><img src="images/promise_1.jpg " alt=" "></a><strong>正品保障</strong><span>正品保障、提供发票</span></li>
                        <li><a href=" "><img src="images/promise_2.jpg " alt=" "></a><strong>正品保障</strong><span>正品保障、提供发票</span></li>
                        <li><a href=" "><img src="images/promise_3.jpg " alt=" "></a><strong>正品保障</strong><span>正品保障、提供发票</span></li>
                        <li><a href=" "><img src="images/promise_4.jpg " alt=" "></a><strong>正品保障</strong><span>正品保障、提供发票</span></li>
                        <li><a href=" "><img src="images/promise_5.jpg " alt=" "></a><strong>正品保障</strong><span>正品保障、提供发票</span></li>
                    </ul>
                </div>
                <div class="footer-top-2 clearfix ">
                    <div class="w ">
                        <dl>
                            <dt>购物指南</dt>
                            <dd><a href=" ">导购演示</a></dd>
                            <dd><a href=" ">免费注册</a></dd>
                            <dd><a href=" ">会员等级</a></dd>
                            <dd><a href=" ">常见问题</a></dd>
                            <dd><a href=" ">品牌大全</a></dd>
                        </dl>
                        <dl>
                            <dt>导购演示</dt>
                            <dd><a href=" ">免费注册</a></dd>
                            <dd><a href=" ">会员等级</a></dd>
                            <dd><a href=" ">常见问题</a></dd>
                            <dd><a href=" ">品牌大全</a></dd>
                            <dd><a href=" ">支付方式</a></dd>
                        </dl>
                        <dl>
                            <dt>购物指南</dt>
                            <dd><a href=" ">导购演示</a></dd>
                            <dd><a href=" ">免费注册</a></dd>
                            <dd><a href=" ">会员等级</a></dd>
                            <dd><a href=" ">常见问题</a></dd>
                            <dd><a href=" ">品牌大全</a></dd>
                        </dl>
                        <dl>
                            <dt>导购演示</dt>
                            <dd><a href=" ">免费注册</a></dd>
                            <dd><a href=" ">会员等级</a></dd>
                            <dd><a href=" ">常见问题</a></dd>
                            <dd><a href=" ">品牌大全</a></dd>
                            <dd><a href=" ">支付方式</a></dd>
                        </dl>
                        <dl>
                            <dt>购物指南</dt>
                            <dd><a href=" ">导购演示</a></dd>
                            <dd><a href=" ">免费注册</a></dd>
                            <dd><a href=" ">会员等级</a></dd>
                            <dd><a href=" ">常见问题</a></dd>
                            <dd><a href=" ">品牌大全</a></dd>
                        </dl>
                        <div class="app-down ">
                            <p>身边苏宁</p>
                            <a href="# ">全国300多个城市，上万个门店和服务终端期待您的光临，为您提供最贴心的服务！</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-bottom ">
               <div class="w ">
                   <p>
                       <a href=" ">苏宁互联</a>
                       <a href=" ">苏宁金融</a>
                       <a href=" ">苏宁支付</a>
                       <a href=" ">PP视频</a>
                       <a href=" ">红孩子</a>
                       <a href=" ">苏宁物流</a>
                       <a href=" ">手机苏宁</a>
                       <a href=" ">零售云</a>
                       <a href=" ">知识产权举报</a>
                       <a href=" ">投资者关系</a>
                   </p>
                   <p>
                       <a href=" ">联系我们</a>
                       <a href=" ">诚聘英才</a>
                       <a href=" ">供应商入驻</a>
                       <a href=" ">广告平台</a>
                       <a href=" ">苏宁联盟</a>
                       <a href=" ">苏宁招标</a>
                       <a href=" ">友情链接</a>
                       <a href=" ">法律申明</a>
                       <a href=" ">用户体验提升计划</a>
                       <a href=" ">股东会员认证</a>
                   </p>
                   <p>Copyright© 2002-2018，苏宁易购集团股份有限公司版权所有 | 苏公网安备 32010202010078号 | 苏ICP备10207551号-4 | 苏B1-20130131</p>
                   <p>苏B2-20130376 | 苏B2-20130391 | 出版物经营许可证新出发苏批字第A-243号 | 互联网药品信息服务资格证书（苏）-非经营性-2016-0005</p>
                   <p>本网站直接或间接向消费者推销商品或者服务的商业宣传均属于“广告”（包装及参数、售后保障等商品信息除外）</p>
                   <div class="copyright ">
                       <img src="images/chengxin.png " alt=" ">
                       <img src="images/unicom.png " alt=" ">
                       <img src="images/dianxin.jpg " alt=" ">
                       <img src="images/dianzi.png " alt=" ">
                   </div>
               </div>
            </div>
        </footer>
    
    </body>
    </html>
    , initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

</html>

css部分

@charset "UTF-8";





html,
body,
ul,
li,
ol,
dl,
dd,
dt,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
input,
a,
img,
button {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: normal;
    vertical-align: baseline;
}

html {
    font-size: 10px !important;
    /*设置好html中font-size后可以很好的使用rem*/
}

body {
    font-size: 1.4rem;
    background-color: #f2f2f2 !important;
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
}



ul,
ol,
dl {
    list-style: none;
}



fieldset,
img,
button,
input,
textarea {
    border: none;
    margin: 0;
    padding: 0;
    /*去除外边线*/
    outline: none;
}




a {
    color: #999999;
    text-decoration: none;
}

a:hover {
    color: #f8b62b;
}




h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    font-size: 100%;
}




.fl {
    float: left;
}

.fr {
    float: right;
}




.clearfix:before,
.clearfix:after {
    content: '';
    display: table;
    clear: both;
}

.w {
    width: 119rem;
    margin: 0 auto;
}

.tl {
    text-align: left;
}

.tr {
    text-align: right;
}

.tc {
    text-align: center;
}



.f60 {
    color: #f8b62b;
}


s,
i {
    font-style: normal;
    text-decoration: none;
}


.sn-top-banner {
    position: relative;
    background-color: #164fa6;
}

.sn-top-banner .banner-close {
    position: absolute;
    top: 0.3rem;
    right: 1rem;
    width: 1.9rem;
    height: 1.9rem;
    background: url(./../images/close-banner.png) 0 0;
}

.sn-top-banner .banner-close:hover {
    background-position: 0 -1.9rem;
}


.sn-toolbar {
    background-color: #f5f5f5;
    height: 3.5rem;
    border-bottom: 1px solid #eeeeee;
}

.sn-toolbar>div {
    height: 100%;
    /*background-color: red;*/
}

.sn-toolbar>div li {
    float: left;
    line-height: 3.5rem;
    padding: 0 2.5rem 0 0.1rem;
    /*子绝父相*/
    position: relative;
}

.sn-toolbar>div li.down i {
    position: absolute;
    right: 1rem;
    top: 1.7rem;
    /*background-color: red;*/
    width: 1.5rem;
    height: 1.5rem;
    /*超出隐藏*/
    overflow: hidden;
}

.sn-toolbar>div li.down img {
    height: 1.5rem;
    width: 1.5rem;
}

.sn-toolbar>div li.down i.wang {
    position: absolute;
    top: 1.5rem;
    left: 8.5rem;
}

.sn-toolbar>div li>img {
    width: 1.5rem;
    height: 1.5rem;
}

.sn-toolbar>div li.down i s {
    position: absolute;
    left: 0;
    top: -1.9rem;
    font-size: 2.4rem;
    color: #999999;
}

.sn-toolbar>div li.down i s.f60 {
    color: #f8b62b;
}



.sn-top-search {
    background-color: #fff;
    height: 11rem;
}

.sn-top-search .logo-set .main-logo {
    height: 10rem;
    width: 19rem;
    background: url("./../images/sn-logo.png") no-repeat center;
}

.sn-top-search .logo-set .sec-logo {
    height: 10rem;
    width: 16rem;
    background: url("./../images/sn-sub-logo.gif") no-repeat center;
}

.sn-top-search .logo-set .main-logo,
.sn-top-search .logo-set .sec-logo {
    float: left;
    background-size: contain;
}


/*搜索框*/

.sn-top-search .search-input {
    width: 53.8rem;
    height: 3.8rem;
    float: left;
    /*background-color: greenyellow;*/
    padding-top: 3rem;
    padding-left: 3rem;
}

.sn-top-search .search-input input:first-child {
    width: 45rem;
    height: 3.6rem;
    border: 0.2rem solid #f8b62b;
    box-sizing: border-box;
    padding-left: 0.8rem;
    font-size: 1.2rem;
    float: left;
}

.sn-top-search .search-input input:last-child {
    width: 8rem;
    height: 3.6rem;
    background-color: #f8b62b;
    color: #fff;
    float: left;
    font-size: 1.5rem;
}

.sn-top-search .search-more-link {
    float: left;
    height: 3rem;
    width: 53.8rem;
    padding-left: 3rem;
}

.sn-top-search .search-more-link li {
    float: left;
    margin: 0.7rem 0.5rem 0 0;
}

.sn-top-search .search-more-link li+li {
    border-left: 0.1rem solid #c0c0c0;
    padding-left: 0.5rem;
}




.sn-nav {
    width: 100%;
    height: 3.8rem;
    background-color: #fff;
}

.sn-nav>div {
    display: flex;
}


/*左边*/

.sn-nav>div .sn-nav-menu {
    width: 21rem;
    height: 3.8rem;
    background-color: #f8b62b;
}

.sn-nav>div .sn-nav-menu a {
    box-sizing: border-box;
    font-size: 1.6rem;
    font-weight: bolder;
    color: #fff;
    display: block;
    width: 100%;
    line-height: 3.8rem;
    padding-left: 2.5rem;
    position: relative;
}

.sn-nav>div .sn-nav-menu a:before {
    content: '';
    position: absolute;
    top: 1.5rem;
    left: 1rem;
    width: 1.2rem;
    height: 1rem;
    background: url("./../images/index.png") 0 0;
}


/*右边*/

.sn-nav>div .sn-nav-items {
    flex: 1;
}

.sn-nav>div .sn-nav-items ul li {
    float: left;
    line-height: 3.8rem;
    padding: 0 1rem;
}

.sn-nav>div .sn-nav-items ul li a {
    color: #000000;
    font-weight: bolder;
    font-size: 1.7rem;
}

.sn-nav>div .sn-nav-items ul li a:hover {
    color: #f8b62b;
}



.sn-casual {
    width: 100%;
    height: 44rem;
    background-color: rgb(115, 164, 255);
}


/*左边*/

.sn-casual .sn-casual-left {
    float: left;
    width: 21rem;
    height: 44rem;
    background-color: #252221;
    margin-left: -100%;
}

.sn-casual .sn-casual-left .index-list {
    width: 21rem;
    height: 44rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.sn-casual .sn-casual-left .index-list li {
    height: 2.5rem;
    /*background-color: yellow;*/
    padding-left: 0.8rem;
    cursor: pointer;
}

.sn-casual .sn-casual-left .index-list li a {
    color: #fff;
}

.sn-casual .sn-casual-left .index-list li a:hover {
    color: #f8b62b;
}

.sn-casual .sn-casual-left .index-list li em {
    color: #c0c0c0;
    margin: 0 0.2rem;
}


/*右边*/

.sn-casual .sn-casual-right {
    float: left;
    ;
    width: 17rem;
    height: 44rem;
    background-color: #fff;
    margin-left: -17rem;
}

.sn-casual .sn-casual-right .sn-casual-right-top {
    width: 100%;
    height: 16.8rem;
    /*background-color: red;*/
    padding: 1.1rem 0 0.2rem 0;
    text-align: center;
    border-bottom: 0.01rem solid #f2f2f2;
}

.sn-casual .sn-casual-right .sn-casual-right-top .logo {
    height: 5.9rem;
    width: 100%;
    /*background-color: yellow;*/
    display: flex;
    justify-content: center;
}

.sn-casual .sn-casual-right .sn-casual-right-top .logo a {
    height: 5.8rem;
    width: 5.8rem;
    /*background-color: green;*/
    box-sizing: border-box;
    background: url("./../images/index.png") -90px -22px;
}

.sn-casual .sn-casual-right .sn-casual-right-top p {
    height: 1.2rem;
    width: 17rem;
    margin: 1rem auto;
}

.sn-casual .sn-casual-right .sn-casual-right-top .new_vip {
    height: 2.2rem;
    width: 17rem;
    /*background-color: yellow;*/
    margin-bottom: 1rem;
    position: relative
}

.sn-casual .sn-casual-right .sn-casual-right-top .new_vip a:first-child {
    width: 7rem;
    line-height: 2.2rem;
    color: #ffa114;
    font-size: 0.5rem;
    border: 0.1rem solid #ffa114;
    position: absolute;
    left: 1rem;
}

.sn-casual .sn-casual-right .sn-casual-right-top .new_vip a:last-child {
    width: 7rem;
    height: 2.2rem;
    background: url("./../images/index.png") -29.5rem -25.1rem;
    position: absolute;
    right: 1rem;
}

.sn-casual .sn-casual-right .sn-casual-right-top .down {
    line-height: 1.5rem;
    width: 17rem;
    /*background-color: greenyellow;*/
    font-size: 0.75rem;
    margin-top: 1.5rem;
}

.sn-casual .sn-casual-right .sn-casual-right-top .down a {
    height: 1.5rem;
    width: 8rem;
    /*background-color: darkorange;*/
}

.sn-casual .sn-casual-right .sn-casual-right-top .down em {
    display: inline-block;
    height: 1.4rem;
    width: 1.8rem;
    vertical-align: top
}

.sn-casual .sn-casual-right .sn-casual-right-top .down a:first-child em {
    background: url("./../images/index.png") -11.2rem -0.1rem;
}

.sn-casual .sn-casual-right .sn-casual-right-top .down a:last-child em {
    background: url("./../images/index.png") -8.8rem 0;
}

.sn-casual .sn-casual-right .sn-casual-right-top .down a span {
    color: #666666;
    line-height: 1.5rem;
    vertical-align: top
}

.sn-casual .sn-casual-right .sn-casual-right-middle {
    height: 9.7rem;
    /*background-color:red;*/
    display: flex;
    flex-direction: column;
}

.sn-casual .sn-casual-right .sn-casual-right-middle div {
    flex: 1;
    /*background-color: yellow;*/
    position: relative;
    font-size: 1.2rem;
}

.sn-casual .sn-casual-right .sn-casual-right-middle div a {
    position: absolute;
    top: 1.2rem;
    left: 1rem;
    line-height: 2rem;
}

.sn-casual .sn-casual-right .sn-casual-right-middle div a span:first-child {
    color: #f8b62b;
}

.sn-casual .sn-casual-right .sn-casual-right-middle div a span:last-child {
    margin-left: 0.5rem;
}

.sn-casual .sn-casual-right .sn-casual-right-middle div a span:last-child:hover {
    color: #ff6700;
}

.sn-casual .sn-casual-right .sn-casual-right-bottom {
    height: 16.2rem;
    width: 100%;
    /*background-color: red;*/
    box-sizing: border-box;
    padding: 1rem 0 0 0;
}

.sn-casual .sn-casual-right .sn-casual-right-bottom ul {
    height: 100%;
    width: 100%;
    /*background-color: yellow;*/
}

.sn-casual .sn-casual-right .sn-casual-right-bottom ul li {
    height: 7.6rem;
    width: 5.66rem;
    /*background-color: green;*/
    float: left;
    display: flex;
    flex-direction: column;
    border: 0.1rem solid #f2f2f2;
    box-sizing: border-box;
}

.sn-casual .sn-casual-right .sn-casual-right-bottom ul li a {
    line-height: 2.2rem;
    width: 5rem;
    text-align: center;
    margin-top: 1rem;
    /*background-color: greenyellow;*/
}

.sn-casual .sn-casual-right .sn-casual-right-bottom ul li a i {
    font-size: 4rem;
}

.sn-casual .sn-casual-right .sn-casual-right-bottom ul li a span {
    font-size: 0.5em;
}


/*中间*/

.sn-casual .sn-casual-center {
    float: left;
    ;
    width: 100%;
    height: 44rem;
}

.sn-casual .sn-casual-center .sn-casual-center-w {
    margin: 0 17rem 0 21rem;
    height: 44rem;
    background-color: red;
    position: relative;
}

.sn-casual .sn-casual-center .sn-casual-center-w img {
    width: 100%;
    height: 44rem;
}

.sn-casual .sn-casual-center .sn-casual-center-w .c-prev,
.sn-casual .sn-casual-center .sn-casual-center-w .c-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 5rem;
    background-color: rgba(0, 0, 0, .4);
}

.sn-casual .sn-casual-center .sn-casual-center-w .c-prev {
    left: 0;
    font-size: 3rem;
}

.sn-casual .sn-casual-center .sn-casual-center-w .c-next {
    right: 0;
    font-size: 3rem;
}

.sn-casual .sn-casual-center .sn-casual-center-w .c-prev i,
.sn-casual .sn-casual-center .sn-casual-center-w .c-next i {
    position: absolute;
    top: 15%;
}

.sn-casual .sn-casual-center .sn-casual-center-w .c-bottom {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
}

.sn-casual .sn-casual-center .sn-casual-center-w .c-bottom li {
    width: 3rem;
    height: 3rem;
    background-color: #fff;
    float: left;
    margin: 0 0.5rem;
    border-radius: 50%;
}

.sn-casual .sn-casual-center .sn-casual-center-w .c-bottom .current {
    background-color: orangered;
}


/*************************轮播图-end*************************/


/*************************主要内容-start*************************/

.sn-main {
    height: 100%;
    width: 100%;
    background-color: #f2f2f2;
}

.sn-main .main-header {
    height: 15rem;
    width: 119rem;
}

.sn-main .main-header img {
    height: 100%;
    width: 100%;
}

.sn-main .main-content {
    height: 40rem;
    width: 119rem;
    background-color: #f90;
}

.sn-main .main-content .main-content-1 {
    height: 20rem;
    width: 119rem;
    /*background-color: red;*/
}

.sn-main .main-content .main-content-1 ul {
    display: flex;
    justify-content: space-between;
}



.footer-top-1 {
    height: 8rem;
    width: 119rem;
    /*background-color: red;*/
}

.footer-top-1 ul {
    display: flex;
}

.footer-top-1 ul li {
    width: 23.8rem;
    height: 4.8rem;
    /*background-color: yellow;*/
    margin-top: 2rem;
    position: relative;
}

.footer-top-1 ul li img {
    height: 4.8rem;
    width: 4.8rem;
}

.footer-top-1 ul li strong {
    position: absolute;
    top: 0.3rem;
    left: 6rem;
}

.footer-top-1 ul li span {
    position: absolute;
    top: 2.7rem;
    left: 6rem;
}

.footer-top-2 {
    height: 20rem;
    width: 119rem;
    /*background-color: red;*/
}

.footer-top-2 dl {
    height: 14rem;
    width: 20rem;
    /*background-color: yellow;*/
    float: left;
}

.footer-top-2 dl dt {
    padding: 2rem 0 0 0;
    color: #545454;
}

.footer-top-2 dl dd {
    padding: 1rem 0 0 0;
    color: #666666;
}

.footer-top-2 .app-down {
    padding: 2rem 0 0 0;
}

.footer-top-2 .app-down a {
    width: 8.4rem;
    padding: 1rem 0 0 0;
}

.footer-bottom {
    text-align: center;
}

.footer-bottom p {
    margin: 1rem 0;
}

.footer-bottom p a {
    color: #666666;
    padding: 0 1rem;
}

.footer-bottom p a:hover {
    color: #f60;
}

.footer-bottom p a:nth-child(n+2) {
    border-left: 0.1rem solid #666666;
}

.footer-bottom p:nth-child(n+3) {
    font-size: 0.5rem;
}

0999232ba0fa4805b01711b986b06566.png

 da129d56c07643e0b6b32bfbf57644d7.png

白菜豆腐干
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
苏宁移动端首页制作（rem+媒体查询+less）
woshi6yi的博客
03-08 509
苏宁移动端首页制作（rem布局） 技术选型主要是有两种方案 1.less+媒体查询+rem 2. flexible.js+rem（不需要写媒体查询，他将设备屏幕分成了10分，我们只需那根据设计稿确定html字体大小） 知识点：em单位是相对于父级元素的字体大小来说的 rem是相当于html的字体大小来说的 媒体查询语法：@media 设备类型 and/not/only (媒体特性) {css-code；} 针对于不同的屏幕大小我们可以写不同的css文件可通过link+媒体查询调用不同的css 比如 ..
网页设计html— 基于HTML+CSS+JavaScript+jquery仿苏宁易购官网商城模板
而风不止
12-25 910
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。 文章目录🌰一
苏宁易购首页制作4
Hong的博客
05-28 1546
Hong的前端之路-苏宁易购首页制作4五、剩余区域presale和main-first的制作1.presale的制作①结构分析②html结构搭建③CSS样式添加2.first以及悬浮导航的制作①结构分析②html结构搭建③CSS样式添加欢迎交流 ①Hong的前端之路-苏宁易购首页制作1 ②Hong的前端之路-苏宁易购首页制作2 ③Hong的前端之路-苏宁易购首页制作3 五、剩余区域presale和main-first的制作 接下来我们进行剩下部分的制作，这一块区域背景色是灰色的，不再是纯白#ffffff色的
苏宁易购 2018 网站源码
04-28
模仿苏宁易购做的java Web项目 模仿苏宁易购做的java Web项目
html、css --苏宁官网静态界面
weixin_44713688的博客
07-26 3490
官网链接：苏宁官网 前一阵子自己扒下来的一个苏宁官网的界面： 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
学生个人html静态网页制作 基于HTML+CSS+JavaScript+jquery仿苏宁易购官网商城模板
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
前端代码+HTML+CSS+苏宁易购仿制H5首页+仅供参考
09-21
前端代码+HTML+CSS+苏宁易购仿制H5首页+仅供参考，前端代码+HTML+CSS+苏宁易购仿制H5首页+仅供参考前端代码+HTML+CSS+苏宁易购仿制H5首页+仅供参考前端代码+HTML+CSS+苏宁易购仿制H5首页+仅供参考前端代码+HTML+CSS+...
基于html+css+js开发的仿苏宁易购商城项目+源码
最新发布
05-14
基于html+css+js开发的仿苏宁易购商城项目+源码 基于html+css+js开发的仿苏宁易购商城项目+源码 基于html+css+js开发的仿苏宁易购商城项目+源码 该项目商城仿照了苏宁易购的页。 HTML + CSS布局静态页面，JS实现...
web期末大作业 基于HTML+CSS+JavaScript实现的仿苏宁易购官网商城首页源码
12-10
web期末大作业 基于HTML+CSS+JavaScript实现的仿苏宁易购官网商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿苏宁易购官网商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿苏宁易购官网...
苏宁易购网上商城整站HTML5模板
07-22
苏宁易购网上商城整站HTML5模板下载 .................................................................................
苏宁易购网上商城整站HTML静态模板下载
08-07
苏宁易购网上商城整站HTML静态模板,49个页面
苏宁易购 源码
03-17
苏宁易购 源码，
苏宁易购（rem+媒体查询+移动端）
03-08
rem布局练习
仿苏宁易购网上商城网站html静态模板
12-04
仿苏宁易购网上商城网站html静态模板
苏宁易购电子商务商城主页面css
11-24
总的来说，"苏宁易购电子商务商城主页面css"包含的知识点涵盖了CSS在网页设计中的核心应用，如布局管理、响应式设计、交互效果、品牌一致性以及性能优化。这个设计实例为开发者提供了实际操作的参考，有助于理解和...
使用两种rem布局方案-实现静态苏宁易购移动端首页
SHoadgnaw的博客
03-29 2407
使用两种rem布局方案-实现静态苏宁易购移动端首页方案1:rem+less+媒体查询htmlcommon.lessindex.less方案2:flexible.js+rem小插件小问题htmlindex.lessflexible.js 方案1:rem+less+媒体查询 跟其他页面不同的文件，需要新建common.less文件 用媒体查询设置不同的html字体大小 因为除了首页其他页面也要 尺寸为 320px 360px 375px 400px 414px 424px 480px 540px 720px
苏宁易购首页制作1
Hong的博客
05-20 3580
Hong Shield的Web前端之路-苏宁易购首页制作1
苏宁易购模板
10-22
苏宁易购html全站网页，最新款哦，可以了解一下，这个网站
网页设计作业成品文档(HTML+CSS+JS).docx
08-22
网页设计作业成品文档(HTML+CSS+JS).docx HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值