易购商城首页

需求描述

  1. 网站头部及特效制作
  2. Logo及搜索区域
  3. 导航区域及特效制作
  4. 轮播区域及特效制作
  5. 应季商品区域及特效
  6. 底部区域

HTML

 

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>易购商城title>
    <meta http-equiv="X-UA-Compatible" content="edge" />
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script src="js/jquery-1.12.4.js">script>
    <script src="js/index.js">script>
head>

<body>
    
    <div class="top">
        <section class="seck">
            <div class="dis_add">
                <em style="float:left">送货至:em>
                <span style="float:left">北京span>
                <img src="images/jt_t.png" style="display:block;width:7px;height:4px; float:left; margin-top:19px; margin-left:3px">
                <div class="hide_add">
                    <ul>
                        <li>
                            <a href="javascript:void(0)" class="selected">北京a>
                        li>
                        <li>
                            <a href="javascript:void(0)">上海a>
                        li>
                        <li>
                            <a href="javascript:void(0)">天津a>
                        li>
                        <li>
                            <a href="javascript:void(0)">重庆a>
                        li>
                        <li>
                            <a href="javascript:void(0)">河北a>
                        li>
                        <li>
                            <a href="javascript:void(0)">山西a>
                        li>
                        <li>
                            <a href="javascript:void(0)">河南a>
                        li>
                        <li>
                            <a href="javascript:void(0)">辽宁a>
                        li>
                        <li>
                            <a href="javascript:void(0)">吉林a>
                        li>
                        <li>
                            <a href="javascript:void(0)">黑龙江a>
                        li>
                        <li>
                            <a href="javascript:void(0)">内蒙古a>
                        li>
                        <li>
                            <a href="javascript:void(0)">江苏a>
                        li>
                        <li>
                            <a href="javascript:void(0)">山东a>
                        li>
                        <li>
                            <a href="javascript:void(0)">安徽a>
                        li>
                        <li>
                            <a href="javascript:void(0)">浙江a>
                        li>
                        <li>
                            <a href="javascript:void(0)">浙江a>
                        li>
                        <li>
                            <a href="javascript:void(0)">福建a>
                        li>
                        <li>
                            <a href="javascript:void(0)">湖北a>
                        li>
                        <li>
                            <a href="javascript:void(0)">湖南a>
                        li>
                        <li>
                            <a href="javascript:void(0)">广东a>
                        li>
                        <li>
                            <a href="javascript:void(0)">广西a>
                        li>
                        <li>
                            <a href="javascript:void(0)">江西a>
                        li>
                        <li>
                            <a href="javascript:void(0)">四川a>
                        li>
                        <li>
                            <a href="javascript:void(0)">海南a>
                        li>
                        <li>
                            <a href="javascript:void(0)">贵州a>
                        li>
                    ul>
                div>
            div>
            <div class="register_login">
                <em>您好,em>
                <a href="#">会员登录a>
                <a href="#">快速注册a>
            div>
            <div class="vip_center">
                <a href="#">会员中心a>
                <a href="#">商户中心a>
                <a href="#">帮助a>
            div>
        section>
    div>
    
    
    <div class="maxbj">
        <header>
            <h1 class="logo logo-size">
                <img src="images/logo.png">
            h1>
            <div class="search">
                <form>
                    <input type="text" placeholder="零食盛宴 满99减50满199减100..." required style=" width:610px; height:34px; text-indent:2em; float:left; box-shadow:none">
                    <button>搜索button>
                form>
            div>
            <div class="sping_car">
                <b>b>
                <em>我的购物车em>
            div>
        header>
    div>
    
    
    <section class="dao_hang">
        <nav>
            
            <div class="advertisement" style="top:42px;">
                <h4>最新公告h4>
                <div class="notice_new">
                    <p>
                        <a href="#">来部红色手机,颜值亮爆朋友圈a>
                    p>
                    <p>
                        <a href="#">荣耀V10高配版 6GB+64GB 魅丽红 移动联通电信4G手机a>
                    p>
                    <p>
                        <a href="#">真正香饽饽,时髦的全面屏手机大团战a>
                    p>
                    <p>
                        <a href="#">女生新宠vivo X21梦幻粉,八大配色随你选a>
                    p>
                    <p>
                        <a href="#">除了低价,我们还能给你更多专业的购机指导a>
                    p>
                    <p>
                        <a href="#">给你三千元,你可以买到什么配置的手机?a>
                    p>
                    <p>
                        <a href="#">作为游戏爱好者,怎么能少一款游戏笔记本呢?a>
                    p>
                div>
                <a href="#">
                    <div class="notice_img">
                        <img src="images/activity.jpg" class="img1">
                        <img src="images/activity.jpg" class="img2">
                    div>
                a>
            div>
            
            <div class="important">
                <img src="images/all_list.png" style=" margin-top:13px">
                全部商品分类
                <aside style="top:42px;">
                    <ul>
                        <li class="cates" mt-ct="list01">
                            <h3>手机通讯h3>
                            <p>
                                <a href="#">手机a>
                                <a href="#">智能数码a>
                                <a href="#">运营商a>
                                <i style="font-family:'宋体';color:#666; line-height:23px; padding-right:20px; font-size:14px; float:right">>i>
                            p>
                        li>
                        <li class="cates" mt-ct="list02">
                            <h3>家用电器h3>
                            <p>
                                <a href="#">电视a>
                                <a href="#">冰箱a>
                                <a href="#">空调a>
                                <a href="#">洗衣机a>
                                <i style="font-family:'宋体';color:#666; line-height:23px; padding-right:20px; font-size:14px; float:right">>i>
                            p>
                        li>
                        <li class="cates" mt-ct="list03">
                            <h3>厨卫大全h3>
                            <p>
                                <a href="#">厨卫大电a>
                                <a href="#">生活家电a>
                                <a href="#">厨具a>
                                <i style="font-family:'宋体';color:#666; line-height:23px; padding-right:20px; font-size:14px; float:right">>i>
                            p>
                        li>
                        <li class="cates" mt-ct="list04">
                            <h3>电脑相机h3>
                            <p>
                                <a href="#">电脑办公a>
                                <a href="#">相机a>
                                <a href="#">DIYa>
                                <i style="font-family:'宋体';color:#666; line-height:23px; padding-right:20px; font-size:14px; float:right">>i>
                            p>
                        li>
                        <li class="cates" mt-ct="list05">
                            <h3>家具家纺h3>
                            <p>
                                <a href="#">家居a>
                                <a href="#">家具a>
                                <a href="#">家装a>
                                <a href="#">家纺a>
                                <i style="font-family:'宋体';color:#666; line-height:23px; padding-right:20px; font-size:14px; float:right">>i>
                            p>
                        li>
                        <li class="cates" mt-ct="list06">
                            <h3>食品酒水h3>
                            <p>
                                <a href="#">食品a>
                                <a href="#">酒水a>
                                <a href="#">生鲜a>
                                <a href="#">特产a>
                                <i style="font-family:'宋体';color:#666; line-height:23px; padding-right:20px; font-size:14px; float:right">>i>
                            p>
                        li>
                        <li class="cates" mt-ct="list07">
                            <h3>美妆个护h3>
                            <p>
                                <a href="#">美妆a>
                                <a href="#">个护a>
                                <a href="#">清洁a>
                                <a href="#">宠物a>
                                <i style="font-family:'宋体';color:#666; line-height:23px; padding-right:20px; font-size:14px; float:right">>i>
                            p>
                        li>
                    ul>
                aside>
                <div>
                    <div class="import_list b-list01">
                        <dt>手机通讯:dt>
                        <dd>
                            <a href="#">全部手机a>
                            <a href="#">iPhonea>
                            <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>
                        dd>
                        <dt>手机配件:dt>
                        <dd>
                            <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>
                            <a href="#">移动电源a>
                            <a href="#">蓝牙耳机a>
                            <a href="#">自拍杆a>
                            <a href="#">手机支架a>
                            <a href="#">手机U盘a>
                            <a href="#">蓝牙音箱a>
                            <a href="#">车载配件a>
                            <a href="#">手机饰品a>
                        dd>
                        <dt>智能设备:dt>
                        <dd>
                            <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="#">VR眼镜a>
                            <a href="#">智能家居a>
                            <a href="#">智能健康监测a>
                            <a href="#">玩客云a>
                        dd>
                        <dt>电子教育:dt>
                        <dd>
                            <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>
                            <a href="#">复读机a>
                        dd>
                    div>
                    <div class="import_list b-list02">
                        <dt>电视:dt>
                        <dd>
                            <a href="#">全部电视a>
                            <a href="#">65英寸a>
                            <a href="#">55英寸a>
                            <a href="#">32英寸及以下a>
                            <a href="#">海信a>
                            <a href="#">小米a>
                            <a href="#">创维a>
                            <a href="#">夏普a>
                            <a href="#">TCLa>
                            <a href="#">索尼a>
                            <a href="#">4K超高清a>
                            <a href="#">智能曲面a>
                            <a href="#">OLEDa>
                            <a href="#">店铺热卖a>
                        dd>
                        <dt>冰箱:dt>
                        <dd>
                            <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>
                            <a href="#">美菱a>
                            <a href="#">海信a>
                            <a href="#">三星a>
                        dd>
                        <dt>空调:dt>
                        <dd>
                            <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>
                            <a href="#">移动空调a>
                            <a href="#">中央空调a>
                            <a href="#">空调嘉年华a>
                            <a href="#">焕新抢不停a>
                            <a href="#">以旧换新0元安装空调a>
                            <a href="#">空调安维a>
                        dd>
                        <dt>洗衣机:dt>
                        <dd>
                            <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>
                            <a href="#">海信a>
                            <a href="#">松下a>
                            <a href="#">三洋a>
                            <a href="#">三星a>
                            <a href="#">博世a>
                            <a href="#">LGa>
                            <a href="#">冰洗配件a>
                        dd>
                    div>
                    <div class="import_list b-list03">
                        <dt>厨卫大全:dt>
                        <dd>
                            <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>
                            <a href="#">方太a>
                        dd>
                        <dt>中式厨房:dt>
                        <dd>
                            <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>
                            <a href="#">养生壶a>
                            <a href="#">煎药壶a>
                            <a href="#">电热饭盒a>
                            <a href="#">电陶炉a>
                        dd>
                        <dt>生活电器:dt>
                        <dd>
                            <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>
                            <a href="#">除湿机a>
                            <a href="#">挂烫机a>
                            <a href="#">清洁机a>
                            <a href="#">除螨仪a>
                        dd>
                    div>
                    <div class="import_list b-list04">
                        <dt>电脑整机:dt>
                        <dd>
                            <a href="#">笔记本a>
                            <a href="#">游戏本a>
                            <a href="#">轻薄本a>
                            <a href="#">台式电脑a>
                            <a href="#">电脑一体a>
                            <a href="#">机服务器a>
                            <a href="#">工作站a>
                        dd>
                        <dt>外设附件:dt>
                        <dd>
                            <a href="#">鼠标a>
                            <a href="#">键盘a>
                            <a href="#">键鼠套装a>
                            <a href="#">U盘a>
                            <a href="#">移动硬盘a>
                            <a href="#">鼠标垫a>
                            <a href="#">电脑包a>
                            <a href="#">电脑音箱a>
                            <a href="#">插线板a>
                            <a href="#">摄像头a>
                        dd>
                        <dt>电脑配件:dt>
                        <dd>
                            <a href="#">显示器a>
                            <a href="#">CPUa>
                            <a href="#">主板a>
                            <a href="#">显卡a>
                            <a href="#">硬盘a>
                            <a href="#">SSD固态硬盘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>
                        dd>
                        <dt>办公文具:dt>
                        <dd>
                            <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>
                            <a href="#">硒鼓a>
                            <a href="#">墨盒a>
                            <a href="#">办公文具本册a>
                            <a href="#">便签a>
                            <a href="#">财务用品a>
                            <a href="#">文件管理a>
                            <a href="#">得力a>
                        dd>
                    div>
                    <div class="import_list b-list05">
                        <dt>家具:dt>
                        <dd>
                            <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>
                            <a href="#">阳台a>
                            <a href="#">户外a>
                            <a href="#">客厅成套家具a>
                            <a href="#">餐厅成套家具a>
                            <a href="#">卧室成套家具a>
                            <a href="#">儿童成套家具a>
                            <a href="#">书房家具a>
                        dd>
                        <dt>家纺:dt>
                        <dd>
                            <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>
                            <a href="#">床笠地毯a>
                            <a href="#">地垫餐桌布艺a>
                        dd>
                        <dt>五金建材:dt>
                        <dd>
                            <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>
                            <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>
                        dd>
                    div>
                    <div class="import_list b-list06">
                        <dt>进口食品:dt>
                        <dd>
                            <a href="#">进口牛奶a>
                            <a href="#">进口休闲零食a>
                            <a href="#">进口饼干糕点a>
                            <a href="#">进口葡萄酒a>
                            <a href="#">进口果酒a>
                            <a href="#">进口膨化食品a>
                            <a href="#">进口橄榄油a>
                        dd>
                        <dt>生鲜食品:dt>
                        <dd>
                            <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>
                            <a href="#">猪肉a>
                            <a href="#">鸭肉a>
                            <a href="#">蔬菜a>
                            <a href="#">榴莲a>
                            <a href="#">大闸蟹a>
                        dd>
                        <dt>中外名酒:dt>
                        <dd>
                            <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>
                        dd>
                        <dt>休闲食品:dt>
                        <dd>
                            <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>
                            <a href="#">膨化食品a>
                            <a href="#">糖果a>
                            <a href="#">薯片a>
                        dd>
                    div>
                    <div class="import_list b-list07">
                        <dt>面部护肤:dt>
                        <dd>
                            <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>
                            <a href="#">精华a>
                            <a href="#">卸妆a>
                            <a href="#">T区护理a>
                            <a href="#">润唇膏a>
                            <a href="#">海外尖货a>
                            <a href="#">进口水乳套装a>
                            <a href="#">进口护肤a>
                        dd>
                        <dt>身体护理:dt>
                        <dd>
                            <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>
                            <a href="#">脱毛膏a>
                            <a href="#">走珠a>
                        dd>
                        <dt>彩妆香水:dt>
                        <dd>
                            <a href="#">隔离粉底a>
                            <a href="#">遮瑕口红a>
                            <a href="#">唇膏唇釉a>
                            <a href="#">唇彩BBa>
                            <a href="#">CC霜腮红a>
                            <a href="#">气垫a>
                            <a href="#">BB睫毛膏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>
                            <a href="#">彩妆工具a>
                            <a href="#">彩妆套装a>
                        dd>
                    div>
                div>
            div>
            <div class="dao_list">
                <a href="#" class="color">首页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>
            div>
        nav>
    section>
    
    
    <div class="banner-wrap">
        <div class="banner" id="banner">
            <a href="#" class="banner-bg1 show"><img src="images/ba1.jpg" />a>
            <a href="#" class="banner-bg2"><img src="images/ba2.jpg" />a>
            <a href="#" class="banner-bg3"><img src="images/ba1.jpg" />a>
            <a href="#" class="banner-bg4"><img src="images/ba2.jpg" />a>
            <a href="#"><img src="images/ba1.jpg" class="banner-con" />a>
        div>
        <ul class="icon" id="icon">
            <li class="icon1 fl active"><a href="#">a>li>
            <li class="icon2 fl"><a href="#">a>li>
            <li class="icon3 fl"><a href="#">a>li>
            <li class="icon4 fl"><a href="#">a>li>
        ul>
    div>
    
    
    <span class="as blessing_package pick-back-b">
        <a href="#" style="color:#000">
            <h3 style="float:left" class="pick-back2">
                应季商品
            h3>
        a>
        <div class="detailed_navigation">
            <ul>
                <li class="dog d-1-lt01 yadi" dg-floor="1" dg-ct="lt01">囤年货li>
                <li class="dog d-1-lt02" dg-floor="1" dg-ct="lt02">拿货节li>
                <li class="dog d-1-lt03" dg-floor="1" dg-ct="lt03">限时li>
                <li class="dog d-1-lt04" dg-floor="1" dg-ct="lt04">折扣li>
            ul>
        div>
    span>
    <div>
        <div class="currency f-1-lt01">
            <ul>
                <li>
                    <a href="#">
                        <img src="images/ad1.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
                    a>
                    <div class="light">
                        <img src="images/saoguang.png">
                    div>
                    <span>¥4299.00span>
                    <a href="#">
                        <p>海尔冰箱(haier)BCD-642WDVMU1 642升风冷无霜对开门 智能 大容积 p>
                    a>
                    <em>
                        <a href="#">收藏a>
                        <a href="javascript:void(0)" class="add_scar">加入购物车a>
                    em>
                li>
                <li>
                    <a href="#">
                        <img src="images/ad2.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
                    a>
                    <div class="light">
                        <img src="images/saoguang.png">
                    div>
                    <span>¥2149span>
                    <a href="#">
                        <p>【官网价直降1100】Apple iPhone 6s Plus 32G 玫瑰金 移动联通电信4G 手机p>
                    a>
                    <em>
                        <a href="#">收藏a>
                        <a href="javascript:void(0)" class="add_scar">加入购物车a>
                    em>
                li>
                <li>
                    <a href="#">
                        <img src="images/ad3.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
                    a>
                    <div class="light">
                        <img src="images/saoguang.png">
                    div>
                    <span>¥199span>
                    <a href="#">
                        <p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
                    a>
                    <em>
                        <a href="#">收藏a>
                        <a href="javascript:void(0)" class="add_scar">加入购物车a>
                    em>
                li>
                <li>
                    <a href="#">
                        <img src="images/ad4.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
                    a>
                    <div class="light">
                        <img src="images/saoguang.png">
                    div>
                    <span>¥199span>
                    <a href="#">
                        <p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
                    a>
                    <em>
                        <a href="#">收藏a>
                        <a href="javascript:void(0)" class="add_scar">加入购物车a>
                    em>
                li>
                <li>
                    <a href="#">
                        <img src="images/ad5.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
                    a>
                    <div class="light">
                        <img src="images/saoguang.png">
                    div>
                    <span>¥199span>
                    <a href="#">
                        <p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
                    a>
                    <em>
                        <a href="#">收藏a>
                        <a href="javascript:void(0)" class="add_scar">加入购物车a>
                    em>
                li>
            ul>
        div>
        <div class="currency f-1-lt02" style="display:none">
            <ul>
                <li>
                    <a href="#">
                        <img src="images/add1.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
                    a>
                    <div class="light">
                        <img src="images/saoguang.png">
                    div>
                    <span>¥199span>
                    <a href="#">
                        <p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
                    a>
                    <em>
                        <a href="#">收藏a>
                        <a href="javascript:void(0)" class="add_scar">加入购物车a>
                    em>
                li>
                <li>
                    <a href="#">
                        <img src="images/add1.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
                    a>
                    <div class="light">
                        <img src="images/saoguang.png">
                    div>
                    <span>¥199span>
                    <a href="#">
                        <p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
                    a>
                    <em>
                        <a href="#">收藏a>
                        <a href="javascript:void(0)" class="add_scar">加入购物车a>
                    em>
                li>
                <li>
                    <a href="#">
                        <img src="images/add1.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
                    a>
                    <div class="light">
                        <img src="images/saoguang.png">
                    div>
                    <span>¥199span>
                    <a href="#">
                        <p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
                    a>
                    <em>
                        <a href="#">收藏a>
                        <a href="javascript:void(0)" class="add_scar">加入购物车a>
                    em>
                li>
                <li>
                    <a href="#">
                        <img src="images/add1.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
                    a>
                    <div class="light">
                        <img src="images/saoguang.png">
                    div>
                    <span>¥199span>
                    <a href="#">
                        <p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
                    a>
                    <em>
                        <a href="#">收藏a>
                        <a href="javascript:void(0)" class="add_scar">加入购物车a>
                    em>
                li>
                <li>
                    <a href="#">
                        <img src="images/add1.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
                    a>
                    <div class="light">
                        <img src="images/saoguang.png">
                    div>
                    <span>¥199span>
                    <a href="#">
                        <p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
                    a>
                    <em>
                        <a href="#">收藏a>
                        <a href="javascript:void(0)" class="add_scar">加入购物车a>
                    em>
                li>
            ul>
        div>
        <div class="currency f-1-lt03" style="display:none">
            <ul>
                <li>
                    <a href="#">
                        <img src="images/ad2.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
                    a>
                    <div class="light">
                        <img src="images/saoguang.png">
                    div>
                    <span>¥199span>
                    <a href="#">
                        <p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
                    a>
                    <em>
                        <a href="#">收藏a>
                        <a href="javascript:void(0)" class="add_scar">加入购物车a>
                    em>
                li>
                <li>
                    <a href="#">
                        <img src="images/ad2.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
                    a>
                    <div class="light">
                        <img src="images/saoguang.png">
                    div>
                    <span>¥199span>
                    <a href="#">
                        <p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
                    a>
                    <em>
                        <a href="#">收藏a>
                        <a href="javascript:void(0)" class="add_scar">加入购物车a>
                    em>
                li>
                <li>
                    <a href="#">
                        <img src="images/ad2.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
                    a>
                    <div class="light">
                        <img src="images/saoguang.png">
                    div>
                    <span>¥199span>
                    <a href="#">
                        <p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
                    a>
                    <em>
                        <a href="#">收藏a>
                        <a href="javascript:void(0)" class="add_scar">加入购物车a>
                    em>
                li>
                <li>
                    <a href="#">
                        <img src="images/ad2.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
                    a>
                    <div class="light">
                        <img src="images/saoguang.png">
                    div>
                    <span>¥199span>
                    <a href="#">
                        <p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
                    a>
                    <em>
                        <a href="#">收藏a>
                        <a href="javascript:void(0)" class="add_scar">加入购物车a>
                    em>
                li>
                <li>
                    <a href="#">
                        <img src="images/ad2.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
                    a>
                    <div class="light">
                        <img src="images/saoguang.png">
                    div>
                    <span>¥199span>
                    <a href="#">
                        <p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
                    a>
                    <em>
                        <a href="#">收藏a>
                        <a href="javascript:void(0)" class="add_scar">加入购物车a>
                    em>
                li>
            ul>
        div>
        <div class="currency f-1-lt04" style="display:none">
            <ul>
                <li>
                    <a href="#">
                        <img src="images/ad9.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
                    a>
                    <div class="light">
                        <img src="images/saoguang.png">
                    div>
                    <span>¥199span>
                    <a href="#">
                        <p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
                    a>
                    <em>
                        <a href="#">收藏a>
                        <a href="javascript:void(0)" class="add_scar">加入购物车a>
                    em>
                li>
                <li>
                    <a href="#">
                        <img src="images/ad9.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
                    a>
                    <div class="light">
                        <img src="images/saoguang.png">
                    div>
                    <span>¥199span>
                    <a href="#">
                        <p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
                    a>
                    <em>
                        <a href="#">收藏a>
                        <a href="javascript:void(0)" class="add_scar">加入购物车a>
                    em>
                li>
                <li>
                    <a href="#">
                        <img src="images/ad9.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
                    a>
                    <div class="light">
                        <img src="images/saoguang.png">
                    div>
                    <span>¥199span>
                    <a href="#">
                        <p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
                    a>
                    <em>
                        <a href="#">收藏a>
                        <a href="javascript:void(0)" class="add_scar">加入购物车a>
                    em>
                li>
                <li>
                    <a href="#">
                        <img src="images/ad9.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
                    a>
                    <div class="light">
                        <img src="images/saoguang.png">
                    div>
                    <span>¥199span>
                    <a href="#">
                        <p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
                    a>
                    <em>
                        <a href="#">收藏a>
                        <a href="javascript:void(0)" class="add_scar">加入购物车a>
                    em>
                li>
                <li>
                    <a href="#">
                        <img src="images/ad9.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
                    a>
                    <div class="light">
                        <img src="images/saoguang.png">
                    div>
                    <span>¥199span>
                    <a href="#">
                        <p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
                    a>
                    <em>
                        <a href="#">收藏a>
                        <a href="javascript:void(0)" class="add_scar">加入购物车a>
                    em>
                li>
            ul>
        div>
    div>
    

    
    <footer>
        <div class="pc-footer-top">
            <div class="center">
                <ul class="clearfix">
                    <li>
                        <span>关于我们span>
                        <a href="#">关于我们a>
                        <a href="#">诚聘英才a>
                        <a href="#">用户服务协议a>
                        <a href="#">网站服务条款a>
                        <a href="#">联系我们a>
                    li>
                    <li class="lw">
                        <span>购物指南span>
                        <a href="#">新手上路a>
                        <a href="#">订单查询a>
                        <a href="#">会员介绍a>
                        <a href="#">网站服务条款a>
                        <a href="#">帮助中心a>
                    li>
                    <li class="lw">
                        <span>消费者保障span>
                        <a href="#">人工验货a>
                        <a href="#">退货退款政策a>
                        <a href="#">运费补贴卡a>
                        <a href="#">无忧售后a>
                        <a href="#">先行赔付a>
                    li>
                    <li class="lw">
                        <span>商务合作span>
                        <a href="#">人工验货a>
                        <a href="#">退货退款政策a>
                        <a href="#">运费补贴卡a>
                        <a href="#">无忧售后a>
                        <a href="#">先行赔付a>
                    li>
                    <li class="lss">
                        <span>下载手机版span>
                        <div class="clearfix lss-pa">
                            <div class="fl lss-img"><img src="images/code.png" alt="">div>
                            <div class="fl" style="padding-left:20px; float:left;">
                                <h4>扫描下载云购APPh4>
                                <p style="font-size:12px; color:#666;">把优惠握在手心p>
                                <p style="font-size:12px; color:#666;">把潮流带在身边p>
                                <p>p>
                            div>
                        div>
                    li>
                ul>
            div>
            <div class="pc-footer-lin">
                <div class="center">
                    <p>友情链接:
                        <a href="#" target="_blank">网页素材网a>
                        <a href="#" target="_blank">杂货铺a>
                        <a href="#">手游交易平台a>
                        <a href="#">法律咨询a>
                        <a href="#">深圳地图a>
                        <a href="#">P2P网贷导航a>
                        <a href="#">名鞋库a>
                        <a href="#">叮当音乐网a>
                        <a href="#">名鞋库a>
                        <a href="#">114票务网a>
                        <a href="#">儿歌视频大全a>
                    p>
                    <p>
                        京ICP证1900075号 京ICP备20051110号-5 京公网安备110104734773474323 统一社会信用代码 91113443434371298269B
                        食品流通许可证SP1101435445645645640352397
                    p>
                    <p style="padding-bottom:30px">版物经营许可证 新出发京零字第朝160018号 Copyright©2015-2019 版权所有 ZHE800.COM p>
                div>
            div>
        div>
    footer>
    

