<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="品优购-专业的综合网上购物商城销售家电、数码通讯、电脑、
家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物
体验!" />
<meta name="keywords" content="网上购物，网上商城手机,笔记本,电脑,MP3,CD,VCD,DV，相机,数码配
件,手表存储卡,品优购" />
<title>品优购-综合网购首选-正品低价、品质保障、配送快捷！</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/list.css">
</head>
<body>
<section class="shortcut">
<!-- 版心模块 -->
<div class="edition_heart1">
<div class="fl">
<ul>
<li>品优购欢迎你！ </li>
<li><a href="#">请登入 </a><a href="#" class="redword">免费注册</a></li>
</ul>
</div>
<div class="fr">
<ul>
<li>我的订单</li>
<li></li>
<li class="list-icon">我的品优购</li>
<li></li>
<li>品优购会员</li>
<li></li>
<li>企业采购</li>
<li></li>
<li class="list-icon">关注品优购</li>
<li></li>
<li class="list-icon">客户服务</li>
<li></li>
<li class="list-icon">网站导航</li>
</ul>
</div>
</div>
</section>
<header class="header edition_heart1">
<!-- logo部分 开始 -->
<div class="twologo">
<div class="logo">
<h1>
<a href="index.html" title="好物就找品优购，质量有保证！">品优购-综合网购首选-正品低价、品质保障、配送快捷！</a>
</h1>
</div>
<span class="sk-png"> <img src="images/sk.png" alt="" ></span>
</div>
<!-- logo部分 结束 -->
<!-- 搜索框开始 -->
<div class="search">
<input type="search" name="" id="" value="语音开发">
<button>搜索</button>
</div>
<!-- 搜索框结束 -->
<!-- 搜索框底部热点词区域 -->
<div class="hotword">
<a href="#" class="redword">优惠购首发</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">
<!-- 利用伪类元素制作了一系列样式在css结构中 -->
我的购物车
<i>
<!-- 右上角图标 -->
8
</i>
</div>
<!-- 购物车模块结束 -->
<!-- 中间通栏导航区 开始 -->
<!-- 中间通栏导航区 结束 -->
</header>
<!-- 内页主题部分 -->
<div class="main">
<div class="edition_heart1">
<!-- 顶部导航选项区 -->
<nav class="list-topnav">
<ul>
<li class="special-1"><a href="">品优秒杀</a></li>
<li class="special-1"><a href="">即将售罄</a></li>
<li class="special-1"><a href="">超值低价</a></li>
<li class="special-2"><a href="">女装</a></li>
<li class="special-2"><a href="" class="redword">女鞋</a></li>
<li class="special-2"><a href="">男装</a></li>
<li class="special-2"><a href="">男鞋</a></li>
<li class="special-2"><a href="">食品</a></li>
<li class="special-2"><a href="">母婴童装</a></li>
<li class="special-2"><a href="">智能数码运动户外</a></li>
<li class="special-2 special-3"><a href="">更多分类</a></li>
</ul>
</nav>
<!-- 顶部导航下图 -->
<img src="images/bg_03.png" alt="">
</div>
</div>
<div></div>
<footer class="footer">
<!-- 大框中间到版心 -->
<div class="edition_heart1">
<!-- 第一个服务模块 -->
<div class="mod-service1">
<ul>
<li>
<div class="service-picture1 pic"></div>
<div class="service-picture-text">
<h4 style="font-size: 14px;">正品保障</h4>
<p style="font-size: 12px;">正品保障，提供发票</p>
</div>
</li>
<li>
<div class="service-picture2 pic"></div>
<div class="service-picture-text">
<h4 style="font-size: 14px;"> 极速物流</h4>
<p style="font-size: 12px;"> 急速物流，急速送达</p>
</div>
</li>
<li>
<div class="service-picture3 pic"></div>
<div class="service-picture-text">
<h4 style="font-size: 14px;">无忧售后</h4>
<p style="font-size: 12px;">7天无理由退货</p>
</div>
</li>
<li>
<div class="service-picture4 pic"></div>
<div class="service-picture-text">
<h4 style="font-size: 14px;">特色服务</h4>
<p style="font-size: 12px;">私人定制家电套餐</p>
</div>
</li>
<li>
<div class="service-picture5 pic"></div>
<div class="service-picture-text">
<h4 style="font-size: 14px;">帮助中心</h4>
<p style="font-size: 12px;">您的购物指南</p>
</div>
</li>
</ul>
</div>
<!-- 底部模块第一部分 结束 -->
<!-- 底部模块第二部分 开始 -->
<div class="mod-help">
<dl>
<dd style="font-size: 16px;">售后服务</dd>
<dt><a href="#">售后政策</a></dt>
<dt><a href="#">价格保护</a></dt>
<dt><a href="#">退款说明</a></dt>
<dt><a href="#">返修/退换货</a></dt>
<dt><a href="#">取消订单</a></dt>
</dl>
<dl>
<dd style="font-size: 16px;">售后服务</dd>
<dt><a href="#">售后政策</a></dt>
<dt><a href="#">价格保护</a></dt>
<dt><a href="#">退款说明</a></dt>
<dt><a href="#">返修/退换货</a></dt>
<dt><a href="#">取消订单</a></dt>
</dl>
<dl>
<dd style="font-size: 16px;">售后服务</dd>
<dt><a href="#">售后政策</a></dt>
<dt><a href="#">价格保护</a></dt>
<dt><a href="#">退款说明</a></dt>
<dt><a href="#">返修/退换货</a></dt>
<dt><a href="#">取消订单</a></dt>
</dl>
<dl>
<dd style="font-size: 16px;">售后服务</dd>
<dt><a href="#">售后政策</a></dt>
<dt><a href="#">价格保护</a></dt>
<dt><a href="#">退款说明</a></dt>
<dt><a href="#">返修/退换货</a></dt>
<dt><a href="#">取消订单</a></dt>
</dl>
<dl>
<dd style="font-size: 16px;">售后服务</dd>
<dt><a href="#">售后政策</a></dt>
<dt><a href="#">价格保护</a></dt>
<dt><a href="#">退款说明</a></dt>
<dt><a href="#">返修/退换货</a></dt>
<dt><a href="#">取消订单</a></dt>
</dl>
<dl>
<dd style="font-size: 16px;">帮助中心</dd>
<dt>
<img src="images/wx_cz.jpg" alt="" >
<p>品牌优购客户端</p>
</dt>
</dl>
</div>
<!-- 底部模块第二部分 结束 -->
<!-- 底部模块第三部分 开始-->
<div class="mod-copyright">
<div class="link"><a href=""> 关于我们 </a> | <a href="">联系我们</a> | <a href="">联系客服</a> | <a href="">商家入驻</a> | <a href="">营销中心</a> |<a href="">手机品优购</a> | <a href="">友情链接</a> | <a href="">销售联盟</a> |<a href="">品优购社区</a> | <a href="">品优购公益</a> | <a href="">English Site</a> | <a href=""> Contact U</a></div>
<div class="area"> 地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn
</div>
<div class="areanumber">京ICP备08001421号京公网安备11010800770</div>
</div>
<!-- 底部模块第三部分 结束-->
</div>
</footer>
</body>
</html>
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?tomleg');
src: url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?tomleg') format('truetype'), url('../fonts/icomoon.woff?tomleg') format('woff'), url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
.main {
height: 455px;
width: 981px;
margin-left: 220px;
margin-top: 10px;
}
.index-picture {
position: relative;
float: left;
width: 720px;
height: 100%;
text-align: center;
}
.navflash {
float: right;
width: 250px;
height: 100%;
}
/* 轮播图制作 */
.leftmove {
position: absolute;
left: 0px;
bottom: 50%;
margin-top: -17px;
border-top-right-radius: 17px;
border-bottom-right-radius: 17px;
}
.move span>a {
color: white;
}
.move {
display: inline-block;
height: 35px;
width: 26px;
line-height: 35px;
color: white !important;
font-size: 19px;
background-color: rgb(111, 121, 127);
}
.rightmove {
position: absolute;
right: 0px;
bottom: 50%;
margin-top: -17px;
border-top-left-radius: 17px;
border-bottom-left-radius: 17px;
}
.index-picture ul {
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -67px;
width: 135px;
height: 16px;
text-align: center;
background-color: rgb(111, 121, 127);
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.movebutton li {
float: left;
width: 10px;
height: 11px;
background-color: #fff;
border-radius: 50%;
margin: 3px;
}
/* 通告栏的右侧navflash头部 */
.navflash {
float: right;
width: 250px;
height: 100%;
}
.navflash-1 {
width: 250px;
height: 164px;
border: 1px solid #e4e4e4;
/* background-color: pink; */
}
.navflash-2 {
height: 34px;
line-height: 34px;
border-bottom: 1px dotted #e8e8e7;
}
.navflash-3 {
height: 131px;
text-align: center;
/* line-height: 131px; */
/* text-align: center; */
}
.navflash2-leftword {
float: left;
font-size: 14px;
margin-left: 18px;
}
.navflash2-rightword {
float: right;
font-size: 12px;
margin-right: 33px;
}
.navflash2-rightword::after {
content: "\e920";
font-family: "icomoon";
font-size: 14px;
vertical-align: bottom;
}
.navflash-3word {
font-weight: 600;
padding-left: 18px;
color: black;
}
.navflash-3 ul li {
padding-top: 6px;
}
.liveservice {
width: 250px;
height: 210px;
border: 1px solid #e4e4e4;
/* background-color: pink; */
}
.liveservice ul li {
float: left;
width: 62px;
height: 70px;
text-align: center;
border-bottom: 1px solid #e4e4e4;
border-right: 1px solid #e4e4e4;
}
.liveservice ul li i {
display: inline-block;
background: url("../images/icons.png") no-repeat -16px -14px;
margin-top: 10px;
width: 24px;
height: 27px;
/* background-color: greenyellow; */
}
.recommend {
height: 163px;
/* background-color: pink; */
margin-top: 12px;
}
.rec-hd {
float: left;
height: 163px;
width: 206px;
background-color: #5c5251;
text-align: center;
line-height: 163px;
}
.rec-bd {
float: left;
}
.rec-bd ul li {
float: left;
width: 248px;
border-right: 1px solid #dddddd;
}
.rec-bd ul li img {
width: 251px;
height: 164px;
}
/* 猜你喜欢模块 */
.likehd {
height: 60px;
line-height: 70px;
font-size: 18px;
}
.like {
height: 232px;
/* background-color: pink; */
border: 1px solid #e4e4e4;
}
.likearea {
width: 1300px;
height: 232px;
}
.like .likearea li {
float: left;
/* text-align: center; */
width: 200px;
height: 232px;
border-right: 1px solid #e4e4e4;
/* background-color: skyblue; */
}
.like .likearea li img {
word-wrap: 200px;
height: 160px;
}
.like .likearea li div {
width: 125px;
height: 60px;
margin: 0 auto;
/* background-color: blue; */
}
.like .likearea li:last-child i {
font-size: 12px;
color: #666666;
}
.spanone {
font-size: 14px;
}
.spantwo {
font-size: 18px;
}
.box-hd {
height: 60px;
line-height: 55px;
/* background-color: pink; */
border-bottom: 3px solid #c81623;
}
.hd-1 {
float: left;
font-size: 18px;
font-weight: 400;
margin-left: 20px;
}
.hd-2 {
float: right;
margin-right: 20px;
}
.hd-2 ul li a {
font-size: 12px;
color: #666666;
}
.hd-2 ul li:nth-child(even) {
width: 1px;
height: 12px;
margin: 22px 10px;
background-color: rgb(102, 102, 102);
}
a:hover {
color: red !important;
}
/* 选项卡区域主题部分 */
.box-bd {
height: 361px;
background-color: #f9f9f9;
}
.box-bd>div {
text-align: center;
height: 361px;
float: left;
}
.bd1 {
width: 210px;
}
.bd1 ul {
padding-left: 12px;
}
.bd1 ul li {
float: left;
width: 85px;
height: 34px;
border-bottom: 1px solid #ccc;
text-align: center;
line-height: 33px;
margin-right: 10px;
}
.bd2 {
position: relative;
width: 329px;
}
.bd2 .lunbotu {
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -25px;
width: 50px;
height: 13px;
/* background-color: wheat; */
}
.bd2 .lunbotu li {
margin: 2px 3px;
width: 10px;
height: 10px;
background-color: #3e3e3e;
border-radius: 50%;
}
.bd3 {
width: 221px;
}
.bd4 {
width: 221px;
}
.shortcut {
background-color: rgb(241, 241, 241);
height: 31px;
}
.edition_heart1 {
width: 1200px;
margin: 0 auto;
}
.fl,
.fr {
float: left;
width: 400px;
height: 31px;
line-height: 31px;
}
.fr {
float: right;
width: 606px;
}
.edition_heart1 ul li {
float: left;
}
.redword {
color: rgb(208, 22, 35) !important;
}
.shortcut .fr ul li:nth-child(even) {
width: 1px;
height: 12px;
margin: 9px 15px;
background-color: rgb(102, 102, 102);
}
/*调用特殊字符声明，此为初始代码子使用过程需对路径进行修改
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?tomleg');
src: url('fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?tomleg') format('truetype'),
url('fonts/icomoon.woff?tomleg') format('woff'),
url('fonts/icomoon.svg?tomleg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
} */
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?tomleg');
src: url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?tomleg') format('truetype'), url('../fonts/icomoon.woff?tomleg') format('woff'), url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
.list-icon::after {
content: "\e91e";
font-family: 'icomoon';
}
/* 快捷导航模块 end */
.header {
position: relative;
height: 105px;
/* background-color: skyblue; */
}
.logo {
width: 171px;
height: 61px;
background-color: pink;
background: url("../images/logo.png") no-repeat;
}
.logo h1 {
display: inline-block;
width: 300px;
text-indent: -9999px;
overflow: hidden;
}
/* logo部分结束 */
/* 搜索框部分 开始 */
.search {
position: absolute;
top: 25px;
left: 346px;
width: 538px;
height: 36px;
border: 2px solid #b1191a;
}
.search input {
float: left;
width: 455px;
height: 32px;
padding-left: 15px;
}
.search button {
float: left;
width: 79px;
height: 32px;
background-color: #b1191a;
}
/* <!-- 搜索框结束 --> */
.hotword {
position: absolute;
top: 66px;
left: 346px;
}
.hotword>a {
margin: 0 10px;
}
/* <!-- 搜索框底部热点词区域 结束--> */
.shopcar {
position: absolute;
left: 996px;
top: 25px;
text-align: center;
line-height: 34px;
color: #666666;
font-size: 15px;
height: 37px;
width: 140px;
background-color: #f7f7f7;
border: 2px solid #dfdfdf;
}
.shopcar::before {
content: "\e93a";
font-family: "icomoon";
color: #b1191a;
margin-right: 5px;
}
.shopcar::after {
content: "\e920";
font-family: "icomoon";
vertical-align: initial;
margin-left: 10px;
}
.shopcar i {
position: absolute;
top: -5px;
left: 105px;
height: 14px;
padding: 0 5px;
line-height: 14px;
background-color: #b1191a;
border-radius: 7px 7px 7px 0px;
color: white;
}
/* <!-- 中间通栏导航区 开始 --> */
.indexnav {
width: 100%;
height: 45px;
border-bottom: 2px solid #b1191a;
/* text-align: center; */
}
.nav-left {
float: left;
width: 210px;
height: 45px;
background-color: #b1191a;
}
.nav-right {
float: right;
width: 980px;
height: 45px;
}
.nav-left dt {
width: 100%;
height: 100%;
text-align: center;
line-height: 45px;
font-size: 14px;
color: #f6eaea;
}
.nav-left dd {
width: 210px;
height: 465px;
/* cursor: pointer; */
background-color: #c81623;
}
.nav-left dd:hover {
display: block;
}
.nav-left dd ul li {
height: 31px;
width: 210px;
line-height: 31px;
margin-left: 3px;
padding-left: 10px;
}
.nav-left dd ul li:hover {
background-color: #fff;
}
.nav-left dd ul li a {
color: #fff;
font-size: 14px;
}
.nav-left dd ul li:hover a {
color: #c81623;
}
.nav-left dd ul {
position: relative;
}
.nav-left dd ul li::after {
/* 利用伪元素去制作箭头让其定位到最右边 */
position: absolute;
right: 5px;
/* top: 5px; */
content: "\e920";
font-family: "icomoon";
color: white;
}
.nav-right ul li {
width: 100px;
height: 45px;
color: #333333;
font-size: 16px;
text-align: center;
line-height: 45px;
}
.nav-right ul li a {
display: inline-block;
width: 100px;
height: 45px;
}
/* <!-- 中间通栏导航区 结束 --> */
/* <!-- 底部模块 开始 --> */
.footer {
height: 415px;
background-color: #f5f5f5;
padding-top: 30px;
}
.mod-service1 {
height: 80px;
border-bottom: 2px solid #ededed;
}
.mod-service1 ul li {
height: 50px;
width: 240px;
/* background-color: skyblue; */
padding-left: 37px;
}
.pic {
height: 50px;
width: 50px;
float: left;
margin-right: 6px;
}
.service-picture1 {
background: url("../images/icons.png") no-repeat -252px -2px;
}
.service-picture2 {
background: url("../images/icons.png") no-repeat -255px -53px;
}
.service-picture3 {
background: url("../images/icons.png") no-repeat -256px -106px;
}
.service-picture4 {
background: url("../images/icons.png") no-repeat -257px -157px;
}
.service-picture5 {
background: url("../images/icons.png") no-repeat -256px -106px;
}
/* <!-- 底部模块第一部分 结束 --> */
/* <!-- 底部模块第二部分 开始 --> */
.mod-help {
height: 188px;
border-bottom: 2px solid #ededed;
}
.mod-help dd {
margin-bottom: 10px;
}
.mod-help dd dt {
font-size: 12px;
}
.mod-help dl {
float: left;
width: 200px;
}
.mod-help dl:last-child {
width: 200px;
text-align: center;
}
/* <!-- 底部模块第二部分 结束 --> */
/* <!-- 底部模块第三部分 开始--> */
.mod-copyright {
height: 120px;
text-align: center;
}
.area {
padding: 5px 0;
}
.link>a {
padding: 0px 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="品优购-专业的综合网上购物商城销售家电、数码通讯、电脑、
家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物
体验!" />
<meta name="keywords" content="网上购物，网上商城手机,笔记本,电脑,MP3,CD,VCD,DV，相机,数码配
件,手表存储卡,品优购" />
<title>品优购-综合网购首选-正品低价、品质保障、配送快捷！</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/common.css">
<!-- 标题栏图标引入 -->
<link rel="shortcut icon" href="title_logo.ico" type="image/x-icon">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- 快捷导航模块 start-->
<section class="shortcut">
<!-- 版心模块 -->
<div class="edition_heart1">
<div class="fl">
<ul>
<li>品优购欢迎你！ </li>
<li><a href="#">请登入 </a><a href="#" class="redword">免费注册</a></li>
</ul>
</div>
<div class="fr">
<ul>
<li>我的订单</li>
<li></li>
<li class="list-icon">我的品优购</li>
<li></li>
<li>品优购会员</li>
<li></li>
<li>企业采购</li>
<li></li>
<li class="list-icon">关注品优购</li>
<li></li>
<li class="list-icon">客户服务</li>
<li></li>
<li class="list-icon">网站导航</li>
</ul>
</div>
</div>
</section>
<!-- 快捷导航模块 end-->
<!-- 中间搜索框区域（logo、hotword）-->
<header class="header edition_heart1">
<!-- logo部分 开始 -->
<div class="logo">
<h1>
<a href="index.html" title="好物就找品优购，质量有保证！">品优购-综合网购首选-正品低价、品质保障、配送快捷！</a>
</h1>
</div>
<!-- logo部分 结束 -->
<!-- 搜索框开始 -->
<div class="search">
<input type="search" name="" id="" value="语音开发">
<button>搜索</button>
</div>
<!-- 搜索框结束 -->
<!-- 搜索框底部热点词区域 -->
<div class="hotword">
<a href="#" class="redword">优惠购首发</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">
<!-- 利用伪类元素制作了一系列样式在css结构中 -->
我的购物车
<i>
<!-- 右上角图标 -->
8
</i>
</div>
<!-- 购物车模块结束 -->
<!-- 中间通栏导航区 开始 -->
<!-- 中间通栏导航区 结束 -->
</header>
<!-- 左侧与上面通告导航栏 开始 -->
<nav class="indexnav">
<div class="edition_heart1">
<div class="nav-left">
<dt>全部商品分类</dt>
<dd>
<ul>
<li><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>
</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><a href="">珠宝</a>
</li>
<li>
<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>
</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><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>
</ul>
</dd>
<!-- 中间通告栏的picture/部分 -->
</div>
<div class="nav-right">
<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>
</nav>
<!-- 主体部分main部分 -->
<div class="edition_heart1">
<div class="main">
<div class="index-picture">
<img src="images/focus.png" alt="">
<!-- 轮播图 -->
<span class="leftmove move"><a href="" style="color: white;"><</a></span>
<span class="rightmove move"> <a href="" style="color: white;">></a></span>
<ul class="movebutton">
<li style="margin-left: 6px;">
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- 右侧的字体部分 -->
<div class="navflash">
<div class="navflash-1">
<div class="navflash-2"><span class="navflash2-leftword">品优购快报</span><span class="navflash2-rightword">更多</span></div>
<div class="navflash-3">
<ul>
<li> <span class="navflash-3word">[特惠]</span>备战开学季全民半价购数码</li>
<li><span class="navflash-3word">[公告]</span>品优稳占家电网购六成份额</li>
<li><span class="navflash-3word">[特惠]</span>百元中秋全品类礼券限量领</li>
<li><span class="navflash-3word">[公告]</span>上品优生鲜享阳澄湖大闸蟹</li>
<li><span class="navflash-3word">[待惠]</span>每日享折扣品优品质游</li>
</ul>
</div>
</div>
<!-- 生活模块16个图标区 -->
<div class="liveservice">
<ul class="pictureicon">
<li>
<i></i>
<p>话费</p>
</li>
<li><i></i>
<p>话费</p>
</li>
<li><i></i>
<p>话费</p>
</li>
<li><i></i>
<p>话费</p>
</li>
<li><i></i>
<p>话费</p>
</li>
<li><i></i>
<p>话费</p>
</li>
<li><i></i>
<p>话费</p>
</li>
<li><i></i>
<p>话费</p>
</li>
<li><i></i>
<p>话费</p>
</li>
<li><i></i>
<p>话费</p>
</li>
<li><i></i>
<p>话费</p>
</li>
<li><i></i>
<p>话费</p>
</li>
</ul>
</div>
<div class="lastservice">
<img src="images/bargain.png" alt="" style="height: 79px;width: 250px;">
</div>
</div>
</div>
<!-- 推荐模块 -->
<div class="recommend">
<div class="rec-hd">
<img src="images/recom.png" alt="">
</div>
<div class="rec-bd">
<ul>
<li>
<a href=""><img src="images/recom1.png" alt=""></a>
</li>
<li>
<a href=""><img src="images/recom2.png" alt=""></a>
</li>
<li>
<a href=""><img src="images/recom3.png" alt=""></a>
</li>
<li>
<a href=""> <img src="images/recom4.png" alt=""></a>
</li>
</ul>
</div>
</div>
<!-- 猜你喜欢模块制作 start-->
<div class="likehd">
猜你喜欢
</div>
<div class="like">
<ul class="likearea">
<li>
<img src="images/like3.png" alt="">
<div>
<i>捷波朗 <br>
（jabra）BOOSI劲步</i><br>
<span class="redword spanone">￥</span> <span class="redword spantwo">116.00</span>
</div>
</li>
<li>
<img src="images/like3.png" alt="">
<div>
<i>捷波朗 <br>
（jabra）BOOSI劲步</i><br>
<span class="redword spanone">￥</span> <span class="redword spantwo">116.00</span>
</div>
</li>
<li>
<img src="images/like3.png" alt="">
<div>
<i>捷波朗 <br>
（jabra）BOOSI劲步</i><br>
<span class="redword spanone">￥</span> <span class="redword spantwo">116.00</span>
</div>
</li>
<li>
<img src="images/like3.png" alt="">
<div>
<i>捷波朗 <br>
（jabra）BOOSI劲步</i><br>
<span class="redword spanone">￥</span> <span class="redword spantwo">116.00</span>
</div>
</li>
<li>
<img src="images/like3.png" alt="">
<div>
<i>捷波朗 <br>
（jabra）BOOSI劲步</i><br>
<span class="redword spanone">￥</span> <span class="redword spantwo">116.00</span>
</div>
</li>
<li>
<img src="images/like3.png" alt="">
<div>
<i>捷波朗 <br>
（jabra）BOOSI劲步</i><br>
<span class="redword spanone">￥</span> <span class="redword spantwo">116.00</span>
</div>
</li>
</ul>
</div>
<!-- 猜你喜欢模块制作 end-->
<!-- 家用电器选项栏制作 start -->
<div class="floor">
<div class="editong_heart1" style="border-color: coral;">
<div class="box-hd">
<div class="hd-1 redword">家用电器</div>
<div class="hd-2">
<ul>
<li>
<a href="https://www.baidu.com/?tn=44004473_35_oem_dg">热门</a>
</li>
<li></li>
<li>
<a href="">大家电</a>
</li>
<li></li>
<li>
<a href="">生活电器</a>
</li>
<li></li>
<li>
<a href="">厨房电器</a>
</li>
<li></li>
<li>
<a href="">个护健康</a>
</li>
<li></li>
<li>
<a href="">应季电器</a>
</li>
<li></li>
<li>
<a href="">空气/净水</a>
</li>
<li></li>
<li>
<a href="">新奇特</a>
</li>
<li></li>
<li>
<a href="">高端电器</a>
</li>
</ul>
</div>
</div>
<!-- /* 选项卡区域主题部分 */ -->
<div class="box-bd">
<div class="bd1">
<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=" https://www.baidu.com/?tn=44004473_35_oem_dg" target="_blank"><img src="images/floor-1-1.png" alt=""></a>
</div>
<div class="bd2">
<img src="images/floor-1-b01.png" alt="">
<ul class="lunbotu">
<li style="background-color:white;"></li>
<li></li>
<li></li>
</ul>
</div>
<div class="bd3">
<img src="images/floor-1-2.png" alt="">
<img src="images/floor-1-3.png" alt="">
</div>
<div class="bd4">
<img src="images/floor-1-4.png" alt="">
</div>
<div class="bd5">
<img src="images/floor-1-5.png" alt="">
<img src="images/floor-1-6.png" alt="">
</div>
</div>
</div>
</div>
<div class="floor">
<div class="editong_heart1" style="border-color: coral;">
<div class="box-hd">
<div class="hd-1 redword">家用电器</div>
<div class="hd-2">
<ul>
<li>
<a href="">热门</a>
</li>
<li></li>
<li>
<a href="">大家电</a>
</li>
<li></li>
<li>
<a href="">生活电器</a>
</li>
<li></li>
<li>
<a href="">厨房电器</a>
</li>
<li></li>
<li>
<a href="">个护健康</a>
</li>
<li></li>
<li>
<a href="">应季电器</a>
</li>
<li></li>
<li>
<a href="">空气/净水</a>
</li>
<li></li>
<li>
<a href="">新奇特</a>
</li>
<li></li>
<li>
<a href="">高端电器</a>
</li>
</ul>
</div>
</div>
<!-- /* 选项卡区域主题部分 */ -->
<div class="box-bd">
<div class="bd1">
<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>
<img src="images/floor-1-1.png" alt="">
</div>
<div class="bd2">
<img src="images/floor-1-b01.png" alt="">
<ul class="lunbotu">
<li style="background-color:white;"></li>
<li></li>
<li></li>
</ul>
</div>
<div class="bd3">
<img src="images/floor-1-2.png" alt="">
<img src="images/floor-1-3.png" alt="">
</div>
<div class="bd4">
<img src="images/floor-1-4.png" alt="">
</div>
<div class="bd5">
<img src="images/floor-1-5.png" alt="">
<img src="images/floor-1-6.png" alt="">
</div>
</div>
</div>
</div>
<div class="floor">
<div class="editong_heart1" style="border-color: coral;">
<div class="box-hd">
<div class="hd-1 redword">家用电器</div>
<div class="hd-2">
<ul>
<li>
<a href="">热门</a>
</li>
<li></li>
<li>
<a href="">大家电</a>
</li>
<li></li>
<li>
<a href="">生活电器</a>
</li>
<li></li>
<li>
<a href="">厨房电器</a>
</li>
<li></li>
<li>
<a href="">个护健康</a>
</li>
<li></li>
<li>
<a href="">应季电器</a>
</li>
<li></li>
<li>
<a href="">空气/净水</a>
</li>
<li></li>
<li>
<a href="">新奇特</a>
</li>
<li></li>
<li>
<a href="">高端电器</a>
</li>
</ul>
</div>
</div>
<!-- /* 选项卡区域主题部分 */ -->
<div class="box-bd">
<div class="bd1">
<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>
<img src="images/floor-1-1.png" alt="">
</div>
<div class="bd2">
<img src="images/floor-1-b01.png" alt="">
<ul class="lunbotu">
<li style="background-color:white;"></li>
<li></li>
<li></li>
</ul>
</div>
<div class="bd3">
<img src="images/floor-1-2.png" alt="">
<img src="images/floor-1-3.png" alt="">
</div>
<div class="bd4">
<img src="images/floor-1-4.png" alt="">
</div>
<div class="bd5">
<img src="images/floor-1-5.png" alt="">
<img src="images/floor-1-6.png" alt="">
</div>
</div>
</div>
</div>
</div>
<!-- 家用电器选项栏制作 end -->
</div>
<!-- 左侧与上面通告导航栏 结束 -->
<!-- 底部模块第一部分 开始 -->
<footer class="footer">
<!-- 大框中间到版心 -->
<div class="edition_heart1">
<!-- 第一个服务模块 -->
<div class="mod-service1">
<ul>
<li>
<div class="service-picture1 pic"></div>
<div class="service-picture-text">
<h4 style="font-size: 14px;">正品保障</h4>
<p style="font-size: 12px;">正品保障，提供发票</p>
</div>
</li>
<li>
<div class="service-picture2 pic"></div>
<div class="service-picture-text">
<h4 style="font-size: 14px;"> 极速物流</h4>
<p style="font-size: 12px;"> 急速物流，急速送达</p>
</div>
</li>
<li>
<div class="service-picture3 pic"></div>
<div class="service-picture-text">
<h4 style="font-size: 14px;">无忧售后</h4>
<p style="font-size: 12px;">7天无理由退货</p>
</div>
</li>
<li>
<div class="service-picture4 pic"></div>
<div class="service-picture-text">
<h4 style="font-size: 14px;">特色服务</h4>
<p style="font-size: 12px;">私人定制家电套餐</p>
</div>
</li>
<li>
<div class="service-picture5 pic"></div>
<div class="service-picture-text">
<h4 style="font-size: 14px;">帮助中心</h4>
<p style="font-size: 12px;">您的购物指南</p>
</div>
</li>
</ul>
</div>
<!-- 底部模块第一部分 结束 -->
<!-- 底部模块第二部分 开始 -->
<div class="mod-help">
<dl>
<dd style="font-size: 16px;">售后服务</dd>
<dt><a href="#">售后政策</a></dt>
<dt><a href="#">价格保护</a></dt>
<dt><a href="#">退款说明</a></dt>
<dt><a href="#">返修/退换货</a></dt>
<dt><a href="#">取消订单</a></dt>
</dl>
<dl>
<dd style="font-size: 16px;">售后服务</dd>
<dt><a href="#">售后政策</a></dt>
<dt><a href="#">价格保护</a></dt>
<dt><a href="#">退款说明</a></dt>
<dt><a href="#">返修/退换货</a></dt>
<dt><a href="#">取消订单</a></dt>
</dl>
<dl>
<dd style="font-size: 16px;">售后服务</dd>
<dt><a href="#">售后政策</a></dt>
<dt><a href="#">价格保护</a></dt>
<dt><a href="#">退款说明</a></dt>
<dt><a href="#">返修/退换货</a></dt>
<dt><a href="#">取消订单</a></dt>
</dl>
<dl>
<dd style="font-size: 16px;">售后服务</dd>
<dt><a href="#">售后政策</a></dt>
<dt><a href="#">价格保护</a></dt>
<dt><a href="#">退款说明</a></dt>
<dt><a href="#">返修/退换货</a></dt>
<dt><a href="#">取消订单</a></dt>
</dl>
<dl>
<dd style="font-size: 16px;">售后服务</dd>
<dt><a href="#">售后政策</a></dt>
<dt><a href="#">价格保护</a></dt>
<dt><a href="#">退款说明</a></dt>
<dt><a href="#">返修/退换货</a></dt>
<dt><a href="#">取消订单</a></dt>
</dl>
<dl>
<dd style="font-size: 16px;">帮助中心</dd>
<dt>
<img src="images/wx_cz.jpg" alt="" >
<p>品牌优购客户端</p>
</dt>
</dl>
</div>
<!-- 底部模块第二部分 结束 -->
<!-- 底部模块第三部分 开始-->
<div class="mod-copyright">
<div class="link"><a href=""> 关于我们 </a> | <a href="">联系我们</a> | <a href="">联系客服</a> | <a href="">商家入驻</a> | <a href="">营销中心</a> |<a href="">手机品优购</a> | <a href="">友情链接</a> | <a href="">销售联盟</a> |<a href="">品优购社区</a> | <a href="">品优购公益</a> | <a href="">English Site</a> | <a href=""> Contact U</a></div>
<div class="area"> 地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn
</div>
<div class="areanumber">京ICP备08001421号京公网安备11010800770</div>
</div>
<!-- 底部模块第三部分 结束-->
</div>
</footer>
</body>
</html>
/* <!-- 底部模块第三部分 结束--> */
.bd5 {
width: 219px;
}
08-01
656
656
01-06
147
147
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
