需求描述
- 网站头部及特效制作
- 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>
<div class="top">
<section class="seck">
<div class="dis_add">
<em style="float:left">送货至:em>
<span style="float:left">北京span>
<img src="images/jt_t.png" style="display:block;width:7px;height:4px; float:left; margin-top:19px; margin-left:3px">
<div class="hide_add">
<ul>
<li>
<a href="javascript:void(0)" class="selected">北京a>
li>
<li>
<a href="javascript:void(0)">上海a>
li>
<li>
<a href="javascript:void(0)">天津a>
li>
<li>
<a href="javascript:void(0)">重庆a>
li>
<li>
<a href="javascript:void(0)">河北a>
li>
<li>
<a href="javascript:void(0)">山西a>
li>
<li>
<a href="javascript:void(0)">河南a>
li>
<li>
<a href="javascript:void(0)">辽宁a>
li>
<li>
<a href="javascript:void(0)">吉林a>
li>
<li>
<a href="javascript:void(0)">黑龙江a>
li>
<li>
<a href="javascript:void(0)">内蒙古a>
li>
<li>
<a href="javascript:void(0)">江苏a>
li>
<li>
<a href="javascript:void(0)">山东a>
li>
<li>
<a href="javascript:void(0)">安徽a>
li>
<li>
<a href="javascript:void(0)">浙江a>
li>
<li>
<a href="javascript:void(0)">浙江a>
li>
<li>
<a href="javascript:void(0)">福建a>
li>
<li>
<a href="javascript:void(0)">湖北a>
li>
<li>
<a href="javascript:void(0)">湖南a>
li>
<li>
<a href="javascript:void(0)">广东a>
li>
<li>
<a href="javascript:void(0)">广西a>
li>
<li>
<a href="javascript:void(0)">江西a>
li>
<li>
<a href="javascript:void(0)">四川a>
li>
<li>
<a href="javascript:void(0)">海南a>
li>
<li>
<a href="javascript:void(0)">贵州a>
li>
ul>
div>
div>
<div class="register_login">
<em>您好,em>
<a href="#">会员登录a>
<a href="#">快速注册a>
div>
<div class="vip_center">
<a href="#">会员中心a>
<a href="#">商户中心a>
<a href="#">帮助a>
div>
section>
div>
<div class="maxbj">
<header>
<h1 class="logo logo-size">
<img src="images/logo.png">
h1>
<div class="search">
<form>
<input type="text" placeholder="零食盛宴 满99减50满199减100..." required style=" width:610px; height:34px; text-indent:2em; float:left; box-shadow:none">
<button>搜索button>
form>
div>
<div class="sping_car">
<b>b>
<em>我的购物车em>
div>
header>
div>
<section class="dao_hang">
<nav>
<div class="advertisement" style="top:42px;">
<h4>最新公告h4>
<div class="notice_new">
<p>
<a href="#">来部红色手机,颜值亮爆朋友圈a>
p>
<p>
<a href="#">荣耀V10高配版 6GB+64GB 魅丽红 移动联通电信4G手机a>
p>
<p>
<a href="#">真正香饽饽,时髦的全面屏手机大团战a>
p>
<p>
<a href="#">女生新宠vivo X21梦幻粉,八大配色随你选a>
p>
<p>
<a href="#">除了低价,我们还能给你更多专业的购机指导a>
p>
<p>
<a href="#">给你三千元,你可以买到什么配置的手机?a>
p>
<p>
<a href="#">作为游戏爱好者,怎么能少一款游戏笔记本呢?a>
p>
div>
<a href="#">
<div class="notice_img">
<img src="images/activity.jpg" class="img1">
<img src="images/activity.jpg" class="img2">
div>
a>
div>
<div class="important">
<img src="images/all_list.png" style=" margin-top:13px">
全部商品分类
<aside style="top:42px;">
<ul>
<li class="cates" mt-ct="list01">
<h3>手机通讯h3>
<p>
<a href="#">手机a>
<a href="#">智能数码a>
<a href="#">运营商a>
<i style="font-family:'宋体';color:#666; line-height:23px; padding-right:20px; font-size:14px; float:right">>i>
p>
li>
<li class="cates" mt-ct="list02">
<h3>家用电器h3>
<p>
<a href="#">电视a>
<a href="#">冰箱a>
<a href="#">空调a>
<a href="#">洗衣机a>
<i style="font-family:'宋体';color:#666; line-height:23px; padding-right:20px; font-size:14px; float:right">>i>
p>
li>
<li class="cates" mt-ct="list03">
<h3>厨卫大全h3>
<p>
<a href="#">厨卫大电a>
<a href="#">生活家电a>
<a href="#">厨具a>
<i style="font-family:'宋体';color:#666; line-height:23px; padding-right:20px; font-size:14px; float:right">>i>
p>
li>
<li class="cates" mt-ct="list04">
<h3>电脑相机h3>
<p>
<a href="#">电脑办公a>
<a href="#">相机a>
<a href="#">DIYa>
<i style="font-family:'宋体';color:#666; line-height:23px; padding-right:20px; font-size:14px; float:right">>i>
p>
li>
<li class="cates" mt-ct="list05">
<h3>家具家纺h3>
<p>
<a href="#">家居a>
<a href="#">家具a>
<a href="#">家装a>
<a href="#">家纺a>
<i style="font-family:'宋体';color:#666; line-height:23px; padding-right:20px; font-size:14px; float:right">>i>
p>
li>
<li class="cates" mt-ct="list06">
<h3>食品酒水h3>
<p>
<a href="#">食品a>
<a href="#">酒水a>
<a href="#">生鲜a>
<a href="#">特产a>
<i style="font-family:'宋体';color:#666; line-height:23px; padding-right:20px; font-size:14px; float:right">>i>
p>
li>
<li class="cates" mt-ct="list07">
<h3>美妆个护h3>
<p>
<a href="#">美妆a>
<a href="#">个护a>
<a href="#">清洁a>
<a href="#">宠物a>
<i style="font-family:'宋体';color:#666; line-height:23px; padding-right:20px; font-size:14px; float:right">>i>
p>
li>
ul>
aside>
<div>
<div class="import_list b-list01">
<dt>手机通讯:dt>
<dd>
<a href="#">全部手机a>
<a href="#">iPhonea>
<a href="#">小米a>
<a href="#">荣耀a>
<a href="#">华为a>
<a href="#">魅族a>
<a href="#">美图a>
<a href="#">努比亚a>
<a href="#">诺基亚a>
<a href="#">手机维修a>
<a href="#">以旧换新a>
dd>
<dt>手机配件:dt>
<dd>
<a href="#">全部配件a>
<a href="#">手机壳a>
<a href="#">手机贴膜a>
<a href="#">手机存储卡a>
<a href="#">数据线a>
<a href="#">充电器a>
<a href="#">无线充电器a>
<a href="#">手机耳机a>
<a href="#">手机电池a>
<a href="#">苹果周边a>
<a href="#">移动电源a>
<a href="#">蓝牙耳机a>
<a href="#">自拍杆a>
<a href="#">手机支架a>
<a href="#">手机U盘a>
<a href="#">蓝牙音箱a>
<a href="#">车载配件a>
<a href="#">手机饰品a>
dd>
<dt>智能设备:dt>
<dd>
<a href="#">全部设备a>
<a href="#">智能门锁a>
<a href="#">平衡车a>
<a href="#">无人机a>
<a href="#">智能摄像头a>
<a href="#">智能机器人a>
<a href="#">智能手环a>
<a href="#">智能手表a>
<a href="#">VR眼镜a>
<a href="#">智能家居a>
<a href="#">智能健康监测a>
<a href="#">玩客云a>
dd>
<dt>电子教育:dt>
<dd>
<a href="#">全部电子教育a>
<a href="#">儿童手表a>
<a href="#">学生电脑a>
<a href="#">故事机/学习机a>
<a href="#">翻译机a>
<a href="#">步步高点读机a>
<a href="#">小天才儿童手表a>
<a href="#">点读机a>
<a href="#">电子书a>
<a href="#">电子词典a>
<a href="#">复读机a>
dd>
div>
<div class="import_list b-list02">
<dt>电视:dt>
<dd>
<a href="#">全部电视a>
<a href="#">65英寸a>
<a href="#">55英寸a>
<a href="#">32英寸及以下a>
<a href="#">海信a>
<a href="#">小米a>
<a href="#">创维a>
<a href="#">夏普a>
<a href="#">TCLa>
<a href="#">索尼a>
<a href="#">4K超高清a>
<a href="#">智能曲面a>
<a href="#">OLEDa>
<a href="#">店铺热卖a>
dd>
<dt>冰箱:dt>
<dd>
<a href="#">全部冰箱a>
<a href="#">对开门a>
<a href="#">多门a>
<a href="#">十字对开a>
<a href="#">三门a>
<a href="#">双门a>
<a href="#">风冷(无霜)a>
<a href="#">西门子a>
<a href="#">容声a>
<a href="#">美的a>
<a href="#">美菱a>
<a href="#">海信a>
<a href="#">三星a>
dd>
<dt>空调:dt>
<dd>
<a href="#">挂壁式空调a>
<a href="#">立柜式空调a>
<a href="#">格力空调a>
<a href="#">超级品牌日a>
<a href="#">钜惠登场a>
<a href="#">变频空调a>
<a href="#">自清洁空调a>
<a href="#">美的a>
<a href="#">奥克斯a>
<a href="#">合资空调a>
<a href="#">移动空调a>
<a href="#">中央空调a>
<a href="#">空调嘉年华a>
<a href="#">焕新抢不停a>
<a href="#">以旧换新0元安装空调a>
<a href="#">空调安维a>
dd>
<dt>洗衣机:dt>
<dd>
<a href="#">全部洗衣机a>
<a href="#">滚筒a>
<a href="#">洗干一体机a>
<a href="#">波轮大容量a>
<a href="#">迷你洗衣机a>
<a href="#">变频a>
<a href="#">海尔a>
<a href="#">西门子a>
<a href="#">美的a>
<a href="#">小天鹅a>
<a href="#">海信a>
<a href="#">松下a>
<a href="#">三洋a>
<a href="#">三星a>
<a href="#">博世a>
<a href="#">LGa>
<a href="#">冰洗配件a>
dd>
div>
<div class="import_list b-list03">
<dt>厨卫大全:dt>
<dd>
<a href="#">烟灶套餐a>
<a href="#">油烟机a>
<a href="#">燃气灶a>
<a href="#">集成灶a>
<a href="#">消毒柜a>
<a href="#">洗碗机a>
<a href="#">嵌入式厨电a>
<a href="#">垃圾处理器a>
<a href="#">商用厨房电器a>
<a href="#">老板a>
<a href="#">方太a>
dd>
<dt>中式厨房:dt>
<dd>
<a href="#">电饭煲a>
<a href="#">电压力锅a>
<a href="#">豆浆机a>
<a href="#">电磁炉a>
<a href="#">电水壶a>
<a href="#">电火锅a>
<a href="#">电饼铛a>
<a href="#">电炖锅a>
<a href="#">电蒸锅a>
<a href="#">煮蛋器a>
<a href="#">养生壶a>
<a href="#">煎药壶a>
<a href="#">电热饭盒a>
<a href="#">电陶炉a>
dd>
<dt>生活电器:dt>
<dd>
<a href="#">空气净化器a>
<a href="#">取暖器a>
<a href="#">油汀a>
<a href="#">欧式快热炉a>
<a href="#">暖风机a>
<a href="#">小太阳a>
<a href="#">加湿器a>
<a href="#">吸尘器a>
<a href="#">扫地机器人a>
<a href="#">干衣机a>
<a href="#">除湿机a>
<a href="#">挂烫机a>
<a href="#">清洁机a>
<a href="#">除螨仪a>
dd>
div>
<div class="import_list b-list04">
<dt>电脑整机:dt>
<dd>
<a href="#">笔记本a>
<a href="#">游戏本a>
<a href="#">轻薄本a>
<a href="#">台式电脑a>
<a href="#">电脑一体a>
<a href="#">机服务器a>
<a href="#">工作站a>
dd>
<dt>外设附件:dt>
<dd>
<a href="#">鼠标a>
<a href="#">键盘a>
<a href="#">键鼠套装a>
<a href="#">U盘a>
<a href="#">移动硬盘a>
<a href="#">鼠标垫a>
<a href="#">电脑包a>
<a href="#">电脑音箱a>
<a href="#">插线板a>
<a href="#">摄像头a>
dd>
<dt>电脑配件:dt>
<dd>
<a href="#">显示器a>
<a href="#">CPUa>
<a href="#">主板a>
<a href="#">显卡a>
<a href="#">硬盘a>
<a href="#">SSD固态硬盘a>
<a href="#">内存a>
<a href="#">机箱a>
<a href="#">散热器a>
<a href="#">电源a>
<a href="#">组装电脑a>
<a href="#">刻录机a>
<a href="#">光驱声卡a>
<a href="#">扩展卡a>
<a href="#">装机配件a>
dd>
<dt>办公文具:dt>
<dd>
<a href="#">投影仪a>
<a href="#">打印机a>
<a href="#">复印复合机a>
<a href="#">保险柜a>
<a href="#">扫描仪a>
<a href="#">点验钞机a>
<a href="#">电话机a>
<a href="#">标签机a>
<a href="#">复印纸a>
<a href="#">投影幕布a>
<a href="#">硒鼓a>
<a href="#">墨盒a>
<a href="#">办公文具本册a>
<a href="#">便签a>
<a href="#">财务用品a>
<a href="#">文件管理a>
<a href="#">得力a>
dd>
div>
<div class="import_list b-list05">
<dt>家具:dt>
<dd>
<a href="#">沙发a>
<a href="#">床a>
<a href="#">床垫a>
<a href="#">电视柜a>
<a href="#">电脑椅a>
<a href="#">衣柜a>
<a href="#">茶几a>
<a href="#">餐桌a>
<a href="#">电脑桌a>
<a href="#">置物架a>
<a href="#">阳台a>
<a href="#">户外a>
<a href="#">客厅成套家具a>
<a href="#">餐厅成套家具a>
<a href="#">卧室成套家具a>
<a href="#">儿童成套家具a>
<a href="#">书房家具a>
dd>
<dt>家纺:dt>
<dd>
<a href="#">床品套件a>
<a href="#">被子a>
<a href="#">毛巾a>
<a href="#">枕芯a>
<a href="#">蚕丝被a>
<a href="#">毛巾被a>
<a href="#">毯凉席蚊帐床垫a>
<a href="#">床褥坐垫a>
<a href="#">抱枕床单a>
<a href="#">被罩a>
<a href="#">床笠地毯a>
<a href="#">地垫餐桌布艺a>
dd>
<dt>五金建材:dt>
<dd>
<a href="#">插座开关a>
<a href="#">指纹锁a>
<a href="#">电钻a>
<a href="#">工具箱a>
<a href="#">电动晾衣架a>
<a href="#">监控摄像头a>
<a href="#">电线接线板a>
<a href="#">门锁a>
<a href="#">家具a>
<a href="#">五金手动工具a>
<a href="#">电动工具a>
<a href="#">油漆a>
<a href="#">涂料a>
<a href="#">开关插座a>
<a href="#">套装a>
<a href="#">墙纸a>
<a href="#">壁纸a>
<a href="#">瓷砖a>
<a href="#">地板a>
dd>
div>
<div class="import_list b-list06">
<dt>进口食品:dt>
<dd>
<a href="#">进口牛奶a>
<a href="#">进口休闲零食a>
<a href="#">进口饼干糕点a>
<a href="#">进口葡萄酒a>
<a href="#">进口果酒a>
<a href="#">进口膨化食品a>
<a href="#">进口橄榄油a>
dd>
<dt>生鲜食品:dt>
<dd>
<a href="#">羊肉a>
<a href="#">牛肉a>
<a href="#">车厘子a>
<a href="#">虾类a>
<a href="#">牛排a>
<a href="#">蛋a>
<a href="#">鸡肉a>
<a href="#">水果a>
<a href="#">草莓a>
<a href="#">鱼类a>
<a href="#">猪肉a>
<a href="#">鸭肉a>
<a href="#">蔬菜a>
<a href="#">榴莲a>
<a href="#">大闸蟹a>
dd>
<dt>中外名酒:dt>
<dd>
<a href="#">白酒a>
<a href="#">葡萄酒a>
<a href="#">黄酒a>
<a href="#">啤酒a>
<a href="#">洋酒a>
<a href="#">年份老酒a>
<a href="#">起泡酒a>
<a href="#">预调酒a>
<a href="#">保健酒a>
<a href="#">精酿啤酒a>
dd>
<dt>休闲食品:dt>
<dd>
<a href="#">饼干a>
<a href="#">礼盒a>
<a href="#">零食a>
<a href="#">面包a>
<a href="#">巧克力a>
<a href="#">坚果a>
<a href="#">蜜饯a>
<a href="#">糕点a>
<a href="#">肉松a>
<a href="#">肉脯a>
<a href="#">膨化食品a>
<a href="#">糖果a>
<a href="#">薯片a>
dd>
div>
<div class="import_list b-list07">
<dt>面部护肤:dt>
<dd>
<a href="#">护肤套装a>
<a href="#">面膜a>
<a href="#">洗面奶a>
<a href="#">防晒喷雾a>
<a href="#">爽肤水a>
<a href="#">乳液a>
<a href="#">面霜a>
<a href="#">眼霜a>
<a href="#">日霜a>
<a href="#">晚霜a>
<a href="#">精华a>
<a href="#">卸妆a>
<a href="#">T区护理a>
<a href="#">润唇膏a>
<a href="#">海外尖货a>
<a href="#">进口水乳套装a>
<a href="#">进口护肤a>
dd>
<dt>身体护理:dt>
<dd>
<a href="#">沐浴露a>
<a href="#">润体乳a>
<a href="#">护手霜a>
<a href="#">足部护理a>
<a href="#">瘦身a>
<a href="#">纤体a>
<a href="#">洗手液a>
<a href="#">手部护理a>
<a href="#">防蚊露a>
<a href="#">花露水a>
<a href="#">脱毛膏a>
<a href="#">走珠a>
dd>
<dt>彩妆香水:dt>
<dd>
<a href="#">隔离粉底a>
<a href="#">遮瑕口红a>
<a href="#">唇膏唇釉a>
<a href="#">唇彩BBa>
<a href="#">CC霜腮红a>
<a href="#">气垫a>
<a href="#">BB睫毛膏a>
<a href="#">眼影a>
<a href="#">眼线a>
<a href="#">眉笔a>
<a href="#">眉粉a>
<a href="#">散粉a>
<a href="#">美甲a>
<a href="#">指甲油a>
<a href="#">女士香水a>
<a href="#">男士香水a>
<a href="#">彩妆工具a>
<a href="#">彩妆套装a>
dd>
div>
div>
div>
<div class="dao_list">
<a href="#" class="color">首页a>
<a href="#">大聚惠a>
<a href="#">易购商城a>
<a href="#">电器城a>
<a href="#">生活家电a>
<a href="#">时尚服装a>
<a href="#">海淘购a>
<a href="#">特卖a>
<a href="#">易购专区a>
<a href="#">会员a>
div>
nav>
section>
<div class="banner-wrap">
<div class="banner" id="banner">
<a href="#" class="banner-bg1 show"><img src="images/ba1.jpg" />a>
<a href="#" class="banner-bg2"><img src="images/ba2.jpg" />a>
<a href="#" class="banner-bg3"><img src="images/ba1.jpg" />a>
<a href="#" class="banner-bg4"><img src="images/ba2.jpg" />a>
<a href="#"><img src="images/ba1.jpg" class="banner-con" />a>
div>
<ul class="icon" id="icon">
<li class="icon1 fl active"><a href="#">a>li>
<li class="icon2 fl"><a href="#">a>li>
<li class="icon3 fl"><a href="#">a>li>
<li class="icon4 fl"><a href="#">a>li>
ul>
div>
<span class="as blessing_package pick-back-b">
<a href="#" style="color:#000">
<h3 style="float:left" class="pick-back2">
应季商品
h3>
a>
<div class="detailed_navigation">
<ul>
<li class="dog d-1-lt01 yadi" dg-floor="1" dg-ct="lt01">囤年货li>
<li class="dog d-1-lt02" dg-floor="1" dg-ct="lt02">拿货节li>
<li class="dog d-1-lt03" dg-floor="1" dg-ct="lt03">限时li>
<li class="dog d-1-lt04" dg-floor="1" dg-ct="lt04">折扣li>
ul>
div>
span>
<div>
<div class="currency f-1-lt01">
<ul>
<li>
<a href="#">
<img src="images/ad1.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
a>
<div class="light">
<img src="images/saoguang.png">
div>
<span>¥4299.00span>
<a href="#">
<p>海尔冰箱(haier)BCD-642WDVMU1 642升风冷无霜对开门 智能 大容积 p>
a>
<em>
<a href="#">收藏a>
<a href="javascript:void(0)" class="add_scar">加入购物车a>
em>
li>
<li>
<a href="#">
<img src="images/ad2.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
a>
<div class="light">
<img src="images/saoguang.png">
div>
<span>¥2149span>
<a href="#">
<p>【官网价直降1100】Apple iPhone 6s Plus 32G 玫瑰金 移动联通电信4G 手机p>
a>
<em>
<a href="#">收藏a>
<a href="javascript:void(0)" class="add_scar">加入购物车a>
em>
li>
<li>
<a href="#">
<img src="images/ad3.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
a>
<div class="light">
<img src="images/saoguang.png">
div>
<span>¥199span>
<a href="#">
<p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
a>
<em>
<a href="#">收藏a>
<a href="javascript:void(0)" class="add_scar">加入购物车a>
em>
li>
<li>
<a href="#">
<img src="images/ad4.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
a>
<div class="light">
<img src="images/saoguang.png">
div>
<span>¥199span>
<a href="#">
<p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
a>
<em>
<a href="#">收藏a>
<a href="javascript:void(0)" class="add_scar">加入购物车a>
em>
li>
<li>
<a href="#">
<img src="images/ad5.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
a>
<div class="light">
<img src="images/saoguang.png">
div>
<span>¥199span>
<a href="#">
<p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
a>
<em>
<a href="#">收藏a>
<a href="javascript:void(0)" class="add_scar">加入购物车a>
em>
li>
ul>
div>
<div class="currency f-1-lt02" style="display:none">
<ul>
<li>
<a href="#">
<img src="images/add1.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
a>
<div class="light">
<img src="images/saoguang.png">
div>
<span>¥199span>
<a href="#">
<p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
a>
<em>
<a href="#">收藏a>
<a href="javascript:void(0)" class="add_scar">加入购物车a>
em>
li>
<li>
<a href="#">
<img src="images/add1.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
a>
<div class="light">
<img src="images/saoguang.png">
div>
<span>¥199span>
<a href="#">
<p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
a>
<em>
<a href="#">收藏a>
<a href="javascript:void(0)" class="add_scar">加入购物车a>
em>
li>
<li>
<a href="#">
<img src="images/add1.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
a>
<div class="light">
<img src="images/saoguang.png">
div>
<span>¥199span>
<a href="#">
<p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
a>
<em>
<a href="#">收藏a>
<a href="javascript:void(0)" class="add_scar">加入购物车a>
em>
li>
<li>
<a href="#">
<img src="images/add1.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
a>
<div class="light">
<img src="images/saoguang.png">
div>
<span>¥199span>
<a href="#">
<p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
a>
<em>
<a href="#">收藏a>
<a href="javascript:void(0)" class="add_scar">加入购物车a>
em>
li>
<li>
<a href="#">
<img src="images/add1.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
a>
<div class="light">
<img src="images/saoguang.png">
div>
<span>¥199span>
<a href="#">
<p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
a>
<em>
<a href="#">收藏a>
<a href="javascript:void(0)" class="add_scar">加入购物车a>
em>
li>
ul>
div>
<div class="currency f-1-lt03" style="display:none">
<ul>
<li>
<a href="#">
<img src="images/ad2.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
a>
<div class="light">
<img src="images/saoguang.png">
div>
<span>¥199span>
<a href="#">
<p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
a>
<em>
<a href="#">收藏a>
<a href="javascript:void(0)" class="add_scar">加入购物车a>
em>
li>
<li>
<a href="#">
<img src="images/ad2.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
a>
<div class="light">
<img src="images/saoguang.png">
div>
<span>¥199span>
<a href="#">
<p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
a>
<em>
<a href="#">收藏a>
<a href="javascript:void(0)" class="add_scar">加入购物车a>
em>
li>
<li>
<a href="#">
<img src="images/ad2.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
a>
<div class="light">
<img src="images/saoguang.png">
div>
<span>¥199span>
<a href="#">
<p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
a>
<em>
<a href="#">收藏a>
<a href="javascript:void(0)" class="add_scar">加入购物车a>
em>
li>
<li>
<a href="#">
<img src="images/ad2.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
a>
<div class="light">
<img src="images/saoguang.png">
div>
<span>¥199span>
<a href="#">
<p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
a>
<em>
<a href="#">收藏a>
<a href="javascript:void(0)" class="add_scar">加入购物车a>
em>
li>
<li>
<a href="#">
<img src="images/ad2.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
a>
<div class="light">
<img src="images/saoguang.png">
div>
<span>¥199span>
<a href="#">
<p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
a>
<em>
<a href="#">收藏a>
<a href="javascript:void(0)" class="add_scar">加入购物车a>
em>
li>
ul>
div>
<div class="currency f-1-lt04" style="display:none">
<ul>
<li>
<a href="#">
<img src="images/ad9.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
a>
<div class="light">
<img src="images/saoguang.png">
div>
<span>¥199span>
<a href="#">
<p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
a>
<em>
<a href="#">收藏a>
<a href="javascript:void(0)" class="add_scar">加入购物车a>
em>
li>
<li>
<a href="#">
<img src="images/ad9.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
a>
<div class="light">
<img src="images/saoguang.png">
div>
<span>¥199span>
<a href="#">
<p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
a>
<em>
<a href="#">收藏a>
<a href="javascript:void(0)" class="add_scar">加入购物车a>
em>
li>
<li>
<a href="#">
<img src="images/ad9.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
a>
<div class="light">
<img src="images/saoguang.png">
div>
<span>¥199span>
<a href="#">
<p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
a>
<em>
<a href="#">收藏a>
<a href="javascript:void(0)" class="add_scar">加入购物车a>
em>
li>
<li>
<a href="#">
<img src="images/ad9.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
a>
<div class="light">
<img src="images/saoguang.png">
div>
<span>¥199span>
<a href="#">
<p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
a>
<em>
<a href="#">收藏a>
<a href="javascript:void(0)" class="add_scar">加入购物车a>
em>
li>
<li>
<a href="#">
<img src="images/ad9.jpg" style=" margin:0 auto; display:block; width:220px; height:220px">
a>
<div class="light">
<img src="images/saoguang.png">
div>
<span>¥199span>
<a href="#">
<p>Apple iPad MPGW2CH/A 平板电脑 9.7英寸(128G/WLAN)金色 p>
a>
<em>
<a href="#">收藏a>
<a href="javascript:void(0)" class="add_scar">加入购物车a>
em>
li>
ul>
div>
div>
<footer>
<div class="pc-footer-top">
<div class="center">
<ul class="clearfix">
<li>
<span>关于我们span>
<a href="#">关于我们a>
<a href="#">诚聘英才a>
<a href="#">用户服务协议a>
<a href="#">网站服务条款a>
<a href="#">联系我们a>
li>
<li class="lw">
<span>购物指南span>
<a href="#">新手上路a>
<a href="#">订单查询a>
<a href="#">会员介绍a>
<a href="#">网站服务条款a>
<a href="#">帮助中心a>
li>
<li class="lw">
<span>消费者保障span>
<a href="#">人工验货a>
<a href="#">退货退款政策a>
<a href="#">运费补贴卡a>
<a href="#">无忧售后a>
<a href="#">先行赔付a>
li>
<li class="lw">
<span>商务合作span>
<a href="#">人工验货a>
<a href="#">退货退款政策a>
<a href="#">运费补贴卡a>
<a href="#">无忧售后a>
<a href="#">先行赔付a>
li>
<li class="lss">
<span>下载手机版span>
<div class="clearfix lss-pa">
<div class="fl lss-img"><img src="images/code.png" alt="">div>
<div class="fl" style="padding-left:20px; float:left;">
<h4>扫描下载云购APPh4>
<p style="font-size:12px; color:#666;">把优惠握在手心p>
<p style="font-size:12px; color:#666;">把潮流带在身边p>
<p>p>
div>
div>
li>
ul>
div>
<div class="pc-footer-lin">
<div class="center">
<p>友情链接:
<a href="#" target="_blank">网页素材网a>
<a href="#" target="_blank">杂货铺a>
<a href="#">手游交易平台a>
<a href="#">法律咨询a>
<a href="#">深圳地图a>
<a href="#">P2P网贷导航a>
<a href="#">名鞋库a>
<a href="#">叮当音乐网a>
<a href="#">名鞋库a>
<a href="#">114票务网a>
<a href="#">儿歌视频大全a>
p>
<p>
京ICP证1900075号 京ICP备20051110号-5 京公网安备110104734773474323 统一社会信用代码 91113443434371298269B
食品流通许可证SP1101435445645645640352397
p>
<p style="padding-bottom:30px">版物经营许可证 新出发京零字第朝160018号 Copyright©2015-2019 版权所有 ZHE800.COM p>
div>
div>
div>
footer>
body>
html>
js
$(function () { //送至某地 $(".dis_add").mouseenter(function () { $(".hide_add").css({ display: "block" }) }).mouseleave(function () { $(".hide_add").css({ display: "none" }) }) $(".hide_add ul li a").click(function () { $(".hide_add").css({ display: "none" }) }) $(".hide_add ul li").click(function () { $(".hide_add ul li").find("a").removeClass("selected"); $(this).find("a").addClass("selected"); }) $(".hide_add ul li a").click(function () { $(".hide_add").css({ display: "none" }) }) //横向导航部分 $(".dao_list a").click(function () { $(this).addClass("color").siblings().removeClass("color") }); /*滑过侧边栏之后显示和隐藏*/ $(".cates").mouseenter(function () { var cat = $(this).attr("mt-ct"); $(".b-" + cat + "").show().siblings().hide(); }) $(".important").mouseleave(function () { $(".import_list").hide() }) /*侧边栏每块划上的时候添加颜色块*/ $("aside ul li").mouseenter(function () { $(this).addClass("yanses").siblings().removeClass("yanses") }) /*滚动之后固定定位*/ $(window.document).scroll(function () { if ($(window).scrollTop() > 500) { $(".dao_hang").addClass("fixed_dh"); $("aside").css({ display: "none" }); $(".advertisement").css({ display: "none" }); // 侧边栏的出现和消失 $(".important").mouseenter(function () { $("aside").css({ display: "block", background: "#fff" }) }).mouseleave(function () { $("aside").css({ display: "none" }) }) }; if ($(window).scrollTop() < 500) { $(".dao_hang").removeClass("fixed_dh"); $("aside").css({ display: "block" }); $(".advertisement").css({ display: "block" }); // 侧边栏的出现和消失 $(".important").mouseleave(function () { $("aside").css({ display: "block" }) }) }; }); /*控制显示或消失*/ $(".dog").mouseenter(function () { var dogs = $(this).attr("dg-floor") var dog = $(this).attr("dg-ct"); $(".f-" + dogs + "-" + dog + "").show().siblings().hide(); }); /*添加色块*/ $(".detailed_navigation ul li").mouseenter(function () { $(this).addClass("yadi").siblings().removeClass("yadi") }); // 全屏轮播 var aIcon = $('#icon li'); var aBanner = $('#banner a'); aIcon.mouseover(function () { aIcon.removeClass('active'); $(this).addClass('active'); aBanner.removeClass('show'); $('#banner a').eq($(this).index()).addClass('show'); }); var aBtn = $('#btn a'); var aCon = $('#con ul'); aBtn.mouseover(function () { aBtn.removeClass('active'); $(this).addClass('active'); aCon.removeClass('show'); $('#con ul').eq($(this).index()).addClass('show'); }); })
css
* { font-family: 'Microsoft Yahei'; margin: 0; padding: 0; font-size: 12px; color: #666; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } a { text-decoration: none; color: #000; } i, em { font-style: normal; } b, strong { font-weight: normal; } ul, ol, dl, dd, dt { margin: 0; padding: 0; } li { list-style: none; } .fl { float: left; } .fr { float: right; } .clearfix:after { display: block; content: ''; clear: both; } .clearfix { zoom: 1; } th, td { border: 1px solid #fff; padding: 0; } table { border-collapse: collapse; } img, li { vertical-align: top; } a img { border: 0; } button { border:none; }
/* top start */ .top { width: 100%; height: 42px; background: #f9f9f9; display: block; border-bottom: 1px solid #eee; } .seck { width: 1200px; height: 42px; margin: 0 auto } .dis_add { width: 120px; height: 42px; font-size: 12px; color: #666; line-height: 42px; position: relative; float: left } .dis_add span { cursor: pointer } .dis_add img { transition: 0.3s } .dis_add:hover span { color: #FF0036 } .dis_add:hover img { transform: rotate(180deg) } .hide_add { position: absolute; left: 0; top: 42px; width: 285px; height: auto; background: #fff; overflow: hidden; border: 1px solid #f3f3f3; padding-bottom: 6px; display: none; z-index: 4000 } .hide_add ul { width: 285px; height: auto; margin: 0 auto; overflow: hidden } .hide_add ul li { float: left } .hide_add ul li a { display: block; width: 55px; text-align: center; height: 34px; line-height: 34px; font-size: 12px; color: #666; } .hide_add ul li a:hover { background: #f9f9f9; color: #FF0036 } .hide_add ul li a.selected { background: #FF0036; color: #fff } .register_login { height: 42px; float: left; line-height: 42px } .register_login em { font-size: 12px; color: #666 } .register_login a { font-size: 12px; color: #666; padding-left: 6px; padding-right: 6px } .register_login a:hover { color: #FF0036 } .vip_center { height: 42px; float: right; line-height: 42px } .vip_center a { font-size: 12px; color: #666; padding-left: 6px; padding-right: 6px } .vip_center a:hover { color: #FF0036 } /* top end */ /*header start*/ .maxbj .logo-size { width: 160px; } .maxbj .logo-size img { width: 100%; height: auto; display: block; border: none; } header { width: 1200px; margin: 0 auto; overflow: hidden; margin-top: 10px; margin-bottom: 10px; } .logo { display: block; width: 302px; float: left; margin-top: 4px; overflow: hidden; } .logo img { display: block } .search { display: block; width: 730px; height: 34px; background: #f5f5f5; float: left; overflow: hidden; margin-top: 15px; border: 2px solid #FF0036; margin-left: 50px; } .search button { width: 116px; height: 34px; background: #FF0036; color: #fff; cursor: pointer; font-size: 14px } .search button:hover { background: #FF0036 } .sping_car { width: 120px; height: 34px; float: right; margin-top: 18px; line-height: 34px; margin-left: 83px; color: #666; padding-left: 22px; overflow: hidden; border: 1px solid #FF0036; } .sping_car b { display: block; float: left; width: 15px; height: 15px; margin-top: 11px; overflow: hidden; background: url(../images/shopping_cart.png) no-repeat center; } .sping_car em { font-size: 14px; color: #666; line-height: 30px; margin-left: 3px; transition: 0.1; cursor: pointer } .sping_car:hover em { color: #FF0036 } .sping_car:hover b { background: url(../images/shopping_cart1.png) no-repeat center } /* header end */ /* nav start */ .dao_hang { width: 100%; height: 42px; background: #000 } .dao_hang.fixed_dh { position: fixed; top: 0; z-index: 7000; margin-top: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) } .dao_hang nav { width: 1200px; height: 30px; margin: 0 auto; position: relative } .dao_hang nav .important { display: block; width: 210px; height: 42px; background: #FF0036; color: #fff; font-size: 12px; line-height: 42px; cursor: pointer; float: left; position: relative } .dao_hang nav .important img { display: block; float: left; margin-left: 34px; margin-right: 10px; } .dao_list { float: left; height: 30px; margin-left: 15px; perspective: 100px } .dao_list a { display: block; float: left; font-size: 12px; color: #fff; padding-left: 15px; padding-right: 15px; line-height: 42px; height: 42px; position: relative; margin-right: 10px } .dao_list a:hover { background: #FF0036 } .dao_list a.color { background: #FF0036; color: #fff } aside { width: 210px; height: 512px; background: rgba(255, 255, 255, 0.8); position: absolute; left: 0; display: block; z-index: 2000; } .import_list { box-shadow: 0 0 6px rgba(0, 0, 0, 0.3) } aside ul li.yanses { background: rgba(235, 78, 1, 0.2) } aside ul li { overflow: hidden; margin-top: 10px } aside ul li h3 { font-size: 14px; color: #000; text-indent: 10px; font-weight: 100; height: 30px; line-height: 30px } aside ul li p { display: block; width: 200px; height: auto; margin-left: 10px } aside ul li p a { display: block; font-size: 14px; line-height: 20px; float: left; padding-right: 10px; color: #666 } aside ul li p a:hover { color: #FF0036 } .import_list { width: 729px; height: 498px; position: absolute; top: 42px; left: 210px; display: none; background: #FFF; z-index: 3000 } .import_list dt { font-size: 14px; color: #000; line-height: 30px; height: 30px; margin-top: 7px; text-indent: 20px } .import_list dd { margin-left: 20px; border-bottom: 1px dashed #f3f3f3 } .import_list dd a { font-size: 14px; color: #666; padding-left: 6px; padding-right: 6px } .import_list dd a:hover { color: #FF0036 } .advertisement { width: 250px; height: 500px; position: absolute; top: -480px; right: 0; z-index: 3000; background: #fff; } .advertisement h4 { font-size: 14px; color: #333; font-weight: 100; line-height: 50px; border-bottom: 1px dashed #cccccc; width: 230px; margin: 0 auto } .notice_new { width: 230px; height: 220px; margin: 0 auto; } .notice_new a { font-size: 12px; display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #666; line-height: 30px; transition: 0.6s; } .notice_new p { display: block; width: 230px; height: 30px; margin: 0 auto; overflow: hidden; perspective: 1200px } .notice_new p:hover a { color: #FF0036; } .notice_img { width: 230px; height: 219px; margin: 0 auto; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); perspective: 1200px; overflow: hidden; position: relative } .notice_img img { display: block; width: 230px; height: 219px; transition: 1.6s; position: absolute; top: 0; left: 0 } .img2 { transform: rotateY(90deg) } .notice_img:hover img { transform: rotateY(360deg) } /* nav end */ /*banner start*/ .banner-wrap { position: relative; width: 100%; height: 500px; border-bottom: 1px solid #b2b2b2; } .banner { position: absolute; left: 0; top: 0; width: 100%; height: 500px; overflow: hidden; } .banner .banner-bg1, .banner .banner-bg2, .banner .banner-bg3, .banner .banner-bg4 { display: none; width: 100%; height: 500px; } .banner .show { display: block; } .banner .banner-bg1 img { margin-left: -277px; } .banner .banner-bg2 img, .banner .banner-bg3 img, .banner .banner-bg4 img { position: absolute; left: 0; top: 0; margin-left: -344px; z-index: 9; } .banner-wrap .banner-con { position: absolute; left: 50%; top: 0; margin-left: -960px; z-index: 1; } .banner-wrap .icon { position: absolute; left: 50%; bottom: 28px; margin-left: -60px; width: 120px; height: 16px; z-index: 12; } .banner-wrap .icon1, .banner-wrap .icon2, .banner-wrap .icon3, .banner-wrap .icon4 { width: 16px; height: 16px; background: #fff; border-radius: 50%; margin-right: 14px; } .banner-wrap .active { width: 16px; height: 16px; background: #00925F; } /*banner end*/ .blessing_package { width: 1200px; height: 45px; margin: 0 auto; display: block; overflow: hidden; margin-top: 40px; background: #eff0f8; border-top:2px solid #5f6cb7; } .blessing_package h3 { font-size: 18px; line-height: 45px; padding-left:20px; overflow: hidden; width: 190px; height: 45px; background:#5f6cb7; color:#fff; text-align: center; font-weight: 200; float: left; } .blessing_package h3 font { font-size: 14px; color: #999; font-weight: 100; margin-left: 6px } .blessing_package h3 a { float: right; font-size: 14px; color: #fff; display: block; background: #FF0036; padding-left: 12px; padding-right: 12px; font-weight: 100 } .blessing_package h3 a:hover { background: #FF0036 } .three_fb { width: 1200px; margin: 0 auto; overflow: hidden; margin-top: 20px } .three_fb ul { width: 1200px } .three_fb ul li { width: 396px; height: 179px; float: left; border: 2px solid #fff; overflow: hidden; position: relative; padding-bottom: 3px } .three_fb ul li:hover { border: 2px solid #FF0036 } .three_fb ul li img { width: 396px; height: 156px; display: block; margin-bottom: 2px } .three_fb ul li span { padding-left: 10px; padding-right: 10px; background: #FF0036; line-height: 20px; font-size: 14px; color: #fff } .three_fb ul li em { font-size: 12px; color: #ff6182; line-height: 24px; float: right; margin-right: 20px } .three_fb ul li a { float: right; font-size: 14px; color: #000; line-height: 24px; transition: 0.3s; } .three_fb ul li a:hover { background: #FF0036; color: #fff; padding-left: 10px; padding-right: 10px } .fixed_position { width: 1200px; height: 1px; position: fixed; top: 100px; left: 50%; margin-left: -600px } .fixed_position_1 { position: absolute; top: 0; left: -80px; width: 66px; display: none; background: rgba(255,255,255,0.3) } .fixed_position_1 ul li { font-size: 12px; line-height: 34px; border-bottom: 1px solid #c2c2c2; text-align: center; color: #fff; cursor: pointer; background: #666; height: 34px; } .fixed_position_1 ul li:hover { background: #333; color: #fff; } .fixed_position_1 ul li.addcss { color: #fff; background: #FF0036 } .currency { width: 1200px; overflow: hidden; margin: 0 auto; margin-top: 14px; padding-top: 6px; padding-bottom: 6px } .currency ul { width:1300px; } .currency ul li { width: 230px; float: left; margin-right: 10px; height: 300px; box-shadow: 2px 2px 6px rgba(0,0,0,0.2); position: relative; overflow: hidden; background: rgba(255,255,255,0.3); border: 1px solid #ddd; } .currency ul li span { display: block; width: 220px; line-height: 24px; font-size: 20px; color: #FF0036 } .light { display: block; top: 0; left: -230px; transition: 0.8s; position: absolute; z-index: 6000 } .currency i { position: absolute; top: 0; left: 0; background: #000; display: block; width: 50px; height: 50px; z-index: 6000 } .currency ul li p { display: block; width: 220px; line-height: 20px; font-size: 12px; color: #111; margin: 0 auto } .currency ul li p:hover { text-decoration: underline; color:#FF0036; } .currency ul li em { display: block; width: 230px; background: #FF0036; height: 44px; top: -46px; left: 0; position: absolute; overflow: hidden; transition: 0.3s; z-index: 999999; } .currency ul li:hover em { top: 0 } .currency ul li em a { display: block; padding-left: 20px; padding-right: 20px; line-height: 30px; float: left; color: #fff; height: 30px; margin-top: 5px; border: 1px solid #fff; margin-left: 11px; transition: 0.3s; font-size:12px; width: 56px; text-align: center; } .currency ul li em a:hover { background: #333 } .detailed_navigation { float: right; height:45px; line-height:45px; } .detailed_navigation ul li.yadi { color: #FFF; background:#FF0036; } .detailed_navigation ul li:hover{ background:#FF0036; color:#fff; } .detailed_navigation ul li { float: left; font-size: 14px; padding-left: 20px; padding-right: 20px; cursor: pointer; height:45px; line-height:45px; color:#666; } /* footer start */ .pc-footer-top { border-top: 2px solid #ee4644; margin-top: 15px; } .pc-footer-top ul li { border-right: 1px solid #ddd; float: left; height: 200px; line-height: 24px; padding: 28px 0 0 20px; text-align: left; width: 170px; } .pc-footer-top ul li span { color: #666; display: block; font: 16px/30px "microsoft yahei"; } .pc-footer-top ul li a { color: #999; display: block; height: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 85px; font-size: 12px; } .pc-footer-top ul .lw { padding-left: 40px; width: 175px; } .pc-footer-lin { border-top: 1px solid #ddd; } .pc-footer-lin p { text-align: center; padding-top: 20px; font-size: 12px; } .pc-footer-top ul .lss { padding-left: 40px; width: 300px; border-right: 0; } .pc-footer-lin p a { color: #666; margin-right: 5px; } .pc-footer-lin p a:hover { color: #FF0036; } .lss-img { width: 130px; height: 130px; } .lss-img img { width: 100%; height: 100%; display: block; border: none; } .center { width: 1200px; margin: 0 auto; position: relative; } .lss-img { width: 130px; height: 130px; float: left; } .lss-img img { width: 100%; height: 100%; display: block; border: none; } .lss-pa { background: #fff; padding: 10px; }