品优购商城在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 网站标题 -->
<title>品优购——综合网购首选-正品低价,品质保障,配送及时,轻松购物!</title>
<!-- 网站说明 -->
<meta name="description"
content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!"/>
<!-- 关键字 -->
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
<link rel="shortcut icon" href=" favicon.ico" />
<link rel="stylesheet" href="../shopping/css/base.css">
<link rel="stylesheet" href="../shopping/css/common.css">
<link rel="stylesheet" href="../shopping/css/index.css">
</head>
<body>
<!-- 快捷导航栏 可以用section标签-->
<div class="shortcut">
<div class="w">
<div class="fl">
<ul>
<!-- 空格符号 -->
<li>品优购欢迎您! </li>
<li>
<a href="">请登录</a>
<a href="./register.html" class="style_red">免费注册</a>
</li>
</ul>
</div>
<div class="fr">
<ul>
<li> 我的订单</li>
<li></li>
<!-- arrow箭头 -->
<li class="arrow-icon">我的品优购</li>
<li></li>
<li> 品优购会员 </li>
<li></li>
<li>企业采购</li>
<li></li>
<li class="arrow-icon">关注品优购</li>
<li></li>
<li class="arrow-icon">客户服务</li>
<li></li>
<li class="arrow-icon">网站导航</li>
</ul>
</div>
</div>
</div>
<!-- 头部模块制作 -->
<header class="header w">
<div class="logo">
<h1>
<a href="index.html" title="品优购商城">品优购商城
</a>
</h1>
</div>
<!-- search模块制作 -->
<div class="search">
<input type="search" name="" id="" placeholder="语言开发">
<button>搜索</button>
</div>
<!-- hotwords模块制作 -->
<div class="hotwords">
<a href="#" class="style_red">优惠购首发</a>
<a href="#">亿元优惠 </a>
<a href="#"> 9.9元团购</a>
<a href="#">美满99减30 </a>
<a href="#">办公用品 </a>
<a href="#"> 电脑</a>
<a href="#">通信</a>
</div>
<!-- 购物车模块 -->
<div class="shopcar">
<img src="../shopping/images/images/images/01-电商-主页-shop_03.jpg" alt="">
我的购物车
<i class="count">8</i>
</div>
</header>
<!-- nav模块制作 -->
<div class="nav">
<div class="w">
<div class="dropdown">
<div class="dt">全部商品分类</div>
<div class="dd"><ul>
<li>
<a href=""> 家用电器</a></li>
<li><a href="./list.html">手机、数码、通信</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>
<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 class="navitems">
<ul>
<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="w">
<div class="main">
<div class="focus">
<ul>
<li><img src="../shopping/upload/图层 179.png" alt=""></li>
</ul>
</div>
<div class="newsflash">
<div class="news">
<div class="news-hd">
<h4>品优购快报</h4>
<a href="" >更多</a>
</div>
<div class="news-bd">
<ul>
<li><a href="#"><strong>[重磅]</strong>他来了他来了,他带着光走来了,他带着云彩走来了</a></li>
<li><a href="#"><strong>[特惠]</strong>品优购占家电网购流程份额</a></li>
<li><a href="#"><strong>[公告]</strong>上品优生鲜 </a></li>
<li><a href="#"><strong>[公告]</strong>上品优生鲜 </a></li>
<li><a href="#"><strong>[公告]</strong>上品优生鲜,新鲜又好吃,新鲜又好吃 </a></li>
</ul>
</div>
</div>
<div class="lifeserves">
<ul>
<li>
<p></p>
<a href="#">话费</a>
</li>
<li>
<p class="abc"></p>
<a href="#">话费</a>
<div class="c"></div>
</li>
<li>
<p></p>
<a href="#">话费</a>
</li>
<li>
<p></p>
<a href="#">话费</a>
</li>
<li>
<p></p>
<a href="#">话费</a>
</li>
<li>
<p></p>
<a href="#">话费</a>
</li>
<li>
<p></p>
<a href="#">话费</a>
</li>
<li>
<p></p>
<a href="#">话费</a>
</li>
<li>
<p></p>
<a href="#">话费</a>
</li>
<li>
<p></p>
<a href="#">话费</a>
</li>
<li>
<p></p>
<a href="#">话费</a>
</li>
</ul>
</div>
<div class="bargin"><img src="../shopping/upload/images/bargin_03.jpg" alt=""></div>
</div>
</div>
</div>
<!-- 推荐模块 -->
<div class="w recom">
<div class="recom-hd fl">
</div>
<div class="recom-bd ">
<ul >
<li><a href="#">时尚穿搭</a></li>
<li><a href="#" >低至3.6折</a></li>
<li><a href="#">暑假出游季</a></li>
<li><a href="#">闪购</a></li>
</ul>
<div class="tupian"></div>
</div>
<div class="recom-bd ">
<ul >
<li><a href="#">时尚穿搭</a></li>
<li><a href="#" >低至3.6折</a></li>
<li><a href="#">暑假出游季</a></li>
<li><a href="#">闪购</a></li>
</ul>
<div class="tupian"></div>
</div>
<div class="recom-bd ">
<ul >
<li><a href="#">时尚穿搭</a></li>
<li><a href="#" >低至3.6折</a></li>
<li><a href="#">暑假出游季</a></li>
<li><a href="#">闪购</a></li>
</ul>
<div class="tupian"></div>
</div>
<div class="recom-bd ">
<ul >
<li><a href="#">时尚穿搭</a></li>
<li><a href="#" >低至3.6折</a></li>
<li><a href="#">暑假出游季</a></li>
<li><a href="#">闪购</a></li>
</ul>
<div class="tupian"></div>
</div>
</div>
<!-- 楼层模块制作 -->
<div class="floor">
<!-- 一楼家用电器楼层 -->
<div class="w jiadian">
<div class="box-hd">
<h4>家用电器</h4>
<div class="tab-list">
<ul>
<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>
<li><a href="#">空气/净水</a></li>
<li><a href="#"class="style_red">高端电器</a></li>
</ul>
</div>
</div>
<div class="box-bd">
<div class="tab-content">
<div class="tab-item">
<div class="col_210">
<ul>
<li><a href="#">节能补贴</a></li>
<li><a href="#">4k电视</a></li>
<li><a href="#">空气净化器</a></li>
<li><a href="#">电饭煲</a></li>
<li><a href="#">滚筒洗衣机</a></li>
<li><a href="#">电热水器</a></li>
</ul>
<a href="" class="border-bottom">
<img src="../shopping/images/电视机-gai_03.jpg" alt="">
</a>
</div>
<div class="col_329">
<a href="">
<img src="../shopping/images/水壶_03.jpg" alt="">
</a>
</div>
<div class=" col_221 ">
<a href="">
<img class="border-bottom" src="../shopping/images/345_03.jpg" alt="">
<img src="../shopping/images/floor-2_07.jpg" alt="">
</a>
</div>
<div class="col_221">
<a href="" >
<img class="bcd"src="../shopping/images/123_03.jpg" alt="">
</a>
</div>
<div class="col_219">
<a href="" >
<img class="border-bottom" src="../shopping/images/floor-5_08.jpg" alt="">
<img src="../shopping/images/floor-6_19.jpg" alt="">
</a>
</div>
</div>
</div>
</div>
</div>
<!-- 二楼手机楼层 -->
<div class="w shouji">
<div class="box-hd">
<h4>手机通讯</h4>
<div class="tab-list">
<ul>
<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>
<li><a href="#">空气/净水</a></li>
<li><a href="#"class="style_red">高端电器</a></li>
</ul>
</div>
</div>
<div class="box-bd">
<div class="tab-content">
<div class="tab-item">
<div class="col_210">
<ul>
<li><a href="#">节能补贴</a></li>
<li><a href="#">4k电视</a></li>
<li><a href="#">空气净化器</a></li>
<li><a href="#">电饭煲</a></li>
<li><a href="#">滚筒洗衣机</a></li>
<li><a href="#">电热水器</a></li>
</ul>
<a href="" class="border-bottom">
<img src="../shopping/images/电视机-gai_03.jpg" alt="">
</a>
</div>
<div class="col_329">
<a href="">
<img src="../shopping/images/水壶_03.jpg" alt="">
</a>
</div>
<div class=" col_221 ">
<a href="">
<img class="border-bottom" src="../shopping/images/345_03.jpg" alt="">
<img src="../shopping/images/floor-2_07.jpg" alt="">
</a>
</div>
<div class="col_221">
<a href="" >
<img class="bcd"src="../shopping/images/123_03.jpg" alt="">
</a>
</div>
<div class="col_219">
<a href="" >
<img class="border-bottom" src="../shopping/images/floor-5_08.jpg" alt="">
<img src="../shopping/images/floor-6_19.jpg" alt="">
</a>
</div>
</div>
</div>
</div>
</div>
<!-- 三楼电脑办公-->
<div class="w diannao">
<div class="box-hd">
<h4>电脑办公</h4>
<div class="tab-list">
<ul>
<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>
<li><a href="#">空气/净水</a></li>
<li><a href="#"class="style_red">高端电器</a></li>
</ul>
</div>
</div>
<div class="box-bd">
<div class="tab-content">
<div class="tab-item">
<div class="col_210">
<ul>
<li><a href="#">节能补贴</a></li>
<li><a href="#">4k电视</a></li>
<li><a href="#">空气净化器</a></li>
<li><a href="#">电饭煲</a></li>
<li><a href="#">滚筒洗衣机</a></li>
<li><a href="#">电热水器</a></li>
</ul>
<a href="" class="border-bottom">
<img src="../shopping/images/电视机-gai_03.jpg" alt="">
</a>
</div>
<div class="col_329">
<a href="">
<img src="../shopping/images/水壶_03.jpg" alt="">
</a>
</div>
<div class=" col_221 ">
<a href="">
<img class="border-bottom" src="../shopping/images/345_03.jpg" alt="">
<img src="../shopping/images/floor-2_07.jpg" alt="">
</a>
</div>
<div class="col_221">
<a href="" >
<img class="bcd"src="../shopping/images/123_03.jpg" alt="">
</a>
</div>
<div class="col_219">
<a href="" >
<img class="border-bottom" src="../shopping/images/floor-5_08.jpg" alt="">
<img src="../shopping/images/floor-6_19.jpg" alt="">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 底部制作 -->
<footer class="footer">
<div class="w">
<!-- mod_service服务模块 -->
<div class="mod_service">
<ul>
<li>
<h5></h5>
<div class="service_txt">
<h4>正品保障</h4>
<p>正品保障,提供发票</p>
</div>
</li>
<li>
<h5></h5>
<div class="service_txt">
<h4>正品保障</h4>
<p>正品保障,提供发票</p>
</div>
</li>
<li>
<h5></h5>
<div class="service_txt">
<h4>正品保障</h4>
<p>正品保障,提供发票</p>
</div>
</li>
<li>
<h5></h5>
<div class="service_txt">
<h4>正品保障</h4>
<p>正品保障,提供发票</p>
</div>
</li>
</ul>
</div>
<div class="mod_help">
<dl>
<dt>购物指南</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>
<dt>购物指南</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>
<dt>购物指南</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>
<dt>购物指南</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>
<dt>购物指南</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>
<dt>帮助中心</dt>
<img src="../shopping/images/images/01_03.jpg" alt="">
<dd><a href="#">品优购客户端</a></dd>
</div>
<!-- 版权模块 -->
<div class="mod_copyright ">
<ul>
<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>
<li><a href="#"></a>品优购专区</li>
<li><a href="#"></a>品优购社区</li>
<li><a href="#"></a>English Site</li>
<li><a href="#"></a>Cnotact U</li>
<li><a href=""> 地址:北京市昌平区建材城西路金燕龙办公楼一层 邮编:100096 电话:400-618-4000 传真:010-82935100 邮箱: zhanghj+itcast.cn</a></li>
<li><a href=""> 京ICP备08001421号京公网安备110108007702</a></li>
</ul>
</div>
</footer>
</body>
</html>