body>

html>

 

js

$(function () {
    //送至某地
    $(".dis_add").mouseenter(function () {
        $(".hide_add").css({ display: "block" })
    }).mouseleave(function () {
        $(".hide_add").css({ display: "none" })
    })
    $(".hide_add ul li a").click(function () {
        $(".hide_add").css({ display: "none" })
    })
    $(".hide_add ul li").click(function () {
        $(".hide_add ul li").find("a").removeClass("selected");
        $(this).find("a").addClass("selected");
    })
    $(".hide_add ul li a").click(function () {
        $(".hide_add").css({ display: "none" })
    })
    //横向导航部分
    $(".dao_list a").click(function () {
        $(this).addClass("color").siblings().removeClass("color")
    });
    /*滑过侧边栏之后显示和隐藏*/
    $(".cates").mouseenter(function () {
        var cat = $(this).attr("mt-ct");
        $(".b-" + cat + "").show().siblings().hide();
    })
    $(".important").mouseleave(function () {
        $(".import_list").hide()
    })
    /*侧边栏每块划上的时候添加颜色块*/
    $("aside ul li").mouseenter(function () {
        $(this).addClass("yanses").siblings().removeClass("yanses")
    })
    /*滚动之后固定定位*/
    $(window.document).scroll(function () {
        if ($(window).scrollTop() > 500) {
            $(".dao_hang").addClass("fixed_dh");
            $("aside").css({ display: "none" });
            $(".advertisement").css({ display: "none" });
            // 侧边栏的出现和消失
            $(".important").mouseenter(function () {
                $("aside").css({ display: "block", background: "#fff" })
            }).mouseleave(function () {
                $("aside").css({ display: "none" })
            })
        };
        if ($(window).scrollTop() < 500) {
            $(".dao_hang").removeClass("fixed_dh");
            $("aside").css({ display: "block" });
            $(".advertisement").css({ display: "block" });
            // 侧边栏的出现和消失
            $(".important").mouseleave(function () {
                $("aside").css({ display: "block" })
            })
        };
    });

    /*控制显示或消失*/
    $(".dog").mouseenter(function () {
        var dogs = $(this).attr("dg-floor")
        var dog = $(this).attr("dg-ct");
        $(".f-" + dogs + "-" + dog + "").show().siblings().hide();
    });
    /*添加色块*/
     $(".detailed_navigation ul li").mouseenter(function () {
        $(this).addClass("yadi").siblings().removeClass("yadi")
    }); 
    // 全屏轮播
    var aIcon = $('#icon li');
    var aBanner = $('#banner a');
    aIcon.mouseover(function () {
        aIcon.removeClass('active');
        $(this).addClass('active');
        aBanner.removeClass('show');
        $('#banner a').eq($(this).index()).addClass('show');
    });

    var aBtn = $('#btn a');
    var aCon = $('#con ul');
    aBtn.mouseover(function () {
        aBtn.removeClass('active');
        $(this).addClass('active');
        aCon.removeClass('show');
        $('#con ul').eq($(this).index()).addClass('show');
    });
})

