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