HTML部分
代码语言：javascript
复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>伪海尔商城</title>
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="css/test.css" />
</head>
<body>
<!-------------------------------头部左---------------------------->
<!--定义头部容器1-->
<div id="header-bar-box">
<!--定义包装 内容容器-->
<div class="wrapper container">
<!--定义选择城市容器 左浮动 -->
<div class="choose-city-box">
<span class="s-title">选择城市：</span>
<span class="s-city">
<em class="em-city">西安</em>
</span>
</div>
<a class="a-fav-ehaier" href="#">收藏海尔商城</a>
<!--定义微信 容器 -->
<span class="s-weixin-box"><a href="#">微信
<!--设置“微信下载”下拉框容器 -->
<div class="s-weixin-top">
<img src="img/wechat.png" alt="微信扫描">
</div>
</a>
</span>
<!--定义app 容器-->
<span class="s-app-box">
<a href="">商城app
<div class="s-app-top">
<img src="img/qrehaier.png" alt="商城app"/>
</div>
</a>
</span>
<!-------------------------------头部 1 右---------------------------->
<!--定义头部右侧部分 -->
<div class="all-haeder-bor">
<!--定义右侧无序列表-->
<ul class="ul-topnav">
<li>嗨，欢迎来到海尔官方商城 请</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>
<!-------------------------------身体---------------------------->
<!--定义身体容器2-->
<div class="all-header-cont">
<!--定义包装 内容2容器-->
<div class="wrapper1 container">
<!--身体 2 左侧-->
<h1 class="h1-site">
<!--此处a有图片在css中-->
<a href="#"></a>
<img src="img/slogan.png" alt="海尔"/>
</h1>
<!-----------身体容器 内容包装容器 搜索框---------->
<div class="all-search">
<form class="hotsearch">
<input class="text-search" type="text" name="" value="" />
<input class="but-search" type="submit" name="" value="" />
</form>
<div class="hot-words">
<ul>
<li>热门搜索：</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>
<!---------------身体 2 右侧----------->
<div class="head-promise">
<a class="a-promiseFreeship" href="#">全场免运费</a>
<a class="a-promiseDeliverinstall" href="#">送装同步</a>
<a class="a-promiseSatisfy" href="#">满意再付款</a>
</div>
</div>
</div>
<!-------------------------------内容 导航链接---------------------------->
<!--<nav> 元素只是作为标注一个导航链接的区域。-->
<div class="nav">
<!--定义内容容器-->
<div class="container">
<!--定义 清除浮动容器 -->
<div class="clearfix">
<!--导航栏 左侧-->
<!--定义类型列表ul-->
<ul class="all-category-box">
<p>商品分类</p>
<!--导航 商品分类 下拉栏内容-->
<!--设置类型总容器-->
<div class="all-category-box-top container">
<!--设置类型小容器1-->
<div class="all-category-box-top1">
<!--
自定义列表
自定义列表以 <dl> 标签开始。列表
每个自定义列表项以 <dt> 开始。行
每个自定义列表项的定义以 <dd> 开始。个
-->
<!--定义小类型自定义列表1_1 -->
<dl class="dl-category-box-top1">
<dt> <a href="#">冰箱</a></dt>
<dd><a href="#">单门 </a>| <a href="">两门 </a>| <a href="">三门 </a>|<a href=""> 多门 </a>|</dd>
<dd><a href="#">对开门</a></dd>
</dl>
<!--定义小类型自定义列表1_2-->
<dl class="dl-category-box-top1">
<dt><a href="#">家用空调</a></dt>
<dd><a href="#">壁挂式空调 </a>| <a href="">柜式空调 |</a></dd>
<dd><a href="#">空气类产品 </a> </dd>
</dl>
<!--定义小类型自定义列表1_3-->
<dl class="dl-category-box-top1">
<dt><a href="#">商用空调 </a></dt>
<dd><a href="#">家用中央空调 </a>| <a href="">嵌入机</a> | </dd>
<dd><a href="#">商用柜机 </a> </dd>
</dl>
<!--定义小类型自定义列表1_4-->
<dl class="dl-category-box-top1">
<dt><a href="#">洗衣机</a></dt>
<dd><a href="#">双缸 </a>|<a href=""> 波轮 </a>|<a href=""> 滚筒</a> |<a href=""> 免清洗</a> | </dd>
<dd><a href="#">mini </a>|<a href=""> 洗烘一体</a> |<a href=""> 干衣机</a></dd>
</dl>
<!--定义小类型自定义列表1_5-->
<dl class="dl-category-box-top1">
<dt><a href="#">冰柜</a></dt>
<dd><a href="#">冰吧 </a>| <a href="">酒柜 </a>|<a href=""> 冷柜</a> |<a href=""> 展示柜</a> </dd>
</dl>
</div>
<!--定义类型小容器2-->
<div class="all-category-box-top2">
<!--定义小类型自定义列表2_1-->
<dl class="dl-category-box-top2">
<dt><a href="#">电视</a></dt>
<dd><a href="#">智能电视</a> | <a href="#">LED电视</a> | 4<a href="#">K电视</a></dd>
<dd><a href="#">| 电视附件</a> </dd>
</dl>
<!--定义小类型自定义列表2_2-->
<dl class="dl-category-box-top2">
<dt><a href="#">电脑</a></dt>
<dd><a href="#">笔记本 </a>| <a href="#">平板电脑</a> | <a href="#">台式电脑 </a></dd>
<dd>| <a href="#">电脑一体机 </a></dd>
</dl>
<!--定义小类型自定义列表2_3-->
<dl class="dl-category-box-top2">
<dt><a href="#">智能产品</a></dt>
<dd><a href="#">智能洁身器 </a>|<a href="#"> 无线智能充电 </a>| </dd>
<dd><a href="#">插线板 </a>| <a href="#">智能扫地机</a> |</dd>
<dd><a href="#">智能私人影院</a> | <a href="#">智能摄像头</a> |</dd>
<dd><a href="#">智能音箱 </a>|<a href="#"> 智能插座</a> | </dd>
<dd><a href="#">空气盒子 </a>| <a href="#">手持mini洗衣机</a> | </dd>
<dd><a href="#">甲醛监测仪</a> | <a href="#">智能安防</a></dd>
</dl>
</div>
<!--定义类型小容器3-->
<div class="all-category-box-top3">
<!--定义小类型自定义列表3_1-->
<dl class="dl-category-box-top3">
<dt><a href="">热水器</a></dt>
<dd><a href="#">电热水器 </a>|<a href="#"> 燃气热水器 </a>| </dd>
<dd><a href="#">小厨宝</a> | <a href="#">浴椅</a> | <a href="#">太阳能热水器</a></dd>
</dl>
<!--定义小类型自定义列表3_2-->
<dl class="dl-category-box-top3">
<dt><a href="#">厨房电器</a></dt>
<dd><a href="#">烟灶套系</a> | <a href="#">吸油烟机</a> | <a href="#">燃气灶</a> </dd>
<dd>|<a href="#">消毒柜</a> | <a href="#">电烤箱 </a>|<a href="#"> 洗碗机</a></dd>
</dl>
<!--定义小类型自定义列表3_3-->
<dl class="dl-category-box-top3">
<dt><a href="#">家电</a></dt>
<dd><a href="#">饮水机 </a>| <a href="#">净水机 </a>| <a href="#">智饮机 </a>| </dd>
<dd><a href="#">养生壶</a></dd>
</dl>
</div>
<!--定义类型小容器4-->
<div class="all-category-box-top4">
<!--定义小类型自定义列表4_1-->
<dl class="dl-category-box-top4">
<dt><a href="#">数码</a></dt>
<dd><a href="#">数码摄像机 </a>| 投影仪 </a>|</dd>
<dd><a href="#">数码相框</a> | <a href="#">路由器 </a>|</dd>
<dd><a href="#">行车记录仪</a></dd>
</dl>
<!--定义小类型自定义列表4_2-->
<dl class="dl-category-box-top4">
<dt><a href="#">手机</a></dt>
<dd><a href="#">4G手机</a> |<a href="#"> 3G手机</a></dd>
</dl>
</div>
<!--定义类型小容器5-->
<div class="all-category-box-top5">
<!--定义小类型自定义列表5_1-->
<dl class="dl-category-box-top5">
<dt><a href="#">生活小家电</a></dt>
<dd><a href="#">吸尘器 </a>| <a href="#">挂烫机</a> |<a href="#"> 空气净化器</a></dd>
<dd>|<a href="#"> 电暖器</a></dd>
</dl>
<!--定义小类型自定义列表5_2-->
<dl class="dl-category-box-top5">
<dt><a href="#">厨房小家电</a></dt>
<dd><a href="#">原汁机 </a>|<a href="#"> 榨油机</a> |<a href="#"> 豆浆机</a> |</dd>
<dd><a href="#">电水壶</a> | <a href="#">微波炉</a> | <a href="#">电压力锅</a> |</dd>
<dd><a href="#">电饭煲</a> | <a href="#">电磁炉</a></dd>
</dl>
<!--定义小类型自定义列表5_3-->
<dl class="dl-category-box-top5">
<dt><a href="#">家居</a></dt>
<dd><a href="#">电风扇</a> | <a href="#">LED台灯</a></dd>
</dl>
<!--定义小类型自定义列表5_4-->
<dl class="dl-category-box-top5">
<dt><a href="#">母婴家电</a></dt>
<dd><a href="#">消毒锅</a> |<a href="#"> 调奶器</a> | <a href="#">搅拌机</a> |</dd>
<dd><a href="#">母婴优养套系</a></dd>
</dl>
</div>
<!--定义类型小容器6-->
<div class="all-category-box-top6">
<!--定义小类型自定义列表6_1-->
<dl class="dl-category-box-top6">
<dt><a href="#">洗护配方</a></dt>
<dd><a href="#">净洗配方</a></dd>
</dl>
<!--定义小类型自定义列表6_2-->
<dl class="dl-category-box-top6">
<dt><a href="#">家庭医疗</a></dt>
dd><a href="#">按摩器 </a>| <a href="#">电子体温计</a> |</dd>
<dd><a href="#">电子血压计</a> | <a href="#">制氧机 </a>|<a href="#"> 血氧仪</a></dd>
<dd>| <a href="#">胎心仪</a> |<a href="#"> 血糖仪</a></dd>
</dl>
<!--定义小类型自定义列表6_3-->
<dl class="dl-category-box-top6">
<dt><a href="#">延保服务</a></dt>
<dd><a href="#">延保卡</a></dd>
</dl>
</div>
<!--定义类型小容器7-->
<div class="all-category-box-top7">
<a href="#">在线客服</a>
</div>
</div>
</ul>
<!-----------中部 导航栏 中---------->
<!--定义类型列表ul2-->
<ul>
<li><a href="#" target="_blank">首页</a></li>
<li><a href="#" target="_blank">精品汇</a></li>
<li><a href="#" target="_blank">我要定制</a></li>
<li><a href="#" target="_blank">酷玩新品</a></li>
<li><a href="#" target="_blank">会员俱乐部</a></li>
<li><a href="#" target="_blank">线下体验店</a></li>
</ul>
<!-----------中部 导航栏 有---------->
</div>
<!--定义右侧部分购物车容器div-->
<div class="mini-cart">
<p class="p-mini-cart">
<span class="s-title">购物车</span>
</p>
</div>
</div>
</div>
<!-------------------------------中部 导航栏>图片---------------------------->
<!--定义导航栏的大图片容器-->
<div id="banner">
<img src="img/56efdc653e7ea60a5d248832.png" alt="海尔无氟变频空调" title="海尔无氟变频空调"/>
</div>
<!-------------------------------中部 导航栏>图片>4图片---------------------------->
<!--定义导航栏的热点图片容器-->
<div class="container index-hot">
<div class="index-hot-top"><a href="#"><img src="img/56efa8d53e7ea60a5d248825.png"/></a></div>
<div class="index-hot-top"><a href="#"><img src="img/56efbded3e7ea60a5d248831.png"/></a></div>
<div class="index-hot-top"><a href="#"><img src="img/56ea86a358e1e4157144be0c1.png.jpg"/></a></div>
<div class="index-hot-top"><a href="#"><img src="img/56ef62853e7ea60a5d248801.png.jpg"/></a></div>
</div>
<!-------------------------------中部 导航栏>图片>4图片>精品推荐 热卖商品---------------------------->
<!--定义精品推荐大容器-->
<div class="lazybox container">
<h2>精品推荐</h2>
<!--定义热卖商品列表容器-->
<div class="excel-recom-list">
<!--定义推荐列表1-->
<dl class="dl-recom-item dl-recom-item-1">
热卖商品
</dl>
<!--定义推荐列表1-->
<dl class="dl-recom-item dl-recom-item-2">
<dt><a href="#">冰箱</a></dt>
<dd><a href="#">单门 </a>| <a href="#">两门 </a>| <a href="#">三门</a></dd>
<dd><a href="#">多门</a> | <a href="#">对开门</a></dd>
</dl>
<!--定义推荐列表3-->
<dl class="dl-recom-item dl-recom-item-3">
<dt><a href="#">洗衣机</a></dt>
<dd><a href="#">波轮</a> |<a href="#"> 滚筒</a></dd>
<dd><a href="#">mini</a> | <a href="#">双动力</a></dd>
</dl>
<!--定义推荐列表4-->
<dl class="dl-recom-item dl-recom-item-4">
<dt><a href="#">电视</a></dt>
<dd><a href="#">智能电视</a> | <a href="#">LED电视 </a></dd>
<dd><a href="#">智能电视 </a>| <a href="#">LED电视</a> </dd>
</dl>
<!--定义推荐列表5-->
<dl class="dl-recom-item dl-recom-item-5">
<dt><a href="#">空调</a></dt>
<dd><a href="#">壁挂式空调</a> | <a href="#">柜式空调 </a></dd>
<dd><a href="#">家用中央空调</a> | <a href="#">空气魔方</a></dd>
</dl>
<!--定义推荐列表6-->
<dl class="dl-recom-item dl-recom-item-6">
<dt><a href="#">热水器</a></dt>
<dd><a href="#">电热水器</a> | <a href="#">浴椅 </a></dd>
<dd>|<a href="#"> 燃气热水器</a></dd>
</dl>
<!--定义推荐列表7-->
<dl class="dl-recom-item dl-recom-item-7">
<dt><a href="#">厨房电器</a></dt>
<dd><a href="#">烟灶套系</a> | <a href="#">吸油烟机</a></dd>
<dd><a href="#">燃气灶 </a>| <a href="#">消毒柜</a> | <a href="#">洗碗机</a></dd>
</dl>
<!--定义推荐列表8-->
<dl class="dl-recom-item dl-recom-item-8">
<dt><a href="#">生活家电</a></dt>
<dd><a href="#">生活小家电 </a>| <a href="#">厨房小家电</a></dd>
<dd><a href="#">家庭医疗</a> |<a href="#"> 水家电</a> | 数码</a></dd>
</dl>
</div>
<!-------------------------------中部>精品推荐>商品---------->
<!--定义精品推荐列表ul-->
<ul class="ul-excel">
<li class="li-excel">
<a href="#"><img src="img/56f103b558e1af7551cf671c.png"/></a>
<h4 class="h4-pro-title">
<a href="#">
<span class="a-title">MOOKA彩电</span>
<em class="em-info">32A6M</em>
<span class="a-abs" title="【完美会员日】活动时间：3月20日0:00-3月22日24:00，活动价仅需1099元！下单立减100元,仅需999元！">
【完美会员日】活动时间：3月20日0:00-3月22日
</span>
<em class="em-price">￥1099</em>
</a>
</h4>
<a href="#" class="a-tag" style="background:#D71249">下单立享999元</a>
</li>
<li class="li-excel">
<a href="#"><img src=" img/56f1109bb7027af9b3ef0394.png"/></a>
<h4 class="h4-pro-title">
<a href="#">
<span class="a-title">海尔高效定频柜式空调</span>
<em class="em-info">KFR-50LW/08UBC13U1(茉莉白)套机</em>
<span class="a-abs" title="【完美会员日】活动时间：3月20日0:00-3月22日24:00，活动价仅需1099元！下单立减100元,仅需999元！">
【完美会员日】活动时间：3月20日0:00-3月22日
</span>
<em class="em-price">￥4799</em>
</a>
</h4>
<a href="#" class="a-tag" style="background:#FFA800">三年免费换新机</a>
</li>
<li class="li-excel">
<a href="#"><img src="img/55bae259fac0a3e7127ea7d3.png"/></a>
<h4 class="h4-pro-title">
<a href="#">
<span class="a-title">海尔电饭煲</span>
<em class="em-info">HRC-WFS4020</em>
<span class="a-abs" title="【完美会员日】活动时间：3月20日0:00-3月22日24:00，活动价仅需1099元！下单立减100元,仅需999元！">
【完美会员日】活动时间：3月20日0:00-3月22日
</span>
<em class="em-price">￥399</em>
</a>
</h4>
<a href="#" class="a-tag" style="background:#D71249">12大烹饪功能 全能王</a>
</li>
<li class="li-excel">
<a href="#"><img src="img/564aabb43e7e9b5defbebd58.png"/></a>
<h4 class="h4-pro-title">
<a href="#">
<span class="a-title">海尔电磁炉</span>
<em class="em-info">C21-H1107</em>
<span class="a-abs" title="【完美会员日】活动时间：3月20日0:00-3月22日24:00，活动价仅需1099元！下单立减100元,仅需999元！">
【完美会员日】活动时间：3月20日0:00-3月22日
</span>
<em class="em-price">￥159</em>
</a>
</h4>
<a href="#" class="a-tag" style="background:#D71249">下单立享999元</a>
</li>
<li class="li-excel">
<a href="#"><img src="img/56ed72d1b702458dfdefde9c.png"/></a>
<h4 class="h4-pro-title">
<a href="#">
<span class="a-title">海尔4K电视</span>
<em class="em-info">LS55A51</em>
<span class="a-abs" title="【完美会员日】活动时间：3月20日0:00-3月22日24:00，活动价仅需1099元！下单立减100元,仅需999元！">
【完美会员日】活动时间：3月20日0:00-3月22日
</span>
<em class="em-price">￥2999</em>
</a>
</h4>
<a href="#" class="a-tag" style="background:#D71249">买即送智能插排1元兑换券</a>
</li>
<li class="li-excel">
<a href="#"><img src="img/56eccd95b702458dfdefde96.png"/></a>
<h4 class="h4-pro-title">
<a href="#">
<span class="a-title">海尔滚筒洗衣机</span>
<em class="em-info">XQG70-12833 电商</em>
<span class="a-abs" title="【完美会员日】活动时间：3月20日0:00-3月22日24:00，活动价仅需1099元！下单立减100元,仅需999元！">
【完美会员日】明日价格跳回至2999，活动
</span>
<em class="em-price">￥1999</em>
</a>
</h4>
<a href="#" class="a-tag" style="background:#D71249">无刷变频 除菌液预洗 0点开抢</a>
</li>
<li class="li-excel">
<a href="#"><img src='img/56ea283e3e7eb6111a2e1c9b.png'></a>
<h4 class="h4-pro-title">
<a href="#">
<span class="a-title">统帅高效定频柜式空调</span>
<em class="em-info">KFR-72LW/08PAQ13TU1套机</em>
<span class="a-abs" title="【完美会员日】活动时间：3月20日0:00-3月22日24:00，活动价仅需1099元！下单立减100元,仅需999元！">
【完美会员日】统帅3匹除甲醛高效定频柜式
</span>
<em class="em-price">￥5999</em>
</a>
</h4>
<a href="#" class="a-tag" style="background:#32BEFF">20-50㎡适用98.67%甲醛除去率</a>
</li>
<li class="li-excel">
<a href="#"><img src="img/56ebd8aa58e141961259aabc.png"/></a>
<h4 class="h4-pro-title">
<a href="#">
<span class="a-title">海尔高效定频柜式空调</span>
<em class="em-info">KFR-50LW/08UAP23AU1套机</em>
<span class="a-abs" title="【完美会员日】活动时间：3月20日0:00-3月22日24:00，活动价仅需1099元！下单立减100元,仅需999元！">
KFR-50LW/08UAP23AU1套机，活动价仅需5999
</span>
<em class="em-price">￥6299</em>
</a>
</h4>
<a href="#" class="a-tag" style="background:#D71249">20-50㎡适用98.67%甲醛除去率</a>
</li>
<li class="li-excel">
<a href="#"><img src="img/55f7c6a2b702bb9fa6aad078.png"/></a>
<h4 class="h4-pro-title">
<a href="#">
<span class="a-title">海尔电压锅</span>
<em class="em-info">HPC-YLS5017B</em>
<span class="a-abs" title="【完美会员日】活动时间：3月20日0:00-3月22日24:00，活动价仅需1099元！下单立减100元,仅需999元！">
【完美会员日】海尔智能电压力锅，一锅多用
</span>
<em class="em-price">￥359</em>
</a>
</h4>
<a href="#" class="a-tag" style="background:#D71249">海尔电压力锅</a>
</li>
<li class="li-excel">
<a href="#"><img src="img/56d4fea9b70279a1fa45ef30.png"/></a>
<h4 class="h4-pro-title">
<a href="#">
<span class="a-title">海尔冰箱</span>
<em class="em-info">BCD-255SFM</em>
<span class="a-abs" title="【完美会员日】活动时间：3月20日0:00-3月22日24:00，活动价仅需1099元！下单立减100元,仅需999元！">
【完美会员日】海尔智能电压力锅，一锅多用
</span>
<em class="em-price">￥1699</em>
</a>
</h4>
<a href="#" class="a-tag" style="background:#D71249">三门节能冰箱，三天月一度电！</a>
</li>
<li class="li-excel">
<a href="#"><img src="img/56efbded3e7ea60a5d24882f.png"/></a>
<h4 class="h4-pro-title">
<a href="#">
<span class="a-title">海尔冰箱</span>
<em class="em-info">BCD-648WDBE</em>
<span class="a-abs" title="【完美会员日】活动时间：3月20日0:00-3月22日24:00，活动价仅需1099元！下单立减100元,仅需999元！">
【热销爆款】特惠价3899元，3:20日0:00
</span>
<em class="em-price">￥3899</em>
</a>
</h4>
<a href="#" class="a-tag" style="background:#D71249">684升超大容量对开门冰箱</a>
</li>
<li class="li-excel">
<a href="#"><img src="img/56ea24b93e7eb6111a2e1c94.png"/></a>
<h4 class="h4-pro-title">
<a href="#">
<span class="a-title">海尔小超人空调</span>
<em class="em-info">KFR-26GW/08AHBP-3套机</em>
<span class="a-abs" title="【完美会员日】活动时间：3月20日0:00-3月22日24:00，活动价仅需1099元！下单立减100元,仅需999元！">
【热销爆款】特惠价2199元！数量有限，抢到即赚！
</span>
<em class="em-price">￥2199</em>
</a>
</h4>
<a href="#" class="a-tag" style="background:#32BEFF">12-18㎡适用手机操控更</a>
</li>
</ul>
<!-------------------------------中部>新品发布 商品---------->
<!--定义新品大容器div-->
<div class="index-news container">
<h2>新品发布</h2>
<!--定义新品商品容器-->
<div class="resize-item" style="width:247px ;">
<a href="#"><img src="img/56f0ff05b7027af9b3ef038c.png"/></a>
</div>
<div class="resize-item" style="width:227px ;">
<a href="#"><img src="img/56ed73fd3e7ea60a5d2487e3.png"/></a>
</div>
<div class="resize-item" style="width: 217px;">
<a href="#"><img src="img/56ef6f69fac0eec16325b4b9.png"/></a>
</div>
<div class="resize-item" style="width: 227px;">
<a href="#"><img src="img/56f116753e7ea60a5d24883e.png"/></a>
</div>
<div class="resize-item" style="width:247px ;">
<a href="#"><img src="img/56e7e0a658e10adc9a90dc17.png"/></a>
</div>
</div>
<!-------------------------------中部>我要定制 商品---------->
<!--定义定制商品大容器div-->
<div class="index-diy container">
<h2>我要定制</h2>
<div class="resize-item" style="width: 247px;">
<a href="#"><img src="img/56f100313e7ea60a5d24883c.png"/></a>
</div>
<div class="resize-item" style="width: 227px;">
<a href="#"><img src="img/56f1109bb7027af9b3ef0394.png"/></a>
</div>
<div class="resize-item" style="width: 217px;">
<a href="#"><img src="img/56ed78adfac0eec16325b4af.png"/></a>
</div>
<div class="resize-item">
<a href="#"><img src="img/56c2e63d58e1ebfdc1a22c2b.png"/></a>
</div>
</div>
<!-------------------------------中部>互动社区 知识堂 商城公告 售后--------->
<!--定义布告栏大容器div-->
<div class="bulletin-board">
<!-------------------------------互动社区--------->
<!--定义互动社区容器div-->
<div class="design-online others">
<h1>欢迎</h1>
<h3><a href="javascript:;">互动社区
<span class="go-brownLeft"></span>
</a></h3>
<div class="img"><img src="img/gobbs_04.png" alt="互动社区"/></div>
<!--定义内容列表ul-->
<ul class="Left">
<li><a href="##">· 社区搬家公告</a></li>
<li><a href="#">· 最新有奖活动</a></li>
<li><a href="#">· 家电百科知识</a></li>
</ul>
</div>
<!-------------------------------知识堂--------->
<!--定义知识堂容器div-->
<div class="design-online others">
<h3><a href="javascript:;">知识堂
<span class="go-brownCenter"></span>
</a></h3>
<!--定义知识堂内容列表li-->
<ul class="Center">
<li><a href="##">· 海尔商城网上支付方式方法大全</a></li>
<li><a href="#">· 海尔洗衣机怎么样</a></li>
<li><a href="#">· 空调制冷效果差怎么办？</a></li>
<li><a href="#">· 滚筒洗衣机安装方法</a></li>
<li><a href="#">· 【2014冰箱排行榜】海尔冰箱销售排行榜</a></li>
</ul>
</div>
<!-------------------------------商城公告--------->
<div class="design-online others clearfloat">
<h3><a href="#">商城公告
<span class="go-brownRight"></span>
</a></h3>
<ul class="Right">
<li><a href="#">· “春节不打烊 二月开门红”活动中奖公示</a></li>
<li><a href="#">· “年货街”品类满赠活动中奖公示</a></li>
<li><a href="#">· 2016春节期间配送时间调整公告</a></li>
<li><a href="#">· 关于西藏三个区县停运和顺丰转寄业务业务暂停公告</a></li>
<li><a href="#">· “12月统帅品牌日”品类满赠活动中奖公示</a></li>
</ul>
</div>
<!-------------------------------中部>互动社区 知识堂 商城公告--------->
<div class="clarfex"></div>
<!-------------------------------中部>售后--------->
<!--定义售后大容器div-->
<div class=" all-services">
<!--中部>售后 左侧-->
<!--定义售后小容器左侧-->
<div class="services-left">
<p>售后服务和保修政策</p>
<!--定义售后列表-->
<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>
</ul>
</div>
<!--中部>售后 右侧-->
<!--定义售后小容器右侧-->
<div class="services-right">
<span class="services-right-kefu"><a href="#">在线客服</a></span>
<span class="services-right-weixin"><a href="#">微信客服</a></span>
</div>
</div>
</div>
</div>
<!-------------------------------中部末---------------------------->
<!--定义帮助大容器-->
<div class="all-help-wrap container">
<!--定义自定义列表 购物指南-->
<dl class="dl-help-wrap">
<dt>购物指南</dt>
<dd><a href="#">注册登录</a></dd>
<dd><a href="#">密码相关</a></dd>
<br />
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">交易条款</a></dd>
</dl>
<!--定义自定义列表 支付方式-->
<dl class="dl-help-wrap">
<dt>支付方式</dt>
<dd><a href="#">到货付款</a></dd>
<dd><a href="#">网银支付</a></dd>
<br>
<dd><a href="#">发票说明</a></dd>
<dd><a href="#">电子支付</a></dd>
</dl>
<!--定义自定义列表 物流配送 -->
<dl class="dl-help-wrap">
<dt>物流配送</dt>
<dd><a href="#">日日顺配送</a></dd>
<dd><a href="#">配送服务查询</a></dd>
<br>
<dd><a href="#">全场免运费</a></dd>
<dd><a href="#">送装同步</a></dd>
<dd><a href="#">24小时限时达</a></dd>
</dl>
<!--定义自定义列表dl4 售后服务-->
<dl class="dl-help-wrap">
<dt>售后服务</dt>
<dd><a href="#">投诉咨询</a></dd>
<dd><a href="#">退换货说明</a></dd>
<br>
<dd><a href="#">安装/维修</a></dd>
<dd><a href="#">售后服务政策</a></dd>
<dd><a href="#">服务时效承诺</a></dd>
</dl>
<!--定义自定义列表dl5 特色服务-->
<dl class="dl-help-wrap">
<dt>特色服务</dt>
<dd><a href="#">新品试用</a></dd>
<dd><a href="#">体验满意后再付款</a></dd>
<br>
<dd><a href="#">价格保护</a></dd>
<dd><a href="#">按约送达 超时免单</a></dd>
</dl>
</div>
<!-------------------------------底部容器---------------------------->
<!--定义底部大容器-->
<div class="all-footer">
<!-------------------------------底部内容---------------------------->
<!--定义底部内容容器-->
<div class="container">
<p>
<a href="#">购物流程 </a> |
<a href="#">付款方式</a> |
<a href="#">售后服务 </a> |
<a href="#">投诉建议 </a> |
<a href="#">友情链接</a> |
<a href="#">加入我们</a> |
<a href="#">海尔知识堂</a> |
</p>
<p>
网站备案/许可证号：
<a href="#">鲁ICP备09096283号</a>
</p>
<p>Copyright©2000-2015 海尔集团电子商务有限公司 All Rights Reserved</p>
<!--定义荣耀-->
<p class="p-all-honor">
<a href="#"><img src="img/50c6c153a103a74d19000040.png"/></a>
<a href="#"><img src="img/50c6c153a103a74d19000041.png"/></a>
<a href="#"><img src="img/50c6c153a103a74d19000042.png"/></a>
<a href="#"><img src="img/50c6c153a103a74d19000044.png"/></a>
<a href="#"><img src="img/50f7b61ce48435121700008e.jpg"/></a>
<a href="#"><img src="img/cnnic.png"/></a>
<a href="#"><img src="img/beian.gif"/></a>
</p>
</div>
</div>
<!-------------------------------右侧条---------------------------->
<div class="all-tipbar-show">
<!--第一个-->
<a class="all-tipbar-show-top" href="#">
<!--这个是鼠标移到第一个图片后出现的图片-->
<div class="all-tipbar-show-top-left">
<img src="img/ewm0917.png" alt="扫描下载" />
</div>
</a>
<!--第二个-->
<a class="all-tipbar-show-center" href="#"></a>
<!--第三个-->
<a class="all-tipbar-show-bottom" href="#"></a>
</div>
</body>
</html>
CSS_默认样式重置
代码语言：javascript
复制/* 样式重置 */
html {
overflow-y: scroll; /* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */
background-color: #fff;
color: #3c3c3c;
}
/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td /* table elements 表格元素 */
{
margin: 0;
padding: 0;
}
/* 设置默认字体 */
body,
button,
input,
select,
textarea
{
/* for ie */
/* font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif; */
/* 用 ascii 字符表示，使得在任何编码下都无问题 */
font: 12px/1 Tahoma, Helvetica, Arial, "5b8b4f53", sans-serif;
}
h1 {
font-size: 18px; /* 18px / 12px = 1.5 */
}
h2 {
font-size: 16px;
}
h3 {
font-size: 14px;
}
h4, h5, h6 {
font-size: 100%;
}
/* 将斜体扶正 */
address, cite, dfn, em, var
{
font-style: normal;
}
/* 统一等宽字体 */
code, kbd, pre, samp, tt
{
font-family: "Courier New", Courier, monospace;
}
/* 小于 12px 的中文很难阅读，让 small 正常化 */
small {
font-size: 12px;
}
/* 重置列表元素 */
ul, ol {
list-style: none;
}
/* 重置文本格式元素 */
a {
text-decoration: none;
color: #3c3c3c;
}
a:hover {
text-decoration: underline;
}
abbr[title], acronym[title]
{
/* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */
border-bottom: 1px dotted;
cursor: help;
}
q:before, q:after
{
content: "";
}
/* for ie6 */
/* img 搭车：让链接里的 img 无边框 */
fieldset, img {
border: none;
}
/* 使得表单元素在 ie 下能继承字体大小 */
button, input, select, textarea
{
font-size: 100%;
}
/* 重置表格元素 */
table {
border-collapse: collapse;
border-spacing: 0;
}
CSS_1
代码语言：javascript
复制/*让定宽块状元素左右居中*/
.container{
width: 1190px;
margin: auto auto; /*左右居中*/
}
.clearfloat:after{
content: "#";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
CSS_2
代码语言：javascript
复制/*————————————————————————————————定义头部——————————————————————————————*/
/*头部栏 */
/*设置头部div的*/
/*width height background-color position */
#header-bar-box{
width:100% ;
height: 34px;
background-color:#F6F6F6;
/*相对定位*/
/*
CSS position 相对定位和绝对定位
绝对定位：absolute:元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位
fixed
相对定位：relative：相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局
默认值：static
没有position，设置top、left、bottom、right值都没有效）
*/
position:relative ;
}
/*设置头部栏 中 包装容器的大小*/
#header-bar-box .wrapper{
width:1190px ;
height: 34px;
}
/*设置选择城市盒子div的 float和line-height*/
.choose-city-box{
/*设置浮动 达到和不独占一行的目的*/
float: left;
/*设置文字在容器中居中垂直 */
line-height: 34px;
}
/* 设置选择城市盒子div中城市span的 */
/*display,width,height,line-height,padding-right,background*/
.choose-city-box .s-city{
/*设置为 行内块 */
display: inline-block;
width:30px;
height: 22px;
/*设置文字在容器中居中垂直 */
line-height:22px ;
/*设置右内边距 与右边的文字拉开距离*/
padding-right:20px ;
/*
在一个div元素中设置多个背景图像（并指定他们的位置）：
background-color 背景颜色
background-image 背景图像 url(../img/base.png)
background-repeat 背景图像 - 水平或垂直平铺 repeat-x/y
背景图像- 设置定位与不平铺 no-repeat
background-attachment
background-position 背景图像- 设置定位 100% -500px(下移500px)
左上角是 0% 0%。
右下角是 100% 100%。
第一个值是水平位置，第二个值是垂直位置。
精灵图 移动的是整个精灵图
*/
background:url(../img/base.png) no-repeat 100% -500px ;
}
/* 设置选择城市盒子div 中城市em的 */
/*color padding-left*/
.choose-city-box .em-city{
color: #fff;
/*padding-left:5px ;*/
}
/*设置 收藏海尔商城a 的*/
/*display float margin padding-left margin-top background*/
.a-fav-ehaier{
/*设置为行内元素*/
display: inline;
/*设置左浮动*/
float: left;
/*设置外边距上下0，左右20px*/
margin: 0 20px;
/*设置左内边距20px*/
padding-left:20px;
/*设置上边距20px*/
margin-top:8px ;
/*设置背景图像*/
background:url(../img/base.png) no-repeat 0px -900px ;
}
/*设置 微信容器div 的*/
/*display padding-left line-height background*/
.s-weixin-box{
display: inline;
padding-left:20px ;
line-height:34px ;
background:url(../img/base.png) no-repeat 0px -652px ;
}
/*设置 微信容器div中 “微信下载”下拉框容器div的*/
/*display z-index position left top*/
.s-weixin-box .s-weixin-top{
/*display: none;此元素不会被显示。*/
display: none;
/*
z-index 属性指定一个元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
auto 默认。堆叠顺序与父元素相等。
number 设置元素的堆叠顺序。
inherit 规定应该从父元素继承 z-index 属性的值。
*/
z-index:2 ;
/*
设置为绝对定位
是相对于离元素最近的设置了绝对或相对定位的父元素决定的
脱离后原来的位置相当于是空的，下面的元素会来占据位置。
配合z-index这样就达到了鼠标在上面会出现二维码 但不会影响其他元素的效果
*/
position: absolute;
left: 330px;
top: 23px;
}
/*设置 微信容器div:hover伪类选择器 中 “微信下载”下拉框容器div的*/
.s-weixin-box:hover .s-weixin-top{
/*:hover伪类选择器 在鼠标移到链接上时添加的特殊样式。*/
/*达到鼠标移动到微信容器div的时候
使微信下载下拉框的display重置为block
从而使微信下载下拉框显示出来*/
display: block;
}
/*同微信的部分一样*/
.s-app-box{
display: inline;
padding-left:20px ;
line-height:34px ;
background:url(../img/base.png) no-repeat -151px -601px;
}
.s-app-box .s-app-top{
display:none ;
/*设置绝对定位*/
position: absolute;
left: 381px;
top: 23px;
/*指定被选中元素的堆叠顺序*/
z-index: 2;
}
.s-app-box:hover .s-app-top{
display: block;
}
/*设置 头部右侧容器div 的*/
/* float */
.all-haeder-bor{
float: right;
}
/*设置头部右侧容器div 中 无序列表ul 中 li的*/
/* display padding line-height */
.all-haeder-bor .ul-topnav li{
/* 设置为行内块 达到使列表的各项可以在一行出现*/
display: inline-block;
padding: 5px;
line-height:24px ;
}
/*-----------------------------------------------------------------------*/
/*设置身体容器 div 的*/
/*width height background-color*/
.all-header-cont{
width: 100%;
height: 82px;
background-color:#FFFFFF ;
}
/*设置身体容器div 中 包装容器内容div的大小 */
.all-header-cont .wrapper1{
width:1190px ;
height:100% ;
}
/*设置身体容器div 中 包装容器内容div 中 左侧h1的*/
/* float width height */
.all-header-cont .h1-site{
float: left;
width: 390px;
height:49px ;
}
/*设置身体容器div 中 包装容器内容div 中 左侧h1 中 a的*/
/*display width height padding background*/
.all-header-cont .h1-site a{
display: inline-block;
width: 135px;
height:65px ;
padding:19px 0 0 10px ;
background:url(../img/base.png) no-repeat 0px 12px;
}
/*设置身体容器div 中 包装容器内容div 中 左侧h1 中 img的*/
/*width height margin-right float*/
.all-header-cont .h1-site img{
width: 170px;
height:60px ;
margin-right:60px ;
/*在父元素h1 的右边浮动 */
float: right;
}
/*设置 身体容器div 中 内容包装容器div 中 搜索框容器div 的*/
/*width float height margin-left padding*/
.all-search{
width:490px ;
/* h1浮动了已经所有会排在h1的后面 达到在两个图片后面的效果*/
float: left;
height: 55px;
margin-left: 20px;
/*上 左右 下*/
padding: 14px 0 0;
}
/*设置搜索框容器div 中 的文本输入框 的*/
/*width height padding line-height border border-right*/
.all-search .text-search{
width:440px ;
height: 25px;
padding: 2px 5px ;
/*达到输入的文字会垂直归中的效果*/
line-height:25px ;
border: 1px solid #CCC;
/*消除右侧边框*/
border-right:0 ;
}
/*设置 搜索框容器div 中 提交框 的*/
/* float border margin-right width height line-height background*/
.all-search .but-search{
/*使提交框浮动到 搜索框的右侧*/
float: right;
border:none ;
margin-right:5px ;
width:34px ;
height:31px;
line-height:31px ;
background:url(../img/base.png) no-repeat 0px -1100px;
}
/*设置 搜索框容器div 中 热门搜索字 的 */
/*width height line-height */
.all-search .hot-words{
width:429px ;
height: 24px;
line-height:18px ;
}
.all-search .hot-words ul li{
/*这个和上面的那个达到了热点搜索在搜索框下边的效果*/
/*使文字在左侧浮动 否则会出现在提交框的底部文档流中而被遮挡*/
float: left;
padding: 3px;
}
/*设置 搜索框容器div 中 右侧承诺容器div的*/
/* float width height*/
.all-search .head-promise{
float: right;
width: 252px;
height: 67px;
}
/*设置 搜索框容器div 中 右侧承诺容器div 中 的3个a 的*/
/*display width height padding-top padding-left background*/
.a-promiseFreeship{
/*设置为行内块 以便于设置宽度和高度*/
display: inline-block;
width:60px ;
height: 17px;
/*这些内边距的设置为了给图片腾位置*/
padding-top: 36px;
padding-left:30px ;
background: url(../img/base.png) no-repeat 50% -240px;
}
.a-promiseDeliverinstall{
display: inline-block;
width: 48px;
height: 17px;
padding-top: 36px;
padding-left:30px ;
background: url(../img/base.png) no-repeat 50% -160px;
}
.a-promiseSatisfy{
display: inline-block;
width: 60px;
height: 17px;
padding-top: 36px;
padding-left:30px ;
background: url(../img/base.png) no-repeat 50% -1400px;
}
/*-----------------------------------------------------------------------*/
/*设置导航链接容器div 的*/
/*float width height background position*/
.nav{
float: left;
width:100% ;
height: 40px;
background: #333;
/*相对定位 */
position: relative;
}
/*设置导航链接容器div 中 导航内容容器div 中 清除浮动容器div 中 类型列表ul 中 的 p*/
/*
float width height line-height
text-align color font-size background-color
*/
.nav .clearfix .all-category-box p{
/*设置左侧浮动 便于设置大小 */
float: left;
width:192px ;
height:40px ;
line-height: 40px;
/*
left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
inherit 规定应该从父元素继承 text-align 属性的值。
*/
text-align: center;
color: #FFF;
/* 1em=16px */
font-size: 1.35em;
background-color:#055AA9 ;
}
/*设置导航链接容器div 中 导航内容容器div 中 清除浮动容器div 中 类型列表ul 的*/
.nav .clearfix .all-category-box{
/*设置相对定位*/
position:relative;
}
/*设置类型总容器div的*/
/*display width height position left top*/
.all-category-box-top{
/*display: none;此元素不会被显示。达到隐藏的目的*/
display:none ;
width: 1188px;
height:425px ;
/*绝对定位 上移42px */
position: absolute;
left:0px;
top: 42px;
}
/*设置导航链接容器div 中 导航内容容器div 中 清除浮动容器div 中 类型列表ul 中列表中容器div的*/
/* display */
.nav .clearfix .all-category-box:hover .all-category-box-top{
/*:hover伪类选择器 ，当鼠标移动到导航内容容器的时候
被选中的列表中容器div会变为块元素 显现出来*/
display: block;
}
/*---------“商品分类”下拉列表----------------*/
/*设置类型小容器1~6的*/
/* float width height padding background-color border-right*/
.all-category-box-top1{
float: left;
width:157px ;
height:350px ;
padding: 0 20px;
background-color: #C0C8D0;
border-right:1px solid #FFFFFF;
}
/*设置类型小容器1~6 中 小类型自定义列表1~6_6 的*/
/*line-height*/
.dl-category-box-top1 dt{
/*
normal 默认。设置合理的行间距。
number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。
inherit 规定应该从父元素继承 line-height 属性的值。line-height：设置以百分比计的行高
*/
/*设置以百分比计的行高：基于当前文字的百分之240的行间距*/
line-height:240% ;
}
/*设置类型小容器1~6 中 小类型自定义列表1~6_6 中 a 的*/
/*color font-weight*/
.dl-category-box-top1 dt a{
color: #005AAB;
/*
font-weight：
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
*/
font-weight: bold;
}
.all-category-box-top2{
float: left;
width:157px ;
height:350px ;
padding: 0 20px;
border-right:1px solid #FFFFFF;
background-color: #C0C8D0;
}
.dl-category-box-top2 dt{
line-height:240% ;
}
.dl-category-box-top2 dt a{
color: #005AAB;
font-weight: bold;
}
.all-category-box-top3{
float: left;
width:157px ;
height:350px ;
padding: 0 20px;
border-right:1px solid #FFFFFF;
background-color:#C0C8D0;
}
.dl-category-box-top3 dt{
line-height:240% ;
}
.dl-category-box-top3 dt a{
color: #005AAB;
font-weight: bold;
}
.all-category-box-top4{
float: left;
width:157px ;
height:350px ;
padding: 0 20px;
border-right:1px solid #FFFFFF;
background-color: #C0C8D0;
}
.dl-category-box-top4 dt{
line-height:240% ;
}
.dl-category-box-top4 dt a{
color: #005AAB;
font-weight: bold;
}
.all-category-box-top5{
float: left;
width:157px ;
height:350px ;
padding: 0 20px;
border-right:1px solid #FFFFFF;
background-color:#C0C8D0;
}
.dl-category-box-top5 dt{
/*line-height:240% ;*/
margin-top: 20px;
}
.dl-category-box-top5 dt a{
color: #005AAB;
font-weight: bold;
}
.all-category-box-top6{
float: left;
width:157px ;
height:350px ;
padding: 0 20px;
background-color:#C0C8D0 ;
}
.dl-category-box-top6 dt{
/*line-height:240% ;*/
margin-top: 20px;
}
.dl-category-box-top6 dt a{
color: #005AAB;
font-weight: bold;
}
/*设置类型小容器7的*/
/*clear width height line-height text-align border-top background-color*/
.all-category-box-top7{
clear: both;
width: 1188px;
height: 35px;
line-height:35px ;
text-align: center;
border-top: 1px solid #FFFFFF;
background-color: #C0C8D0;
}
/*“商品分类”下拉列表到此结束*/
/*设置导航链接容器div 中 清除浮动容器div 中 定义类型列表ul2 中 li的*/
/*float padding line-height text-align*/
.nav .clearfix ul li{
float: left;
padding: 0 24px;
line-height:40px ;
text-align: center;
}
/*设置导航链接容器div 中 清除浮动容器div 中 定义类型列表ul2 中 li的*/
/*:hover{background}*/
.nav .clearfix ul li:hover{
/*鼠标移动到该区域后变色*/
background:#005AA9 ;
}
/*设置导航链接容器div 中 清除浮动容器div 中 定义类型列表ul2 中 li 中 a的*/
/*display font-size color */
.nav .clearfix ul li a{
display: block;
/* 1em=16px */
font-size: 1.34em;
color:#FFFFFF ;
}
/*设置导航链接容器div 中 内容容器 中 右侧部分购物车容器div的*/
/*width height background-color position left top*/
.nav .mini-cart{
width:154px ;
height: 40px;
background-color:#626262 ;
/*绝对定位 左移1116px */
position: absolute;
left: 1116px;
top: 0px;
}
/*设置导航链接容器div 中 内容容器 中 右侧部分购物车容器div 中 p的*/
/*height background*/
.nav .mini-cart .p-mini-cart{
height:40px ;
background: url(../img/base.png) no-repeat 16px -337px;
}
/*右侧部分购物车容器div 中 span购物车 的*/
/*line-height padding-left color font-size*/
.p-mini-cart .s-title{
line-height: 40px;
padding-left:40px ;
color: #FFF;
font-size: 1.18em;
}
/*-----------------------------------------------------------------------*/
/*设置导航栏的大图片容器div的*/
/*width height*/
#banner{
width:1394px ;
height: 470px;
}
/*设置导航栏的热点图片容器div的*/
/*width height padding-top*/
.index-hot{
width: 1190px;
height:180px ;
padding-top:20px ;
}
/*设置热点图片小容器div的*/
/*padding-left width float*/
.index-hot-top{
padding-left:8px ;
width:225px;
float: left;
}
/*设置热点图片小容器div 中 热点图片img的*/
/*width*/
.index-hot-top img{
width:288px ;
}
/*设置精品推荐大容器div的*/
/*width height*/
.lazybox{
width:1190px ;
height:100%;
}
/*设置精品推荐大容器div 中 h2的*/
/*height line-height*/
.lazybox h2{
height:70px ;
line-height:70px ;
}
/*定义精品推荐大容器div 中 热卖商品列表容器div的*/
/*height border-bottom*/
.lazybox .excel-recom-list{
height:73px ;
border-bottom:1px solid #005AAB;
}
/*定义精品推荐大容器div 中 热卖商品列表容器div 中 1~8推荐列表的*/
/*display float height line-height padding border margin-left*/
.lazybox .dl-recom-item{
display: inline-block;
float: left;
height:55px ;
line-height: 16px;
padding: 8px 10px 8px 35px;
border: 1px solid #C6D5E4;
margin-left: 1px;
}
/*定义精品推荐大容器div 中 热卖商品列表容器div 中 1~8推荐列表 中各自定义列表dl的dt的*/
/* color font-weight*/
.lazybox .dl-recom-item dt{
color: #877069;
font-weight:bold ;
}
/*设置精品推荐大容器div 中 热卖商品列表容器div 中 推荐列表1的*/
/*width background padding text-align border margin height line-height font-size color */
.lazybox .dl-recom-item-1{
width:105px ;
background: #095BAD ;
padding: 8px 0;
text-align: center;
border: 1px solid #C6D5E4;
margin: -1px;
height:55px ;
line-height:55px ;
font-size: 1.3em;
color:#FFF ;
}
/*设置精品推荐大容器div 中 热卖商品列表容器div 中 推荐列表2~8的*/
/*width background*/
.lazybox .dl-recom-item-2{
width:94px ;
background: url(../img/index.png) no-repeat 11px 10px ;
}
/*设置精品推荐大容器div 中 热卖商品列表容器div 中 推荐列表2~8的鼠标移入状态*/
.lazybox .dl-recom-item-2:hover{
/*鼠标移入后推荐列表2~8背景颜色变色*/
background-color: #C6D5E4;
}
.lazybox .dl-recom-item-3{
width:72px ;
background: url(../img/index.png) no-repeat 11px -90px ;
}
.lazybox .dl-recom-item-3:hover{
background-color: #C6D5E4;
}
.lazybox .dl-recom-item-4{
width:106px ;
background: url(../img/index.png) no-repeat 8px -190px ;
}
.lazybox .dl-recom-item-4:hover{
background-color: #C6D5E4;
}
.lazybox .dl-recom-item-5{
width:131px ;
background: url(../img/index.png) no-repeat 8px -289px ;
}
.lazybox .dl-recom-item-5:hover{
background-color: #C6D5E4;
}
.lazybox .dl-recom-item-6{
width:83px ;
background: url(../img/index.png) no-repeat 11px -392px ;
}
.lazybox .dl-recom-item-6:hover{
background-color: #C6D5E4;
}
.lazybox .dl-recom-item-7{
width:130px;
background: url(../img/index.png) no-repeat 9px -489px ;
}
.lazybox .dl-recom-item-7:hover{
background-color: #C6D5E4;
}
.lazybox .dl-recom-item-8{
width:133px;
background: url(../img/index.png) no-repeat 10px -591px ;
}
.lazybox .dl-recom-item-8:hover{
background-color: #C6D5E4;
}
/*设置精品推荐大容器div 中 精品推荐列表ul的*/
/*width height margin*/
.lazybox .ul-excel{
width: 1200px;
height: 1200px;
margin: 0px 12px 12px 0px;
}
/*设置精品推荐大容器div 中 精品推荐列表ul 中 li的*/
/*width height padding-top padding-right float*/
.lazybox .li-excel{
width: 288px;
height: 382px;
padding-top:20px ;
padding-right:9px ;
float: left;
}
/*设置精品推荐大容器div 中 精品推荐列表ul 中 li 中 的标签a的*/
/*display color padding margin-top overflow white-space text-overflow*/
.li-excel .a-tag{
display: inline-block;
color: #FFF;
padding:3px 10px ;
margin-top:15px ;
overflow: hidden;
/*
white-space属性指定元素内的空白怎样处理。
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
*/
white-space: nowrap;
/*
text-overflow属性指定当文本溢出包含它的元素，应该发生什么。
clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。
*/
text-overflow: ellipsis;
}
/*************************热卖商品**********************************/
/*设置精品推荐大容器div 中 精品推荐列表ul 中 li 中h4商品描述的*/
/*width height padding position*/
.li-excel .h4-pro-title{
width:258px ;
height: 40px;
padding: 10px 15px 0;
/*相对定位*/
position: relative;
}
/*设置h4商品描述 中 商品名称span的*/
/*font-size display*/
.h4-pro-title .a-title{
font-size: 1.18em;
/*使名称独占一行*/
display: block;
}
/*设置h4商品描述 中 商品型号em的*/
/*color display*/
.h4-pro-title .em-info{
color: #888;
display: block;
}
/*设置h4商品描述 中 活动时间span的*/
/*display line-height overflow color text-overflow*/
.h4-pro-title .a-abs{
/*display: none;此元素不会被显示*/
display:none ;
line-height: 16px;
overflow: hidden;
color: #33BDFC;
/*显示省略符号来代表被修剪的文本。*/
text-overflow: ellipsis;
}
/*设置h4商品描述（鼠标移入后） 中 活动时间span的*/
/*display position left bottom*/
.h4-pro-title:hover .a-abs{
display: block;
/*绝对定位*/
position: absolute;
left: 0px;
bottom: -10px;
}
/*设置h4商品描述 中 商品价格em的*/
/*color font-size position right top*/
.h4-pro-title .em-price{
color: #005AA9;
font-size: 1.33em;
/*绝对定位*/
position: absolute;
right:15px ;
top: 10px;
}
/*设置精品推荐大容器div 中 精品推荐列表ul 中 li 中的img的*/
/*width height*/
.lazybox .li-excel img{
width: 288px;
height: 288px;
}
/*************************新品商品**********************************/
/*设置精品推荐大容器div 中 新品容器div的*/
/*height*/
.lazybox .index-news{
height: 326px;
}
/*设置精品推荐大容器div 中 新品大容器div 中新品发布h2的*/
/*height font-size line-height*/
.lazybox .index-news h2{
height:70px ;
font-size: 2em;
line-height:70px ;
}
/*设置新品商品容器的*/
/*border-left float*/
.resize-item{
border-left:1px solid #FFFFFF;
float: left;
}
/*************************定制商品**********************************/
/*设置精品推荐大容器div 中 定制商品大容器div的*/
/*height*/
.lazybox .index-diy{
height:326px ;
}
/*设置精品推荐大容器div 中 定制商品大容器div 中定制h2的*/
/*height font-size line-height*/
.lazybox .index-diy h2{
height: 70px;
font-size: 2em;
}
/*************************定制商品 完**********************************/
/*设置布告栏大容器div 中 互动社区容器div和知识堂容器div和商城公告容器div的*/
/*width height margin float*/
.bulletin-board .others{
width:380px ;
height: 243px;
margin:25px 0 0 16px ;
float: left;
}
/*************************互动社区**********************************/
/*设置布告栏大容器div 中 互动社区容器div 中 互动社区h3的*/
/*height font-size position left top*/
.bulletin-board .design-online h3{
height: 70px;
font-size:24px ;
position: absolute;
left: 0;
top: -50px;
}
/*设置布告栏大容器div 中 互动社区容器div的*/
/*margin-left background position top*/
.design-online{
margin-left: -1px;
background: url(../img/bg-zhishi.jpg) no-repeat;
position:relative ;
top: 50px;
}
/*设置布告栏大容器div 中 互动社区容器div 中 欢迎h1的*/
/*text-indent height background*/
.design-online h1{
/*
text-indent 属性规定文本块中首行文本的缩进。
注意： 负值是允许的。如果值是负数，将第一行左缩进。
*/
text-indent:-9999px ;
height:310px ;
background:url(../img/ckbbs.jpg ) no-repeat;
}
/*设置布告栏大容器div 中 互动社区容器div 中 互动社区标题的右边的span的*/
/*display width height background position left top*/
.design-online .go-brownLeft{
display:inline-block;
width:50px ;
height: 50px;
background:url(../img/index.png) no-repeat 18px -700px ;
position: absolute;
left: 90px;
top: 0px;
}
/*设置布告栏大容器div 中 互动社区容器div 中图片img的*/
/*position top left*/
.design-online .img{
position: absolute;
top:35px;
left: 25px;
}
/*设置布告栏大容器div 中 互动社区容器div 中内容列表的*/
/*font-sizefont-size width height position*/
.design-online .Left{
font-sizefont-size:14px;
width:120px;
height: 80px;
position: absolute;
top:30px;
left:170px;
}
/*设置布告栏大容器div 中 互动社区容器div 中内容列表 中 li的*/
/*margin*/
.design-online ul>li{
margin: 5px auto;
}
/*************************互动社区 完**********************************/
.design-online .go-brownCenter{
display:inline-block;
width:50px ;
height: 50px;
background:url(../img/index.png) no-repeat -44px -700px ;
position: absolute;
left: 65px;
top: 0px;
}
.design-online .Center,.Right{
margin-top:30px ;
font-size:14px ;
padding-left: 20px;
}
.design-online .go-brownRight{
display:inline-block;
width:50px ;
height: 50px;
background:url(../img/index.png) no-repeat -106px -700px;
position: absolute;
left: 90px;
top: 0px;
}
/*剩下的俩个同互动社区*/
/*清除浮动容器的:after :before的*/
/*content clear display height visibility*/
.clarfex:after,.clarfex:before{
/*content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。*/
content: "";
/*
clear属性指定段落的左侧或右侧不允许浮动的元素。
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。
*/
clear: both;
display: block;
height:0 ;
/*
visibility属性指定一个元素是否是可见的。
visible 默认值。元素是可见的。
hidden 元素是不可见的。
collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
inherit 规定应该从父元素继承 visibility 属性的值。
*/
visibility: hidden;
}
.clarfex{*zoom: 1;}
/*清除浮动*/
/******************************售后**************************************/
/*设置售后大容器的*/
/*width height*/
.all-services{
width: 1190px;
height: 65px;
}
/*设置售后大容器 中 售后小容器左侧 中 售后服务和保修政策p的*/
/*line-height font-size margin-left font-weight*/
.all-services .services-left p{
line-height: 30px;
font-size: 1.18em;
margin-left:8px ;
/*加粗*/
font-weight: bold;
}
/*设置售后大容器 中 售后小容器左侧 中 售后列表ul 中 li的*/
/*float padding-left*/
.all-services .services-left ul li{
float: left;
padding-left:8px;
}
/*设置售后大容器 中 售后小容器右侧 中 微信客服span的*/
/*display float margin-right padding-left background*/
.services-right-weixin{
display: inline-block;
float: right;
margin-right:60px ;
padding-left: 30px;
/*精灵图 */
background: url(../img/base.png) no-repeat -1px -695px ;
}
/*设置售后大容器 中 售后小容器右侧 中 在线客服span的*/
/*display float margin-right padding-left background*/
.services-right-kefu{
display: inline-block;
float: right;
margin-right:60px ;
padding-left:30px ;
background: url(../img/base.png) no-repeat -1px -800px ;
}
/*-------------------------------中部末----------------------------*/
.all-help-wrap{
width:1200px ;
height: 91px;
border-top: 1px solid #DDD;
}
.all-help-wrap dt{
padding: 16px 0px 6px 20px;
font-weight: bold;
font-size: 1.18em;
}
.all-help-wrap dd{
padding-left:20px ;
float: left;
}
.dl-help-wrap{
width: 235px;
height:69px ;
border-left:1px solid #DDDDDD ;
float: left;
}
/*-------------------------------底部----------------------------*/
/*设置底部容器div的*/
/*width height padding background-color*/
.all-footer{
width:100% ;
height: 141px;
padding:20px 0 10px ;
background-color: #E1E1E1;
}
/*设置底部容器div 中 文字p*/
/*text-align padding-top line-height*/
.all-footer p{
/*设置文字居中*/
text-align:center;
padding-top: 5px;
line-height:2em ;
}
/*设置底部容器div 中 荣耀p*/
/*padding-top*/
.all-footer .p-all-honor{
padding-top:5px ;
}
/*同微信和app部分*/
.all-tipbar-show{
width: 60px;
height: 274px;
position: fixed;
right: 0px;
bottom: 0px;
}
.all-tipbar-show-top{
display:inline-block;
width: 60px;
height: 140px;
padding-bottom:1px ;
background:url(../img/ballon.png) no-repeat -3px 20px ;
}
/*这里是微信扫描弹出框*/
.all-tipbar-show-top-left img{
height: 180px;
}
.all-tipbar-show-top-left{
display:none ;
position: fixed;
right: 54px;
bottom: 125px;
}
.all-tipbar-show-top:hover .all-tipbar-show-top-left{
display: block;
}
/*弹出框到此结束*/
.all-tipbar-show-center{
display: inline-block;
width:60px ;
height: 64px;
background:url(../img/base.png) no-repeat -108px -1250px;
}
.all-tipbar-show-bottom{
display: inline-block;
width:60px ;
height: 64px;
background:url(../img/base.png) no-repeat #BDBDBD -120px -1150px ;
}
.all-tipbar-show-bottom:hover{
background-color: #095BAD;
}
