苏宁易购html源码
<!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="base.css"> <link rel="stylesheet" href="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> <!--关闭按钮--> <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> </li> <li class="down"> <a href="#">北京</a> <i><s> </s></i> <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>lt;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>
</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="https://oss.suning.com/adpp/creative_kit/material/picture/20220106-1cc7ad1973a74984988c9b6f9b5d4d27926dad45f8e94a87.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>
</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">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-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>
<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>
<link rel="stylesheet" type="text/css" href="list.css"/>
<div class="category-list">
<div class="category-item" id="food">
<div class="category-item-head clearfix">
<img src="C:\Users\23127\Desktop\html\作业\img\jd.png" alt="">
<a class="title" href="#">
<!--<i class="icon-food"></i>-->
家电</a>
<ul class="category-item-nav">
<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="#">全部<i class="icon-right-arrow-thin"></i></a></li>
</ul>
</div>
<div class="category-item-body clearfix">
<!--start-->
<div class="category-item-detail">
<a class="cover" href="#">
<img src="C:\Users\23127\Desktop\html\作业\img\food.jpg">
<!--<span class="mark">-->
<!--<span class="mark-duotaocan"></span>-->
<!--<span class="mark-mianyuyue"></span>-->
<!--</span>-->
</a>
<a class="title" href="#">
<span>【全店通用】年底大促，疯狂打折</span>
<span>即刻下单，36小时内送达，高品质服务</span>
</a>
<div class="detail">
<span class="price">¥1200</span>
<span class="value">原价 <del class="num"><span>¥</span>1500</del></span>
<span class="sales">已售323196</span>
</div>
<div class="comment">
<a href="#">
<span class="comment-star">
<span class="comment-rate"></span>
</span>
<span class="comment-count">33883人评价</span>
</a>
</div>
</div>
<!--end-->
<!--start-->
<div class="category-item-detail">
<a class="cover" href="#">
<img src="C:\Users\23127\Desktop\html\作业\img\food_one.jpg">
<!--<span class="mark">-->
<!--<span class="mark-duotaocan"></span>-->
<!--<span class="mark-mianyuyue"></span>-->
<!--</span>-->
</a>
<a class="title" href="#">
<span>【全店通用】年底大促，疯狂打折</span>
<span>即刻下单，36小时内送达，高品质服务</span>
</a>
<div class="detail">
<span class="price">¥1200</span>
<span class="value">原价 <del class="num"><span>¥</span>1500</del></span>
<span class="sales">已售323196</span>
</div>
<div class="comment">
<a href="#">
<span class="comment-star">
<span class="comment-rate"></span>
</span>
<span class="comment-count">33883人评价</span>
</a>
</div>
</div>
<!--end-->
<!--start-->
<div class="category-item-detail">
<a class="cover" href="#">
<img src="C:\Users\23127\Desktop\html\作业\img\food_two.png">
<!--<span class="mark">-->
<!--<span class="mark-duotaocan"></span>-->
<!--<span class="mark-mianyuyue"></span>-->
<!--</span>-->
</a>
<a class="title" href="#">
<span>【全店通用】年底大促，疯狂打折</span>
<span>即刻下单，36小时内送达，高品质服务</span>
</a>
<div class="detail">
<span class="price">¥1200</span>
<span class="value">原价 <del class="num"><span>¥</span>1500</del></span>
<span class="sales">已售323196</span>
</div>
<div class="comment">
<a href="#">
<span class="comment-star">
<span class="comment-rate"></span>
</span>
<span class="comment-count">33883人评价</span>
</a>
</div>
</div>
<!--end-->
<!--start-->
<div class="category-item-detail">
<a class="cover" href="#">
<img src="C:\Users\23127\Desktop\html\作业\img\food_three.png">
<!--<span class="mark">-->
<!--<span class="mark-duotaocan"></span>-->
<!--<span class="mark-mianyuyue"></span>-->
<!--</span>-->
</a>
<a class="title" href="#">
<span>【全店通用】年底大促，疯狂打折</span>
<span>即刻下单，36小时内送达，高品质服务</span>
</a>
<div class="detail">
<span class="price">¥1200</span>
<span class="value">原价 <del class="num"><span>¥</span>1500</del></span>
<span class="sales">已售323196</span>
</div>
<div class="comment">
<a href="#">
<span class="comment-star">
<span class="comment-rate"></span>
</span>
<span class="comment-count">33883人评价</span>
</a>
</div>
</div>
<!--end-->
<!--start-->
<div class="category-item-detail">
<a class="cover" href="#">
<img src="C:\Users\23127\Desktop\html\作业\img\food_five.png">
<!--<span class="mark">-->
<!--<span class="mark-duotaocan"></span>-->
<!--<span class="mark-mianyuyue"></span>-->
<!--</span>-->
</a>
<a class="title" href="#">
<span>【全店通用】年底大促，疯狂打折</span>
<span>即刻下单，36小时内送达，高品质服务</span>
</a>
<div class="detail">
<span class="price">¥1200</span>
<span class="value">原价 <del class="num"><span>¥</span>1500</del></span>
<span class="sales">已售323196</span>
</div>
<div class="comment">
<a href="#">
<span class="comment-star">
<span class="comment-rate"></span>
</span>
<span class="comment-count">33883人评价</span>
</a>
</div>
</div>
<!--end-->
<!--start-->
<div class="category-item-detail">
<a class="cover" href="#">
<img src="C:\Users\23127\Desktop\html\作业\img\food_two.png">
<!--<span class="mark">-->
<!--<span class="mark-duotaocan"></span>-->
<!--<span class="mark-mianyuyue"></span>-->
<!--</span>-->
</a>
<a class="title" href="#">
<span>【全店通用】年底大促，疯狂打折</span>
<span>即刻下单，36小时内送达，高品质服务</span>
</a>
<div class="detail">
<span class="price">¥1200</span>
<span class="value">原价 <del class="num"><span>¥</span>1500</del></span>
<span class="sales">已售323196</span>
</div>
<div class="comment">
<a href="#">
<span class="comment-star">
<span class="comment-rate"></span>
</span>
<span class="comment-count">33883人评价</span>
</a>
</div>
</div>
<!--end-->
</div>
<div class="category-item-foot">
<a href="#">更多家电任性买，请点击查看<i class="icon-right-arrow-thin"></i></a>
</div>
</div>
<!--今日疯抢-->
<div class="category-item" id="movie">
<div class="category-item-head clearfix">
<a class="title" href="#">
<!--<i class="icon-movie"></i>-->
<img src="C:\Users\23127\Desktop\html\作业\img\icon-火.png" alt="">
今日疯抢</a>
<ul class="category-item-nav">
<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="#">全部<i class="icon-right-arrow-thin"></i></a></li>
</ul>
</div>
<div class="category-item-body clearfix">
<!--start-->
<div class="category-item-detail">
<a class="cover" href="#">
<img src="C:\Users\23127\Desktop\html\作业\img\fire.jpg">
<!--<span class="mark">-->
<!--<span class="mark-duotaocan"></span>-->
<!--<span class="mark-mianyuyue"></span>-->
<!--</span>-->
</a>
<a class="title" href="#">
<span>【5店通用】美国恒温热水器</span>
<span>13升容量，持久恒温</span>
</a>
<div class="detail">
<span class="price">¥1399</span>
<span class="value">原价 <del class="num"><span>¥</span>1566</del></span>
<span class="sales">已售57</span>
</div>
<div class="comment">
<a href="#">
<span class="comment-star">
<span class="comment-rate"></span>
</span>
<span class="comment-count">6人评价</span>
</a>
</div>
</div>
<!--end-->
</div>
<div class="category-item-foot">
<a href="#">更多家电任性买，请点击查看<i class="icon-right-arrow-thin"></i></a>
</div>
</div>
<!--漂浮在左边-->
<link rel="stylesheet" type="text/css" href="left.css"/>
<ul class="fixed-nav">
<li><a href="#food"><i class="icon-food"></i>家电</a></li>
<li><a href="#"><i class="icon-cup"></i>潮流品牌</a></li>
<li><a href="#"><i class="icon-movie"></i>今日疯抢</a></li>
<li><a href="#"><i class="icon-hotel"></i>生鲜</a></li>
<li><a href="#"><i class="icon-life-service"></i>生活服务</a></li>
<li><a href="#"><i class="icon-beauty"></i>丽人</a></li>
<li><a href="#"><i class="icon-fly"></i>旅游</a></li>
</ul>
</div>
</main>
<!--主要内容-结束-->
<!--尾部内容-开始-->
<footer class="sn-footer">
<div class="w footer-top">
<div class="footer-top-1">
<ul>
<li><a href=""><img src="正品.jpg" alt=""></a><label>正品保障</label><span>正品保障、提供发票</span></li>
<li><a href=""><img src="正品.jpg" alt=""></a><label>正品保障</label><span>正品保障、提供发票</span></li>
<li><a href=""><img src="正品.jpg" alt=""></a><label>正品保障</label><span>正品保障、提供发票</span></li>
<li><a href=""><img src="正品.jpg" alt=""></a><label>正品保障</label><span>正品保障、提供发票</span></li>
<li><a href=""><img src="正品.jpg" alt=""></a><label>正品保障</label><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>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; /*设置好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; /*鼠标移动上来情况,视情况而定*/
}
/*h家族*/
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;
}
css2
.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;
}
/*************************广告-end*************************/
/*************************顶部通栏-start*************************/
.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;
}
/*************************顶部通栏-end*************************/
/*************************顶部搜索-start*************************/
.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;
}
/*************************顶部搜索-end*************************/
/*************************中部导航-start*************************/
.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;
}
/*************************中部导航-end*************************/
/*************************轮播图-start*************************/
.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;
}
/*************************主要内容-end*************************/
/*************************尾部内容-start*************************/
/*************************尾部内容-end*************************/
.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 label{
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;
}
css3
.fixed-nav{
position: fixed;
left: 5px;
top:50%;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
width: 43px;
font-size: 12px;
background: #FFF;/*防止背景透明*/
}
.fixed-nav a{
display: block;
border: 1px solid #eee;
/*消除重叠的边框*/
margin-top: -1px;
margin-bottom: -1px;
padding: 11px 8px 8px;
min-height: 14px;
height: auto!important;
height: 14px;
text-align: center;
font-size: 12px;
color: #999;
}
.fixed-nav a:hover{
background: #826be1;
color: #FFF;
}
.fixed-nav a i{
display: block;
font-size: 20px;
}
@media only screen and (max-width: 1325px) {
.fixed-nav{
display: none;
}
}
.fixed-nav{
position: fixed;
left: 5px;
top:50%;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
width: 43px;
font-size: 12px;
background: #FFF;/*防止背景透明*/
}
.fixed-nav a{
display: block;
border: 1px solid #eee;
/*消除重叠的边框*/
margin-top: -1px;
margin-bottom: -1px;
padding: 11px 8px 8px;
min-height: 14px;
height: auto!important;
height: 14px;
text-align: center;
font-size: 12px;
color: #999;
}
.fixed-nav a:hover{
background: #826be1;
color: #FFF;
}
.fixed-nav a i{
display: block;
font-size: 20px;
}
@media only screen and (max-width: 1325px) {
.fixed-nav{
display: none;
}
}
css4
/*分类头部*/
.category-item{
margin-bottom: 40px;
}
.category-item-head{
margin-bottom: 12px;
}
.category-item-head .title{
/*float: left;*/
height:29px;
line-height: 29px;
font-size: 20px;
}
.category-item-head .title img{
width: 20px;
height: 20px;
}
.category-item-head .title i{
display: inline-block;
width: 38px;
height: 29px;
line-height: 29px;
color: #FFF;
background-image: url(../img/content-bg2.png);
background-repeat: no-repeat;
text-align: center;
}
.category-item-nav{
float: right;
line-height: 29px;
}
.category-item-nav li{
float: left;
}
.category-item-nav li a{
font-size: 14px;
line-height: 14px;
color: #666;
padding: 0 9px;
border-right: 1px solid #ddd;
}
.category-item-nav li a:hover{
color: #2bb8aa;
}
.category-item-nav li:last-child a{
border-right: none;
}
/*每一个块*/
.category-item-detail{
border: 1px solid #eee;
border-right: none;
/*border-bottom: none;*/
margin-bottom: -1px;/*如果不把底部边框设置为none，就需要让底边框为-1，来消除多出来的1px边框;缺点，当浏览器放大的时候，会有问题*/
width: 292px;
padding: 12px 15px 0;
float: left;
position: relative;/*帮助标记进行定位*/
}
/*每到4的倍数，就加上右边框*/
.category-item-detail:nth-of-type(4n){
border-right: 1px solid #eee;
width: 293px;/*微调*/
}
.category-item-detail:last-child{
border-right: 1px solid #eee;
width: 293px;/*微调*/
}
/*图片封面*/
.category-item-detail .cover img{
width:260px;
height:174px;
display: block;
margin-bottom: 12px;
}
.category-item-detail .mark{
position: absolute;
left: 15px;
top: 8px;
font-size: 0;
}
.category-item-detail .mark span{
font-size: 12px;
display: inline-block;
width: 43px;
height: 40px;
background-image: url(../img/content-bg.png);
background-repeat: no-repeat;
margin-right: -3px;
}
/*多套餐*/
.mark-duotaocan{
background-position: 0 -493px;
}
/*免预约*/
.mark-mianyuyue{
background-position: 0 -451px;
}
/*标题区域*/
.category-item-detail .title{
display: block;
}
.category-item-detail .title span:first-child{
font-size: 14px;
font-weight: bold;
color: #333;
text-indent: -.5em;/*中文符号比一般英文字符更占用空间*/
}
.category-item-detail .title span:last-child{
font-size: 14px;
/*溢出省略号*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.category-item-detail .title span{
display: block;
height: 24px;
line-height: 24px;
}
.category-item-detail .title:hover span{
color: #333;
}
/*价格区域*/
.category-item-detail .detail{
margin-bottom: 10px;
}
/*价格*/
.category-item-detail .price{
font-size: 20px;
color: #f76120;
}
/*门店*/
.category-item-detail .value,.category-item-detail .sales{
font-size: 12px;
color: #999;
}
/*已销售*/
.category-item-detail .sales{
float: right;
margin-top: 8px;
}
/*评价*/
.category-item-detail .comment{
border-top: 1px dotted #ddd;
height: 46px;
}
.category-item-detail .comment a{
float: right;
height: 32px;
line-height: 32px;
font-size: 12px;
}
/*未评论灰色星星状态*/
.comment-star {
display: inline-block;
width: 60px;
height: 12px;
line-height: 12px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAMAAABhq6zVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEQTUyQTE3RDREMjMxMUU0QUVDRUE4Q0Q4NUVCOUI2OSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEQTUyQTE3RTREMjMxMUU0QUVDRUE4Q0Q4NUVCOUI2OSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkRBNTJBMTdCNEQyMzExRTRBRUNFQThDRDg1RUI5QjY5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkRBNTJBMTdDNEQyMzExRTRBRUNFQThDRDg1RUI5QjY5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+1GZEFgAAAE5QTFRF0M/Pz8/P0NDQ0dHR0dDQ9PT00tHR7u7u5+fn8fHx0M7O8vLy8PDw2dnZ+fn539/f7Ozs/v7+0tLS29vb4eHh1dXV6+vr+/v79/f31VvExQAAABp0Uk5T/wAUIgDaAAAAW0lEQVR42kSNWQ6AMAhEYWrt6r5y/4tKicYXwuR9wJA0fLIg29vwS2Gun4ycM64mrJCiAbpXenGexLvOQGo3AU7BbA8KeoW8yQkHnWAygWs4sJtw1IolssgjwACFHAecmh1z0QAAAABJRU5ErkJggg==);
background-repeat: repeat-x;
}
/*评论后星星*/
.comment-rate{
display: inline-block;
width: 86%;
height: 12px;
line-height: 12px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAMAAABhq6zVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEQTUyQTE3OTREMjMxMUU0QUVDRUE4Q0Q4NUVCOUI2OSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEQTUyQTE3QTREMjMxMUU0QUVDRUE4Q0Q4NUVCOUI2OSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkRBNTJBMTc3NEQyMzExRTRBRUNFQThDRDg1RUI5QjY5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkRBNTJBMTc4NEQyMzExRTRBRUNFQThDRDg1RUI5QjY5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+IOVWLgAAAJ9QTFRF/3Yk/YYa/YEZ/HUW/HsX/+DO/XEd/nQf/ngf/3kj/3st/oEf/nQe/3gj/Ysb/9jA//Lq/9O5/38i/6Nr/XEY/X8b/8yu/6l1/8el/9a9/oke/nYh/nYg/5lc/9W7/34i//38/oEd/3kp/9nC/8mp/+fY/34x/XIZ/8+y/5FP/oAe/86w/4hA/97K/7qQ/X4c/9rF/ogf/7qR/+7ktj60fwAAADV0Uk5T/wB8tdAKAAAAcElEQVR42mIwAQFWSTDFACZlNREcA3khORjHmNNQilcAxAECTm4+Pm5eEEtVTYsRDBS5WBlMWLn0mYBAVIkfpEeDgwUIOFTABijLMAOBtC6YI8Gjzs4uwiMG5gizMQhq67CJgzkMRkArFPSALIAAAwDFqBGvMjYe1AAAAABJRU5ErkJggg==);
background-repeat: repeat-x;
}
/*底部*/
.category-item-foot a{
display: block;
height: 48px;
line-height: 48px;
text-align: center;
font-size: 14px;
background: #f6f6f6;
color: #666;
}
.category-item-foot a:hover{
color: #2bb8aa;
}以及一些图片