css

* {
    font-family: 'Microsoft Yahei';
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: #666;
}

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

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

i,
em {
    font-style: normal;
}

b,
strong {
    font-weight: normal;
}

ul,
ol,
dl,
dd,
dt {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.clearfix:after {
    display: block;
    content: '';
    clear: both;
}

.clearfix {
    zoom: 1;
}

th,
td {
    border: 1px solid #fff;
    padding: 0;
}

table {
    border-collapse: collapse;
}

img,
li {
    vertical-align: top;
}

a img {
    border: 0;
}
button {
    border:none;
}
/* top start */

.top {
    width: 100%;
    height: 42px;
    background: #f9f9f9;
    display: block;
    border-bottom: 1px solid #eee;
}

.seck {
    width: 1200px;
    height: 42px;
    margin: 0 auto
}

.dis_add {
    width: 120px;
    height: 42px;
    font-size: 12px;
    color: #666;
    line-height: 42px;
    position: relative;
    float: left
}

.dis_add span {
    cursor: pointer
}

.dis_add img {
    transition: 0.3s
}

.dis_add:hover span {
    color: #FF0036
}

.dis_add:hover img {
    transform: rotate(180deg)
}

.hide_add {
    position: absolute;
    left: 0;
    top: 42px;
    width: 285px;
    height: auto;
    background: #fff;
    overflow: hidden;
    border: 1px solid #f3f3f3;
    padding-bottom: 6px;
    display: none;
    z-index: 4000
}

.hide_add ul {
    width: 285px;
    height: auto;
    margin: 0 auto;
    overflow: hidden
}

.hide_add ul li {
    float: left
}

.hide_add ul li a {
    display: block;
    width: 55px;
    text-align: center;
    height: 34px;
    line-height: 34px;
    font-size: 12px;
    color: #666;
}

.hide_add ul li a:hover {
    background: #f9f9f9;
    color: #FF0036
}

.hide_add ul li a.selected {
    background: #FF0036;
    color: #fff
}

.register_login {
    height: 42px;
    float: left;
    line-height: 42px
}

.register_login em {
    font-size: 12px;
    color: #666
}

.register_login a {
    font-size: 12px;
    color: #666;
    padding-left: 6px;
    padding-right: 6px
}

.register_login a:hover {
    color: #FF0036
}

.vip_center {
    height: 42px;
    float: right;
    line-height: 42px
}

.vip_center a {
    font-size: 12px;
    color: #666;
    padding-left: 6px;
    padding-right: 6px
}

.vip_center a:hover {
    color: #FF0036
}

/* top end  */

/*header start*/

.maxbj .logo-size {
    width: 160px;
}

.maxbj .logo-size img {
    width: 100%;
    height: auto;
    display: block;
    border: none;
}

header {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 10px;
}

.logo {
    display: block;
    width: 302px;
    float: left;
    margin-top: 4px;
    overflow: hidden;
}

.logo img {
    display: block
}

.search {
    display: block;
    width: 730px;
    height: 34px;
    background: #f5f5f5;
    float: left;
    overflow: hidden;
    margin-top: 15px;
    border: 2px solid #FF0036;
    margin-left: 50px;
}

.search button {
    width: 116px;
    height: 34px;
    background: #FF0036;
    color: #fff;
    cursor: pointer;
    font-size: 14px
}

.search button:hover {
    background: #FF0036
}

.sping_car {
    width: 120px;
    height: 34px;
    float: right;
    margin-top: 18px;
    line-height: 34px;
    margin-left: 83px;
    color: #666;
    padding-left: 22px;
    overflow: hidden;
    border: 1px solid #FF0036;
}

.sping_car b {
    display: block;
    float: left;
    width: 15px;
    height: 15px;
    margin-top: 11px;
    overflow: hidden;
    background: url(../images/shopping_cart.png) no-repeat center;
}

.sping_car em {
    font-size: 14px;
    color: #666;
    line-height: 30px;
    margin-left: 3px;
    transition: 0.1;
    cursor: pointer
}

.sping_car:hover em {
    color: #FF0036
}

.sping_car:hover b {
    background: url(../images/shopping_cart1.png) no-repeat center
}

/* header end */

/* nav start */

.dao_hang {
    width: 100%;
    height: 42px;
    background: #000
}

.dao_hang.fixed_dh {
    position: fixed;
    top: 0;
    z-index: 7000;
    margin-top: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2)
}

