485 lines
21 KiB
HTML
485 lines
21 KiB
HTML
<!DOCTYPE html>
|
||
<html lang = "zh_CN">
|
||
<head>
|
||
<meta http-equiv = "Content-Type" content = "text/html;charset=utf-8">
|
||
<title>购物网</title>
|
||
<!--引入重置样式-->
|
||
<link rel="stylesheet" href="./css/reset.css">
|
||
<!--引入样式-->
|
||
<link rel="stylesheet" href="./css/index.css">
|
||
</head>
|
||
<body>
|
||
<!--顶部导航条-->
|
||
<div class="top_bar">
|
||
<!--版心-->
|
||
<div class="container float_clear">
|
||
<!--左侧导航区-->
|
||
<div class="nav_left float_left">
|
||
<span class="welcome">欢迎您</span>
|
||
<a href="#" class="login">请登录</a>
|
||
<a href="#" class="register">免费注册</a>
|
||
</div>
|
||
<!--右侧导航区-->
|
||
<div class="nav_right float_right">
|
||
<ul class="list">
|
||
<li><a href="#">我的订单</a></li>
|
||
<li><a href="#">我的购物车</a></li>
|
||
<li><a href="#">我的信息</a></li>
|
||
<li><a href="#">会员中心</a></li>
|
||
<li><a href="#">企业采购</a></li>
|
||
<li><a href="#">关注购物网</a></li>
|
||
<li><a href="#">合作招商</a></li>
|
||
<li><a href="#">商家后台</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--头部区域-->
|
||
<div class="header">
|
||
<!--版心-->
|
||
<div class="container float_clear">
|
||
<!--图标区-->
|
||
<div class="header_logo float_left">
|
||
<img src="./images/logo.png" alt="LOGO">
|
||
</div>
|
||
<!--搜索区-->
|
||
<div class="header_search float_right">
|
||
<form action="#">
|
||
<label>
|
||
<input type="text">
|
||
</label>
|
||
<button></button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--主导航-->
|
||
<div class="main_nav">
|
||
<!--版心-->
|
||
<div class="container float_clear">
|
||
<div class="all-type float_left">全部商品分类</div>
|
||
<ul class="main_nav_list float_left">
|
||
<li><a href="#" >超市</a></li>
|
||
<li><a href="#" >优惠卷</a></li>
|
||
<li><a href="#" >买啥</a></li>
|
||
<li><a href="#" >家电</a></li>
|
||
<li><a href="#" >生鲜</a></li>
|
||
<li><a href="#" >PLUS会员</a></li>
|
||
<li><a href="#" >进口好物</a></li>
|
||
<li><a href="#" >品牌闪购</a></li>
|
||
<li><a href="#" >拍卖</a></li>
|
||
<li><a href="#" >五金商店</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!--主要内容区-->
|
||
<div class="main_content">
|
||
<div class="container float_clear">
|
||
<ul class="slide-nav float_left">
|
||
<li>
|
||
<!--一级菜单-->
|
||
<a href="#">手机</a>
|
||
<a href="#">运营商</a>
|
||
<a href="#">数码</a>
|
||
</li>
|
||
<li>
|
||
<a href="#">电脑</a>
|
||
<a href="#">办公</a>
|
||
</li>
|
||
<li>
|
||
<a href="#">家具</a>
|
||
<a href="#">家居</a>
|
||
<a href="#">家装</a>
|
||
<a href="#">厨具</a>
|
||
</li>
|
||
<li>
|
||
<a href="#">男装</a>
|
||
<a href="#">女装</a>
|
||
<a href="#">童装</a>
|
||
<a href="#">内衣</a>
|
||
</li>
|
||
<li>
|
||
<a href="#">美妆</a>
|
||
<a href="#">个护清洁</a>
|
||
<a href="#">宠物</a>
|
||
</li>
|
||
<li>
|
||
<a href="#">女鞋</a>
|
||
<a href="#">箱包</a>
|
||
<a href="#">钟表</a>
|
||
<a href="#">珠宝</a>
|
||
</li>
|
||
<li>
|
||
<a href="#">男鞋</a>
|
||
<a href="#">运动</a>
|
||
<a href="#">户外</a>
|
||
</li>
|
||
<li>
|
||
<a href="#">房产</a>
|
||
<a href="#">汽车</a>
|
||
<a href="#">汽车用品</a>
|
||
</li>
|
||
<li>
|
||
<a href="#">母婴</a>
|
||
<a href="#">玩具乐器</a>
|
||
</li>
|
||
<li>
|
||
<a href="#">食品</a>
|
||
<a href="#">酒类</a>
|
||
<a href="#">生鲜</a>
|
||
<a href="#">特产</a>
|
||
</li>
|
||
<li>
|
||
<a href="#">艺术</a>
|
||
<a href="#">礼品鲜花</a>
|
||
<a href="#">农资绿植</a>
|
||
</li>
|
||
<li>
|
||
<a href="#">医药保健</a>
|
||
<a href="#">计生情趣</a>
|
||
</li>
|
||
<li>
|
||
<!--一级菜单-->
|
||
<a href="#">图书</a>
|
||
<a href="#">文娱</a>
|
||
<a href="#">教育</a>
|
||
<a href="#">电子书</a>
|
||
<!--二级菜单-->
|
||
<div class="second_menu">
|
||
<dl class="float_clear">
|
||
<dt><a href="#">电子书刊</a></dt>
|
||
<dd><a href="#">电子书</a></dd>
|
||
<dd><a href="#">网络原创</a></dd>
|
||
<dd><a href="#">数字杂志</a></dd>
|
||
<dd><a href="#">多媒体图书</a></dd>
|
||
</dl>
|
||
<dl class="float_clear">
|
||
<dt><a href="#">音像</a></dt>
|
||
<dd><a href="#">音乐</a></dd>
|
||
<dd><a href="#">影视</a></dd>
|
||
<dd><a href="#">教育音像</a></dd>
|
||
</dl>
|
||
<dl class="float_clear">
|
||
<dt><a href="#">英语原版</a></dt>
|
||
<dd><a href="#">少儿</a></dd>
|
||
<dd><a href="#">商务投资</a></dd>
|
||
<dd><a href="#">英语学习考试</a></dd>
|
||
<dd><a href="#">文学</a></dd>
|
||
<dd><a href="#">传记</a></dd>
|
||
<dd><a href="#">励志</a></dd>
|
||
</dl>
|
||
<dl class="float_clear">
|
||
<dt><a href="#">文艺</a></dt>
|
||
<dd><a href="#">小说</a></dd>
|
||
<dd><a href="#">文学</a></dd>
|
||
<dd><a href="#">青春文学</a></dd>
|
||
<dd><a href="#">传记</a></dd>
|
||
<dd><a href="#">艺术</a></dd>
|
||
</dl>
|
||
<dl class="float_clear">
|
||
<dt><a href="#">少儿</a></dt>
|
||
<dd><a href="#">胎教</a></dd>
|
||
<dd><a href="#">0-2岁</a></dd>
|
||
<dd><a href="#">3-6岁</a></dd>
|
||
<dd><a href="#">7-10岁</a></dd>
|
||
<dd><a href="#">11-14岁</a></dd>
|
||
</dl>
|
||
<dl class="float_clear">
|
||
<dt><a href="#">人文社科</a></dt>
|
||
<dd><a href="#">历史</a></dd>
|
||
<dd><a href="#">哲学</a></dd>
|
||
<dd><a href="#">法律</a></dd>
|
||
<dd><a href="#">人文社科</a></dd>
|
||
<dd><a href="#">心理学</a></dd>
|
||
<dd><a href="#">文化</a></dd>
|
||
<dd><a href="#">社会科学</a></dd>
|
||
</dl>
|
||
<dl class="float_clear">
|
||
<dt><a href="#">经管励志</a></dt>
|
||
<dd><a href="#">金融与投资</a></dd>
|
||
<dd><a href="#">管理</a></dd>
|
||
<dd><a href="#">励志与成功</a></dd>
|
||
<dd><a href="#">经济</a></dd>
|
||
</dl>
|
||
<dl class="float_clear">
|
||
<dt><a href="#">生活</a></dt>
|
||
<dd><a href="#">健康与保健</a></dd>
|
||
<dd><a href="#">家庭与育儿</a></dd>
|
||
<dd><a href="#">旅游</a></dd>
|
||
<dd><a href="#">烹饪美食</a></dd>
|
||
</dl>
|
||
<dl class="float_clear">
|
||
<dt><a href="#">科技</a></dt>
|
||
<dd><a href="#">工业技术</a></dd>
|
||
<dd><a href="#">科普读物</a></dd>
|
||
<dd><a href="#">建筑</a></dd>
|
||
<dd><a href="#">医学</a></dd>
|
||
<dd><a href="#">科学与自然</a></dd>
|
||
<dd><a href="#">计算机互联网</a></dd>
|
||
<dd><a href="#">电子通信</a></dd>
|
||
</dl>
|
||
<dl class="float_clear">
|
||
<dt><a href="#">教育</a></dt>
|
||
<dd><a href="#">中小学教辅</a></dd>
|
||
<dd><a href="#">教育与考试</a></dd>
|
||
<dd><a href="#">外语学习</a></dd>
|
||
<dd><a href="#">大中专教材</a></dd>
|
||
<dd><a href="#">科学与自然</a></dd>
|
||
<dd><a href="#">字典词典</a></dd>
|
||
</dl>
|
||
<dl class="float_clear">
|
||
<dt><a href="#">艺术与收藏</a></dt>
|
||
<dd><a href="#">文化与艺术</a></dd>
|
||
<dd><a href="#">经济管理</a></dd>
|
||
</dl>
|
||
<dl class="float_clear">
|
||
<dt><a href="#">工具书</a></dt>
|
||
<dd><a href="#">杂志期刊</a></dd>
|
||
<dd><a href="#">套装书</a></dd>
|
||
<dd><a href="#">打折图书</a></dd>
|
||
</dl>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<a href="#">机票</a>
|
||
<a href="#">酒店</a>
|
||
<a href="#">旅游</a>
|
||
<a href="#">生活</a>
|
||
</li>
|
||
<li>
|
||
<a href="#">众筹</a>
|
||
<a href="#">白条</a>
|
||
<a href="#">保险</a>
|
||
<a href="#">企业金融</a>
|
||
</li>
|
||
<li>
|
||
<a href="#">安装</a>
|
||
<a href="#">维修</a>
|
||
<a href="#">清洗</a>
|
||
<a href="#">二手</a>
|
||
</li>
|
||
</ul>
|
||
<div class="banner float_left">
|
||
<img src="./images/banner主图.png" alt="广告轮播图">
|
||
</div>
|
||
<div class="slide-other float_left">
|
||
<div class="slide-other_massage">
|
||
<div class="massage_title float_clear">
|
||
<span class="float_left">快报</span>
|
||
<a href="#" class="float_right">更多 ></a>
|
||
</div>
|
||
<div class="massage_list">
|
||
<dl>
|
||
<dd><a href="">毛衣+直筒裤，才是YYDS。</a></dd>
|
||
<dd><a href="">超大容量的满足感来啥子于</a></dd>
|
||
<dd><a href="">每日一件，衣柜满到塞不下。</a></dd>
|
||
<dd><a href="">媳妇儿再买，我就疯给他看。</a></dd>
|
||
</dl>
|
||
</div>
|
||
</div>
|
||
<div class="slide-other-nav">
|
||
<dl class="float_clear">
|
||
<dd>
|
||
<a href="#">
|
||
<div class="picture"></div>
|
||
<span>话费</span>
|
||
</a>
|
||
</dd>
|
||
<dd>
|
||
<a href="#">
|
||
<div class="picture"></div>
|
||
<span>火车票</span>
|
||
</a>
|
||
</dd>
|
||
<dd>
|
||
<a href="#">
|
||
<div class="picture"></div>
|
||
<span>加油卡</span>
|
||
</a>
|
||
</dd>
|
||
<dd>
|
||
<a href="#">
|
||
<div class="picture"></div>
|
||
<span>白条</span>
|
||
</a>
|
||
</dd>
|
||
</dl>
|
||
<dl class="float_clear">
|
||
<dd>
|
||
<a href="#">
|
||
<div class="picture"></div>
|
||
<span>电影票</span>
|
||
</a>
|
||
</dd>
|
||
<dd>
|
||
<a href="#">
|
||
<div class="picture"></div>
|
||
<span>酒店</span>
|
||
</a>
|
||
</dd>
|
||
<dd>
|
||
<a href="#">
|
||
<div class="picture"></div>
|
||
<span>理财</span>
|
||
</a>
|
||
</dd>
|
||
<dd>
|
||
<a href="#">
|
||
<div class="picture"></div>
|
||
<span>机票</span>
|
||
</a>
|
||
</dd>
|
||
</dl>
|
||
<dl class="float_clear">
|
||
<dd>
|
||
<a href="#">
|
||
<div class="picture"></div>
|
||
<span>礼品卡</span>
|
||
</a>
|
||
</dd>
|
||
<dd>
|
||
<a href="#">
|
||
<div class="picture"></div>
|
||
<span>彩票</span>
|
||
</a>
|
||
</dd>
|
||
<dd>
|
||
<a href="#">
|
||
<div class="picture"></div>
|
||
<span>游戏</span>
|
||
</a>
|
||
</dd>
|
||
<dd>
|
||
<a href="#">
|
||
<div class="picture"></div>
|
||
<span>众筹</span>
|
||
</a>
|
||
</dd>
|
||
</dl>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--秒杀-->
|
||
<div class="seckill">
|
||
<div class="container float_clear">
|
||
<a href="#"><img src="./images/seckill.png" alt="秒杀"></a>
|
||
<a href="#"><img src="./images/banner1.png" alt="秒杀图片1"></a>
|
||
<a href="#"><img src="./images/banner2.png" alt="秒杀图片2"></a>
|
||
<a href="#"><img src="./images/banner3.png" alt="秒杀图片3"></a>
|
||
<a href="#"><img src="./images/baner4.png" alt="秒杀图片3"></a>
|
||
</div>
|
||
</div>
|
||
<!--楼层-->
|
||
<div class="floor">
|
||
<div class="container">
|
||
<div class="floor_nav">
|
||
<span class="float_left">家用电器</span>
|
||
<dl class="float_right float_clear">
|
||
<dt><a href="#">热门</a></dt>
|
||
<dd><a href="#">大家电</a></dd>
|
||
<dd><a href="#">生活电器</a></dd>
|
||
<dd><a href="#">厨房家电</a></dd>
|
||
<dd><a href="#">应季家电</a></dd>
|
||
<dd><a href="#">空气/净水</a></dd>
|
||
<dd><a href="#">高端家电</a></dd>
|
||
</dl>
|
||
</div>
|
||
<div class="floor_info">
|
||
<div class="item1">
|
||
<dl class="float_clear">
|
||
<dt><a href="#">节能补贴</a></dt>
|
||
<dt><a href="#">4K电视</a></dt>
|
||
<dt><a href="#">空气净化器</a></dt>
|
||
<dt><a href="#">IH电饭煲</a></dt>
|
||
<dt><a href="#">滚筒洗衣机</a></dt>
|
||
<dt><a href="#">电热水器</a></dt>
|
||
</dl>
|
||
<img src="./images/编组.png" alt="编组">
|
||
</div>
|
||
<div class="item2">
|
||
<img src="./images/appliance_banner07.png" alt="广告图1">
|
||
</div>
|
||
<div class="item3">
|
||
<img src="./images/微波炉.png" alt="微波炉">
|
||
<img src="./images/空气炸锅.png" alt="空气炸锅">
|
||
</div>
|
||
<div class="item4">
|
||
<img src="./images/冰箱.png" alt="冰箱">
|
||
</div>
|
||
<div class="item3">
|
||
<img src="./images/电饭煲.png" alt="电饭煲">
|
||
<img src="./images/电饭煲2.png" alt="电饭煲2">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--页脚-->
|
||
<div class="footer">
|
||
<div class="container">
|
||
<div class="top_link float_clear">
|
||
<div>
|
||
<a href="#">购物指南</a>
|
||
<a href="#">购物流程</a>
|
||
<a href="#">会员介绍</a>
|
||
<a href="#">生活旅行</a>
|
||
<a href="#">常见问题</a>
|
||
<a href="#">大家电</a>
|
||
<a href="#">联系客服</a>
|
||
</div>
|
||
<div>
|
||
<a href="#">配送方式</a>
|
||
<a href="#">上门自提</a>
|
||
<a href="#">211限时达</a>
|
||
<a href="#">配送服务查询</a>
|
||
<a href="#">配送费收取标准</a>
|
||
</div>
|
||
<div>
|
||
<a href="#">支付方式</a>
|
||
<a href="#">货到付款</a>
|
||
<a href="#">在线支付</a>
|
||
<a href="#">分期付款</a>
|
||
<a href="#">公司转账</a>
|
||
</div>
|
||
<div>
|
||
<a href="#">售后服务</a>
|
||
<a href="#">售后政策</a>
|
||
<a href="#">价格保护</a>
|
||
<a href="#">退款说明</a>
|
||
<a href="#">返修/退换货</a>
|
||
<a href="#">取消订单</a>
|
||
</div>
|
||
<div>
|
||
<a href="#">特色服务</a>
|
||
<a href="#">夺宝岛</a>
|
||
<a href="#">DIY装机</a>
|
||
<a href="#">延保服务</a>
|
||
<a href="#">京东E卡</a>
|
||
<a href="#">京东通信</a>
|
||
<a href="#">京鱼座智能</a>
|
||
</div>
|
||
<div>
|
||
<a href="#">自营覆盖区县<br>京尚品汇已向全国2661个区县提供自营配送服务，支持货到付款、POS 机刷卡和售后上门服务。<br>查看详情</a>
|
||
</div>
|
||
</div>
|
||
<div class="bottom_link">
|
||
<dl class="float_clear">
|
||
<dd><a href="#">关于我们</a></dd>
|
||
<dd><a href="#">联系我们</a></dd>
|
||
<dd><a href="#">联系客服</a></dd>
|
||
<dd><a href="#">合作招商</a></dd>
|
||
<dd><a href="#">商家帮助</a></dd>
|
||
<dd><a href="#">营销中心</a></dd>
|
||
<dd><a href="#">手机商城</a></dd>
|
||
<dd><a href="#">友情链接</a></dd>
|
||
<dd><a href="#">销售联盟</a></dd>
|
||
<dd><a href="#">隐私政策</a></dd>
|
||
</dl>
|
||
<a href="#">京ICP备12345678901</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html> |