需求描述
- 网站头部及特效制作
- Logo及搜索区域
- 导航区域及特效制作
- 轮播区域及特效制作
- 应季商品区域及特效
- 底部区域
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;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=" 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; }