.dao_hang nav {
    width: 1200px;
    height: 30px;
    margin: 0 auto;
    position: relative
}

.dao_hang nav .important {
    display: block;
    width: 210px;
    height: 42px;
    background: #FF0036;
    color: #fff;
    font-size: 12px;
    line-height: 42px;
    cursor: pointer;
    float: left;
    position: relative
}

.dao_hang nav .important img {
    display: block;
    float: left;
    margin-left: 34px;
    margin-right: 10px;
}

.dao_list {
    float: left;
    height: 30px;
    margin-left: 15px;
    perspective: 100px
}

.dao_list a {
    display: block;
    float: left;
    font-size: 12px;
    color: #fff;
    padding-left: 15px;
    padding-right: 15px;
    line-height: 42px;
    height: 42px;
    position: relative;
    margin-right: 10px
}

.dao_list a:hover {
    background: #FF0036
}

.dao_list a.color {
    background: #FF0036;
    color: #fff
}

aside {
    width: 210px;
    height: 512px;
    background: rgba(255, 255, 255, 0.8);
    position: absolute;
    left: 0;
    display: block;
    z-index: 2000;
}

.import_list {
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3)
}

aside ul li.yanses {
    background: rgba(235, 78, 1, 0.2)
}

aside ul li {
    overflow: hidden;
    margin-top: 10px
}

