Banner——第四阶段考核——仿海尔商城网页
导读：HTML部分<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>伪海尔商城</titl...
HTML部分
!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>
| 4a 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_默认样式重置
/* 样式重置 */
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, "\5b8b\4f53", 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
/*让定宽块状元素左右居中*/
.container{
width: 1190px;
margin: auto auto;
/*左右居中*/
}
.clearfloat:after{
content: "#";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
CSS_2
/*————————————————————————————————定义头部——————————————————————————————*/
/*头部栏 */
/*设置头部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;
}
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： Banner——第四阶段考核——仿海尔商城网页
本文地址： https://pptw.com/jishu/6648.html