码迷,mamicode.com
首页 > 其他好文 > 详细

易购商城首页

时间:2020-07-12 18:34:52      阅读:1245      评论:0      收藏:0      [点我收藏+]

标签:ipad   cli   鼠标垫   float   工具   ansi   净化   cat   nsf   

需求描述

  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>
    <!--top start -->
    <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>
    <!-- top end -->
    <!--header start-->
    <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>
    <!-- header end -->
    <!--nav start -->
    <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="#">DIY</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="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="#">iPhone</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="#">手机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="#">TCL</a>
                            <a href="#">索尼</a>
                            <a href="#">4K超高清</a>
                            <a href="#">智能曲面</a>
                            <a href="#">OLED</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>
                        <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="#">LG</a>
                            <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="#">CPU</a>
                            <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="#">唇彩BB</a>
                            <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>
    <!-- nav end -->
    <!--banner start-->
    <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>
    <!--banner end-->
    <!--应季商品 开始-->
    <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.00</span>
                    <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>¥2149</span>
                    <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>¥199</span>
                    <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>¥199</span>
                    <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>¥199</span>
                    <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>¥199</span>
                    <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>¥199</span>
                    <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>¥199</span>
                    <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>¥199</span>
                    <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>¥199</span>
                    <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>¥199</span>
                    <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>¥199</span>
                    <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>¥199</span>
                    <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>¥199</span>
                    <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>¥199</span>
                    <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>¥199</span>
                    <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>¥199</span>
                    <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>¥199</span>
                    <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>¥199</span>
                    <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>¥199</span>
                    <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 start -->
    <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>扫描下载云购APP</h4>
                                <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>
    <!-- footer end-->

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

 

易购商城首页

标签:ipad   cli   鼠标垫   float   工具   ansi   净化   cat   nsf   

原文地址:https://www.cnblogs.com/304979850w/p/13289219.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!