aside ul li h3 {
    font-size: 14px;
    color: #000;
    text-indent: 10px;
    font-weight: 100;
    height: 30px;
    line-height: 30px
}

aside ul li p {
    display: block;
    width: 200px;
    height: auto;
    margin-left: 10px
}

aside ul li p a {
    display: block;
    font-size: 14px;
    line-height: 20px;
    float: left;
    padding-right: 10px;
    color: #666
}

aside ul li p a:hover {
    color: #FF0036
}

.import_list {
    width: 729px;
    height: 498px;
    position: absolute;
    top: 42px;
    left: 210px;
    display: none;
    background: #FFF;
    z-index: 3000
}

.import_list dt {
    font-size: 14px;
    color: #000;
    line-height: 30px;
    height: 30px;
    margin-top: 7px;
    text-indent: 20px
}

.import_list dd {
    margin-left: 20px;
    border-bottom: 1px dashed #f3f3f3
}

.import_list dd a {
    font-size: 14px;
    color: #666;
    padding-left: 6px;
    padding-right: 6px
}

.import_list dd a:hover {
    color: #FF0036
}

.advertisement {
    width: 250px;
    height: 500px;
    position: absolute;
    top: -480px;
    right: 0;
    z-index: 3000;
    background: #fff;
}

.advertisement h4 {
    font-size: 14px;
    color: #333;
    font-weight: 100;
    line-height: 50px;
    border-bottom: 1px dashed #cccccc;
    width: 230px;
    margin: 0 auto
}

