目录
- HTML部分
- CSS_默认样式重置
- CSS_1
- CSS_2
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>
<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><span class="s-app-box"><a href="">商城app<div class="s-app-top"><img src="img/qrehaier.png" alt="商城app"/></div></a></span><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>
<div class="all-header-cont"><div class="wrapper1 container"><h1 class="h1-site"><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><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>
<div class="nav"><div class="container"><div class="clearfix"><ul class="all-category-box"><p>商品分类</p><div class="all-category-box-top container"><div class="all-category-box-top1"><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><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><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><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><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><div class="all-category-box-top2"><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><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><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><div class="all-category-box-top3"><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><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><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><div class="all-category-box-top4"><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><dl class="dl-category-box-top4"><dt><a href="#">手机</a></dt><dd><a href="#">4G手机</a> |<a href="#"> 3G手机</a></dd></dl></div><div class="all-category-box-top5"><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><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><dl class="dl-category-box-top5"><dt><a href="#">家居</a></dt><dd><a href="#">电风扇</a> | <a href="#">LED台灯</a></dd></dl><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><div class="all-category-box-top6"><dl class="dl-category-box-top6"><dt><a href="#">洗护配方</a></dt><dd><a href="#">净洗配方</a></dd></dl><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><dl class="dl-category-box-top6"><dt><a href="#">延保服务</a></dt><dd><a href="#">延保卡</a></dd></dl></div><div class="all-category-box-top7"><a href="#">在线客服</a></div></div></ul><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 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>
<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>
<div class="lazybox container"><h2>精品推荐</h2><div class="excel-recom-list"><dl class="dl-recom-item dl-recom-item-1">热卖商品</dl><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><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><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><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><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><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><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 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 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 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 class="bulletin-board"><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 class="Left"><li><a href="##">· 社区搬家公告</a></li><li><a href="#">· 最新有奖活动</a></li><li><a href="#">· 家电百科知识</a></li></ul></div><div class="design-online others"><h3><a href="javascript:;">知识堂<span class="go-brownCenter"></span></a></h3><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 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><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><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; background-color: #fff;color: #3c3c3c;}
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,
dl, dt, dd, ul, ol, li,
pre,
fieldset, legend, button, input, textarea,
th, td
{margin: 0;padding: 0;
}
body,
button,
input,
select,
textarea
{font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
}h1 {font-size: 18px;
}
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;
}
small {font-size: 12px;
}
ul, ol {list-style: none;
}
a {text-decoration: none;color: #3c3c3c;
}
a:hover {text-decoration: underline;}
abbr[title], acronym[title]
{border-bottom: 1px dotted;cursor: help;
}
q:before, q:after
{content: "";}
fieldset, img {border: none;
}
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
#header-bar-box{width:100% ;height: 34px;background-color:#F6F6F6;position:relative ;
}
#header-bar-box .wrapper{width:1190px ;height: 34px;
}
.choose-city-box{float: left;line-height: 34px;
}
.choose-city-box .s-city{display: inline-block;width:30px;height: 22px;line-height:22px ;padding-right:20px ;background:url(../img/base.png) no-repeat 100% -500px ;
}
.choose-city-box .em-city{color: #fff;
}
.a-fav-ehaier{display: inline;float: left;margin: 0 20px;padding-left:20px;margin-top:8px ;background:url(../img/base.png) no-repeat 0px -900px ;
}
.s-weixin-box{display: inline;padding-left:20px ;line-height:34px ;background:url(../img/base.png) no-repeat 0px -652px ;
}
.s-weixin-box .s-weixin-top{display: none;z-index:2 ;position: absolute;left: 330px;top: 23px;
}
.s-weixin-box:hover .s-weixin-top{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;
}
.all-haeder-bor{float: right;
}
.all-haeder-bor .ul-topnav li{display: inline-block;padding: 5px;line-height:24px ;
}
.all-header-cont{width: 100%;height: 82px;background-color:#FFFFFF ;
}
.all-header-cont .wrapper1{width:1190px ;height:100% ;
}
.all-header-cont .h1-site{float: left;width: 390px;height:49px ;
}
.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;
}
.all-header-cont .h1-site img{width: 170px;height:60px ;margin-right:60px ;float: right;
}
.all-search{width:490px ;float: left;height: 55px;margin-left: 20px;padding: 14px 0 0;
}
.all-search .text-search{width:440px ;height: 25px;padding: 2px 5px ;line-height:25px ;border: 1px solid #CCC;border-right:0 ;}
.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;
}
.all-search .hot-words{width:429px ;height: 24px;line-height:18px ;
}
.all-search .hot-words ul li{float: left;padding: 3px;
}
.all-search .head-promise{float: right;width: 252px;height: 67px;
}
.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;
}
.nav{float: left;width:100% ;height: 40px;background: #333;position: relative;
}
.nav .clearfix .all-category-box p{float: left;width:192px ;height:40px ;line-height: 40px;text-align: center;color: #FFF;font-size: 1.35em;background-color:#055AA9 ;
}
.nav .clearfix .all-category-box{position:relative;
}
.all-category-box-top{display:none ;width: 1188px;height:425px ;position: absolute;left:0px;top: 42px;
}
.nav .clearfix .all-category-box:hover .all-category-box-top{display: block;
}
.all-category-box-top1{float: left;width:157px ;height:350px ;padding: 0 20px;background-color: #C0C8D0;border-right:1px solid #FFFFFF;
}
.dl-category-box-top1 dt{line-height:240% ;
}
.dl-category-box-top1 dt a{color: #005AAB;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{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{margin-top: 20px;
}
.dl-category-box-top6 dt a{color: #005AAB;font-weight: bold;
}
.all-category-box-top7{clear: both;width: 1188px;height: 35px;line-height:35px ;text-align: center;border-top: 1px solid #FFFFFF;background-color: #C0C8D0;
}
.nav .clearfix ul li{float: left;padding: 0 24px;line-height:40px ;text-align: center;
}
.nav .clearfix ul li:hover{background:#005AA9 ;
}
.nav .clearfix ul li a{display: block;font-size: 1.34em;color:#FFFFFF ;
}
.nav .mini-cart{width:154px ;height: 40px;background-color:#626262 ;position: absolute;left: 1116px;top: 0px;
}
.nav .mini-cart .p-mini-cart{height:40px ;background: url(../img/base.png) no-repeat 16px -337px;
}
.p-mini-cart .s-title{line-height: 40px;padding-left:40px ;color: #FFF;font-size: 1.18em;
}
#banner{width:1394px ;height: 470px;
}
.index-hot{width: 1190px;height:180px ;padding-top:20px ;
}
.index-hot-top{padding-left:8px ;width:225px;float: left;
}
.index-hot-top img{width:288px ;
}
.lazybox{width:1190px ;height:100%;
}
.lazybox h2{height:70px ;line-height:70px ;
}
.lazybox .excel-recom-list{height:73px ;border-bottom:1px solid #005AAB;
}
.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;
}
.lazybox .dl-recom-item dt{color: #877069;font-weight:bold ;
}
.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 ;
}
.lazybox .dl-recom-item-2{width:94px ;background: url(../img/index.png) no-repeat 11px 10px ;
}
.lazybox .dl-recom-item-2:hover{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;
}
.lazybox .ul-excel{width: 1200px;height: 1200px;margin: 0px 12px 12px 0px;
}
.lazybox .li-excel{width: 288px;height: 382px;padding-top:20px ;padding-right:9px ;float: left;
}
.li-excel .a-tag{display: inline-block;color: #FFF;padding:3px 10px ;margin-top:15px ;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
.li-excel .h4-pro-title{width:258px ;height: 40px;padding: 10px 15px 0;position: relative;
}
.h4-pro-title .a-title{font-size: 1.18em;display: block;
}
.h4-pro-title .em-info{color: #888;display: block;
}
.h4-pro-title .a-abs{display:none ;line-height: 16px;overflow: hidden;color: #33BDFC;text-overflow: ellipsis;
}
.h4-pro-title:hover .a-abs{display: block;position: absolute;left: 0px;bottom: -10px;
}
.h4-pro-title .em-price{color: #005AA9;font-size: 1.33em;position: absolute;right:15px ;top: 10px;
}
.lazybox .li-excel img{width: 288px;height: 288px;
}
.lazybox .index-news{height: 326px;
}
.lazybox .index-news h2{height:70px ;font-size: 2em;line-height:70px ;
}
.resize-item{border-left:1px solid #FFFFFF;float: left;
}
.lazybox .index-diy{height:326px ;
}
.lazybox .index-diy h2{height: 70px;font-size: 2em;
}
.bulletin-board .others{width:380px ;height: 243px;margin:25px 0 0 16px ;float: left;
}
.bulletin-board .design-online h3{height: 70px;font-size:24px ;position: absolute;left: 0;top: -50px;
}
.design-online{margin-left: -1px;background: url(../img/bg-zhishi.jpg) no-repeat;position:relative ;top: 50px;
}
.design-online h1{text-indent:-9999px ;height:310px ;background:url(../img/ckbbs.jpg ) no-repeat;
}
.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;
}
.design-online .img{position: absolute;top:35px;left: 25px;
}
.design-online .Left{font-sizefont-size:14px;width:120px;height: 80px;position: absolute;top:30px;left:170px;
}
.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;
}
.clarfex:after,.clarfex:before{content: "";clear: both;display: block;height:0 ;visibility: hidden;
}
.clarfex{*zoom: 1;}
.all-services{width: 1190px;height: 65px;
}
.all-services .services-left p{line-height: 30px;font-size: 1.18em;margin-left:8px ;font-weight: bold;
}
.all-services .services-left ul li{float: left;padding-left:8px;
}
.services-right-weixin{display: inline-block;float: right;margin-right:60px ;padding-left: 30px;background: url(../img/base.png) no-repeat -1px -695px ;
}
.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;
}
.all-footer{width:100% ;height: 141px;padding:20px 0 10px ;background-color: #E1E1E1;
}
.all-footer p{text-align:center;padding-top: 5px;line-height:2em ;
}
.all-footer .p-all-honor{padding-top:5px ;
}
.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;
}
