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> | 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_默认样式重置
/* 样式重置 */ 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; }