.notice_new {
    width: 230px;
    height: 220px;
    margin: 0 auto;
}

.notice_new a {
    font-size: 12px;
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #666;
    line-height: 30px;
    transition: 0.6s;
}

.notice_new p {
    display: block;
    width: 230px;
    height: 30px;
    margin: 0 auto;
    overflow: hidden;
    perspective: 1200px
}

.notice_new p:hover a {
    color: #FF0036;
}

.notice_img {
    width: 230px;
    height: 219px;
    margin: 0 auto;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
    perspective: 1200px;
    overflow: hidden;
    position: relative
}

.notice_img img {
    display: block;
    width: 230px;
    height: 219px;
    transition: 1.6s;
    position: absolute;
    top: 0;
    left: 0
}

.img2 {
    transform: rotateY(90deg)
}

.notice_img:hover img {
    transform: rotateY(360deg)
}

/* nav end */

/*banner start*/

.banner-wrap {
    position: relative;
    width: 100%;
    height: 500px;
    border-bottom: 1px solid #b2b2b2;
}

.banner {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.banner .banner-bg1,
.banner .banner-bg2,
.banner .banner-bg3,
.banner .banner-bg4 {
    display: none;
    width: 100%;
    height: 500px;
}

.banner .show {
    display: block;
}

.banner .banner-bg1 img {
    margin-left: -277px;
}

.banner .banner-bg2 img,
.banner .banner-bg3 img,
.banner .banner-bg4 img {
    position: absolute;
    left: 0;
    top: 0;
    margin-left: -344px;
    z-index: 9;
}

.banner-wrap .banner-con {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -960px;
    z-index: 1;
}

.banner-wrap .icon {
    position: absolute;
    left: 50%;
    bottom: 28px;
    margin-left: -60px;
    width: 120px;
    height: 16px;
    z-index: 12;
}

.banner-wrap .icon1,
.banner-wrap .icon2,
.banner-wrap .icon3,
.banner-wrap .icon4 {
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    margin-right: 14px;
}

.banner-wrap .active {
    width: 16px;
    height: 16px;
    background: #00925F;
}

/*banner end*/

.blessing_package {
    width: 1200px;
    height: 45px;
    margin: 0 auto;
    display: block;
    overflow: hidden;
    margin-top: 40px;
    background: #eff0f8;
    border-top:2px solid #5f6cb7;
}

.blessing_package h3 {
    font-size: 18px;
    line-height: 45px;
    padding-left:20px;
    overflow: hidden;
    width: 190px;
    height: 45px;
    background:#5f6cb7;
    color:#fff;
    text-align: center;
    font-weight: 200;
    float: left;
}

.blessing_package h3 font {
    font-size: 14px;
    color: #999;
    font-weight: 100;
    margin-left: 6px
}

.blessing_package h3 a {
    float: right;
    font-size: 14px;
    color: #fff;
    display: block;
    background: #FF0036;
    padding-left: 12px;
    padding-right: 12px;
    font-weight: 100
}

.blessing_package h3 a:hover {
    background: #FF0036
}

.three_fb {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    margin-top: 20px
}

.three_fb ul {
    width: 1200px
}

.three_fb ul li {
    width: 396px;
    height: 179px;
    float: left;
    border: 2px solid #fff;
    overflow: hidden;
    position: relative;
    padding-bottom: 3px
}

.three_fb ul li:hover {
    border: 2px solid #FF0036
}

.three_fb ul li img {
    width: 396px;
    height: 156px;
    display: block;
    margin-bottom: 2px
}

.three_fb ul li span {
    padding-left: 10px;
    padding-right: 10px;
    background: #FF0036;
    line-height: 20px;
    font-size: 14px;
    color: #fff
}

.three_fb ul li em {
    font-size: 12px;
    color: #ff6182;
    line-height: 24px;
    float: right;
    margin-right: 20px
}

.three_fb ul li a {
    float: right;
    font-size: 14px;
    color: #000;
    line-height: 24px;
    transition: 0.3s;
}

.three_fb ul li a:hover {
    background: #FF0036;
    color: #fff;
    padding-left: 10px;
    padding-right: 10px
}

.fixed_position {
    width: 1200px;
    height: 1px;
    position: fixed;
    top: 100px;
    left: 50%;
    margin-left: -600px
}

.fixed_position_1 {
    position: absolute;
    top: 0;
    left: -80px;
    width: 66px;
    display: none;
    background: rgba(255,255,255,0.3)
}

.fixed_position_1 ul li {
    font-size: 12px;
    line-height: 34px;
    border-bottom: 1px solid #c2c2c2;
    text-align: center;
    color: #fff;
    cursor: pointer;
    background: #666;
    height: 34px;
}

.fixed_position_1 ul li:hover {
    background: #333;
    color: #fff;
}

.fixed_position_1 ul li.addcss {
    color: #fff;
    background: #FF0036
}

.currency {
    width: 1200px;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 14px;
    padding-top: 6px;
    padding-bottom: 6px
}

.currency ul {
    width:1300px;
}

.currency ul li {
    width: 230px;
    float: left;
    margin-right: 10px;
    height: 300px;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,0.3);
    border: 1px solid #ddd;
}

.currency ul li span {
    display: block;
    width: 220px;
    line-height: 24px;
    font-size: 20px;
    color: #FF0036
}

.light {
    display: block;
    top: 0;
    left: -230px;
    transition: 0.8s;
    position: absolute;
    z-index: 6000
}

.currency i {
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    display: block;
    width: 50px;
    height: 50px;
    z-index: 6000
}

.currency ul li p {
    display: block;
    width: 220px;
    line-height: 20px;
    font-size: 12px;
    color: #111;
    margin: 0 auto
}

.currency ul li p:hover {
    text-decoration: underline;
    color:#FF0036;
}

.currency ul li em {
    display: block;
    width: 230px;
    background: #FF0036;
    height: 44px;
    top: -46px;
    left: 0;
    position: absolute;
    overflow: hidden;
    transition: 0.3s;
    z-index: 999999;
}

.currency ul li:hover em {
    top: 0
}

.currency ul li em a {
    display: block;
    padding-left: 20px;
    padding-right: 20px;
    line-height: 30px;
    float: left;
    color: #fff;
    height: 30px;
    margin-top: 5px;
    border: 1px solid #fff;
    margin-left: 11px;
    transition: 0.3s;
    font-size:12px;
    width: 56px;
    text-align: center;
}

.currency ul li em a:hover {
    background: #333
}

.detailed_navigation {
    float: right;
    height:45px;
    line-height:45px;
}

.detailed_navigation ul li.yadi {
    color: #FFF;
    background:#FF0036;
}

.detailed_navigation ul li:hover{
    background:#FF0036;
    color:#fff;
}

.detailed_navigation ul li {
    float: left;
    font-size: 14px;
    padding-left: 20px;
    padding-right: 20px;
    cursor: pointer;
    height:45px;
    line-height:45px;
    color:#666;

} 
/* footer start */
.pc-footer-top {
    border-top: 2px solid #ee4644;
    margin-top: 15px;
}

.pc-footer-top ul li {
    border-right: 1px solid #ddd;
    float: left;
    height: 200px;
    line-height: 24px;
    padding: 28px 0 0 20px;
    text-align: left;
    width: 170px;
}

.pc-footer-top ul li span {
    color: #666;
    display: block;
    font: 16px/30px "microsoft yahei";
}

.pc-footer-top ul li a {
    color: #999;
    display: block;
    height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 85px;
    font-size: 12px;
}

.pc-footer-top ul .lw {
    padding-left: 40px;
    width: 175px;
}

.pc-footer-lin {
    border-top: 1px solid #ddd;
}

.pc-footer-lin p {
    text-align: center;
    padding-top: 20px;
    font-size: 12px;
}

.pc-footer-top ul .lss {
    padding-left: 40px;
    width: 300px;
    border-right: 0;
}

.pc-footer-lin p a {
    color: #666;
    margin-right: 5px;
}

.pc-footer-lin p a:hover {
    color: #FF0036;
}

.lss-img {
    width: 130px;
    height: 130px;
}

.lss-img img {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}

.center {
    width: 1200px;
    margin: 0 auto;
    position: relative;
}

.lss-img {
    width: 130px;
    height: 130px;
    float: left;
}

.lss-img img {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}

.lss-pa {
    background: #fff;
    padding: 10px;
}

 

你可能感兴趣的:(易购商城首页)