当你拿到一张背景图像这样的设计稿，是否有点抓狂。
今天从DP的老同事那里学到一招，把背景切成几块，仍然可以精确拼合。
View Code
*{ margin: 0; padding: 0; } body{ font-family: Arial, Helvetica, sans-serif; font-size: 12px; color:#545454; background:#f7f3d9; } a.logo{ border:0; float: left; } a.logo:hover{ background: #fff; } img{ border:0; } ul{ list-style: none; } input{ padding: 5px; } /* 对齐方式 */ .floatCenter{ margin: 0 auto; } .floatLeft{ float: left; } .floatRight{ float: right; } .underLine{ text-decoration: underline; } a:link,a:visited,a:hover, a:active{color:#545454; font-size:12px;text-decoration:none} a.R:link, a.R:visited{padding:2px 1px 0 1px; color:#7c4f23; font-size:12px;text-decoration:none} a.R:hover, a.R:active{padding:2px 1px 0 1px; color:#7c4f23; font-size:12px;text-decoration: underline} a.B:link, a.B:visited{padding:2px 1px 0 1px; color:#6666cc;font-size:12px; text-decoration:none} a.B:hover, a.B:active{padding:2px 1px 0 1px; color:#FFF;font-size:12px; background:#6666cc; text-decoration:none} a.W:link, a.W:visited{padding:2px 1px 0 1px; color:#FFFFFF;font-size:12px; text-decoration:none} a.W:hover, a.W:active{padding:2px 1px 0 1px; color:#FFFFFF;font-size:12px;text-decoration: underline} a.RR:link, a.RR:visited{color:#ff234a; font-size:14px; font-weight:bold;text-decoration:none} a.RR:hover, a.RR:active{color:#ff234a; font-size:14px; font-weight:bold;text-decoration: underline} /*----------------- 弹出框格式 ------------------- */ .info-box{ margin:20px; padding:0 10px; color:#ff0000; font-size:14px; font-weight:bold; text-align:center; } /*----------------- 主体 ------------------- */ .bg1{width:100%; background:url(../images/bg1.jpg) no-repeat center top; float:left;} .bg2{width:100%;background:url(../images/bg2.jpg) no-repeat center 312px;zoom:1;float:left;} .bg3{width:100%; background:url(../images/bg3.jpg) no-repeat center 624px;zoom:1;float:left;} .bg4{width:100%;background:url(../images/bg4.jpg) no-repeat center 998px;zoom:1;float:left;} .bg5{width:100%;background:url(../images/bg5.jpg) no-repeat center 1372px;zoom:1;float:left;} .bg6{width:100%;background:url(../images/bg6.jpg) no-repeat center 1746px;zoom:1;float:left;} .bg7{width:100%;background:url(../images/bg7.jpg) no-repeat center 2020px;zoom:1;float:left;} .bg8{width:100%;background:url(../images/bg8.jpg) no-repeat center 2172px;zoom:1;float:left;} .bg9{width:100%;background:url(../images/bg9.jpg) no-repeat center 2326px;zoom:1;float:left;} #box{width:1000px;margin:0 auto;} #box .banner01{width:1000px;height:329px; background:url(../images/banner01.jpg) no-repeat; float:left;} #box .banner02{width:1000px;height:281px; background:url(../images/banner02.jpg) no-repeat; float:left;} #box .title01{width:1000px;height:60px;float:left; background:url(../images/title01.jpg) no-repeat;} #box .title02{width:1000px;height:62px;float:left; background:url(../images/title02.jpg) no-repeat;} #box .content01{width:987px;background:#987853; float:left;padding:5px 0 0 13px; position:relative} #box .content01 ul li{width:326px;height:330px;float:left;} #box .content01 ul li .item_all{width:291px;height:298px;float:left;padding:17px 20px 15px 15px; background:url(../images/kuang.jpg) no-repeat} .pic{width:291px; float:left;} .text{width:291px;height:101px; margin-top:8px;float: left; background:#ffefce} .text .detail{width:193px;height:91px;float:left;padding:5px} .text .detail h3{ font-size:14px; font-weight:bold; text-align:center;color:#000000;margin:3px 0} .text .detail p{ line-height:15px;} .text .detail span{color:#c3100a;text-decoration:line-through; } .text .btn{width:88px;height:33px;float:left;} .text .price{width:88px;height:68px;float:left; background:#c3100a; line-height:68px; color:#fcdfa4; font-size:28px; text-align:center; font-family:Georgia} #box .content01 .detail01{ width:362px; height:360px; float:left; position:absolute; left: 319px; top: 318px; } #box .content02{width:987px;background:#6e7c27; float:left;padding:5px 0 0 13px; position:relative} #box .content02 ul li{width:326px;height:330px;float:left;} #box .content02 ul li .item_all2{width:291px;height:298px;float:left;padding:17px 20px 15px 15px; background:url(../images/kuang2.jpg) no-repeat} #box .content02 .detail02{ width:362px; height:360px; float:left; position:absolute; left: 319px; top: -9px; } .header_header{height: 25px;position: relative;width: 1000px;} a.logo,a.logo:hover{background: url(../images/logo_top.png) no-repeat;display: block;height: 25px;width: 75px;} .co{height: 30px;position: absolute;right: 0;top: 0px;width: 9px;} .top_nav{ color: #DBCCA5; left: 86px; padding-top: 3px; position: absolute; top: 3px; width: 538px; } .top_nav a{color: #e47f30;text-decoration: none;} .top_nav a:hover{background: none;color: #e47f30;text-decoration: underline;} .Footer{width:100%;clear:both;margin:0 auto; padding-top:5px} .PartnerFooter{clear:both;width:778px;margin:auto;text-align:center;} .Footer .FB{ text-align:right;padding:0 0 3px 0;color:#FFFFFF} .Footer .logo{width:61px;height:20px;float:left; background:url(../images/logo.png) no-repeat} .Footer .SI{padding:4px 0 4px 5px;float:left;color:#FFFFFF} .Footer .SL{padding:4px 5px 4px 0;float:right;color:#FFFFFF;} .Footer .SA{clear:both;margin:0;padding:3px 0 5px 5px;color:#ffffff;text-align:left;} .backToTop { display: none; width: 100px;height:59px; background:url(../images/top.png) no-repeat; position: fixed; _position: absolute; right: 10px; bottom: 100px; _bottom: "auto"; cursor: pointer; opacity: .6; }
View Code
<body> <div class="bg1"> <div class="bg2"> <div class="bg3"> <div class="bg4"> <div class="bg5"> <div class="bg6"> <div class="bg7"> <div class="bg8"> <div class="bg9"> <div id="box"> <div class="banner01"><div class="header_header"> <a class=logo href="http://www.dianping.com/beijing" target="_blank" title="大众点评网"></a> <p class="top_nav"><a href="http://www.dianping.com/beijing" target="_blank">首页</a> | <a href="http://www.dianping.com/promo/beijing" target="_blank">优惠券</a> | <a target="_blank" href="http://t.dianping.com/beijing">团购</a> | <a target="_blank" href="http://q.dianping.com">签到</a> | <a href="http://www.dianping.com/card/beijing">会员卡</a> | <a href="http://www.dianping.com/beijing/group">社区</a> | <a onclick="pageTracker._trackPageview('dp_head_mobile_beijing');" href="http://www.dianping.com/events/m/index.htm">手机版</a> | <a onclick="pageTracker._trackPageview('dp_head_help_beijing');" href="http://www.dianping.com/help">帮助</a></p> <div class="co"></div> </div></div> <div class="banner02"></div> <div class="title01"></div> <div class="content01"> <div class="detail01"><img src="images/detail01.png" width="362" height="360" /></div> <ul> <li> <div class="item_all"> <div class="pic"><a href="http://t.dianping.com/deal/59537" target="_blank"><img src="images/pic_01.jpg" width="291" height="181" /></a></div> <div class="text"> <div class="detail"> <h3>小辫子大闸蟹【388】</h3> <p>-阳澄湖大闸蟹蟹卡（价值388元）</p> <p>- 4对装 公蟹（3.3-3.6两/只，4只） 母蟹（2.2-2.5两/只，4只） </p> <h3>原价:<span>￥388</span></h3> </div> <div class="btn"><a href="http://t.dianping.com/deal/59537" target="_blank"><img src="images/btn.jpg" width="88" height="33" /></a></div> <div class="price">￥212</div> </div> </div> </li> <li> <div class="item_all"> <div class="pic"><a href="http://t.dianping.com/deal/59549" target="_blank"><img src="images/pic_02.jpg" width="291" height="181" /></a></div> <div class="text"> <div class="detail"> <h3>小辫子大闸蟹【588】</h3> <p>-阳澄湖大闸蟹蟹卡（价值588元）</p> <p>- 4对装 公蟹（3.8-4.2两/只，4只） 母蟹（2.6-2.8两/只，4只）</p> </p> <h3>原价:<span>￥588</span></h3> </div> <div class="btn"><a href="http://t.dianping.com/deal/59549" target="_blank"><img src="images/btn.jpg" width="88" height="33" /></a></div> <div class="price">￥318</div> </div> </div> </li> <li> <div class="item_all"> <div class="pic"><a href="http://t.dianping.com/deal/59538" target="_blank"><img src="images/pic_03.jpg" width="291" height="181" /></a></div> <div class="text"> <div class="detail"> <h3>小辫子大闸蟹【888】</h3> <p>-阳澄湖大闸蟹蟹卡（价值888元）</p> <p>- 4对装 公蟹（4.3-4.6两/只，4只） 母蟹（2.8-3.2两/只，4只）</p> <h3>原价:<span>￥888</span></h3> </div> <div class="btn"><a href="http://t.dianping.com/deal/59538" target="_blank"><img src="images/btn.jpg" width="88" height="33" /></a></div> <div class="price">￥468</div> </div> </div> </li> <li> <div class="item_all"> <div class="pic"><a href="http://t.dianping.com/deal/60175" target="_blank"><img src="images/pic_04.jpg" width="291" height="181" /></a></div> <div class="text"> <div class="detail"> <h3>感谢您【388】</h3> <p>- 现金贵宾卡（1张，价值388元）</p> <p>-卡内包含：雄蟹3.0-3.3两（4只），雌蟹2.0-2.3两（4只） </p> <h3>原价:<span>￥388</span></h3> </div> <div class="btn"><a href="http://t.dianping.com/deal/60175" target="_blank"><img src="images/btn.jpg" width="88" height="33" /></a></div> <div class="price">￥242</div> </div> </div> </li> <li></li> <li> <div class="item_all"> <div class="pic"><a href="http://t.dianping.com/deal/60177" target="_blank"><img src="images/pic_05.jpg" width="291" height="181" /></a></div> <div class="text"> <div class="detail"> <h3>感谢您【688】</h3> <p>- 现金贵宾卡（1张，价值688元）</p> <p>-卡内包含：雄蟹3.5-3.9两（4只），雌蟹2.4-2.8两（4只）</p> <h3>原价:<span>￥688</span></h3> </div> <div class="btn"><a href="http://t.dianping.com/deal/60177" target="_blank"><img src="images/btn.jpg" width="88" height="33" /></a></div> <div class="price">￥430</div> </div> </div> </li> <li> <div class="item_all"> <div class="pic"><a href="http://t.dianping.com/deal/58122" target="_blank"><img src="images/pic_06.jpg" width="291" height="181" /></a></div> <div class="text"> <div class="detail"> <h3>蟹状元【团购1（4套餐）】</h3> <p>-阳澄湖大闸蟹精品礼卡1张</p> <p>-有<strong>A-D四款</strong>套餐可选</p> <p>-蟹肉紧致爽嫩,蟹黄蟹膏丰腴饱满</p> <h3>原价:<span>￥238</span></h3> </div> <div class="btn"><a href="http://t.dianping.com/deal/58122" target="_blank"><img src="images/btn.jpg" width="88" height="33" /></a></div> <div class="price">￥166</div> </div> </div> </li> <li> <div class="item_all"> <div class="pic"><a href="http://t.dianping.com/deal/58124" target="_blank"><img src="images/pic_07.jpg" width="291" height="181" /></a></div> <div class="text"> <div class="detail"> <h3>蟹状元【团购2（6套餐）】</h3> <p>-阳澄湖大闸蟹精品礼卡1张</p> <p>-有<strong>A-F六款</strong>套餐可选</p> <p>-蟹肉紧致爽嫩,蟹黄蟹膏丰腴饱满</p> <h3>原价:<span>￥318</span></h3> </div> <div class="btn"><a href="http://t.dianping.com/deal/58124" target="_blank"><img src="images/btn.jpg" width="88" height="33" /></a></div> <div class="price">￥219</div> </div> </div> </li> <li> <div class="item_all"> <div class="pic"><a href="http://t.dianping.com/deal/58123" target="_blank"><img src="images/pic_08.jpg" width="291" height="181" /></a></div> <div class="text"> <div class="detail"> <h3>蟹状元【团购3（9套餐）】</h3> <p>-阳澄湖大闸蟹精品礼卡1张</p> <p>-有<strong>A-I九款</strong>套餐可选</p> <p>-蟹肉紧致爽嫩,蟹黄蟹膏丰腴饱满</p> <h3>原价:<span>￥398</span></h3> </div> <div class="btn"><a href="http://t.dianping.com/deal/58123" target="_blank"><img src="images/btn.jpg" width="88" height="33" /></a></div> <div class="price">￥275</div> </div> </div> </li> </ul> </div> <div class="title02"></div> <div class="content02"> <div class="detail02"><img src="images/detail02.png" width="362" height="360" /></div> <ul> <li> <div class="item_all2"> <div class="pic"><a href="http://t.dianping.com/deal/62182" target="_blank"><img src="images/pic_10.jpg" width="291" height="181" /></a></div> <div class="text"> <div class="detail"> <h3>【汇和蟹府】</h3> <p>-汇和蟹府礼尊金卡张</p> <p>-有A-E共5款套餐可选</p> <p>-原生态野生蟹!20年前的好味道!</p> <h3>原价:<span>￥665</span></h3> </div> <div class="btn"><a href="http://t.dianping.com/deal/62182" target="_blank"><img src="images/btn.jpg" width="88" height="33" ></a></div> <div class="price">￥595</div> </div> </div> </li> <li></li> <li> <div class="item_all2"> <div class="pic"><a href="http://t.dianping.com/deal/59539" target="_blank"><img src="images/pic_09.jpg" width="291" height="181" /></a></div> <div class="text"> <div class="detail"> <h3>小辫子大闸蟹【1288】</h3> <p>-阳澄湖大闸蟹蟹卡（价值1288元）</p> <p>- 4对装 公蟹（4.8-5.2两/只，4只） 母蟹（3.3-3.6两/只，4只） </p> <h3>原价:<span>￥1288</span></h3> </div> <div class="btn"><a href="http://t.dianping.com/deal/59539" target="_blank"><img src="images/btn.jpg" width="88" height="33" /></a></div> <div class="price">￥668</div> </div> </div> </li> <li> <div class="item_all2"> <div class="pic"><a href="http://t.dianping.com/deal/60176" target="_blank"><img src="images/pic_11.jpg" width="291" height="181" /></a></div> <div class="text"> <div class="detail"> <h3>感谢您【988】</h3> <p>- 现金贵宾卡（1张，价值988元）</p> <p>-卡内包含：雄蟹3.9-4.3两（4只），雌蟹2.9-3.3两（4只） </p> <h3>原价:<span>￥988</span></h3> </div> <div class="btn"><a href="http://t.dianping.com/deal/60176" target="_blank"><img src="images/btn.jpg" width="88" height="33" /></a></div> <div class="price">￥618</div> </div> </div> </li> <li> <div class="item_all2"> <div class="pic"><a href="http://t.dianping.com/deal/60174" target="_blank"><img src="images/pic_12.jpg" width="291" height="181" /></a></div> <div class="text"> <div class="detail"> <h3>感谢您【1688】</h3> <p>- 现金贵宾卡（1张，价值1688元）</p> <p>-卡内包含：雄蟹4.4-4.9两（4只），雌蟹3.4-3.7两（4只） </p> <h3>原价:<span>￥2130</span></h3> </div> <div class="btn"><a href="http://t.dianping.com/deal/60174" target="_blank"><img src="images/btn.jpg" width="88" height="33" /></a></div> <div class="price">￥1055</div> </div> </div> </li> <li> <div class="item_all2"> <div class="pic"><a href="http://t.dianping.com/deal/60173" target="_blank"><img src="images/pic_13.jpg" width="291" height="181" /></a></div> <div class="text"> <div class="detail"> <h3>感谢您【2288】</h3> <p>- 现金贵宾卡（1张，价值2288元）</p> <p>-卡内包含：雄蟹5.0-5.5两（4只），雌蟹3.8-4.0两（4只） </p> <h3>原价:<span>￥2288</span></h3> </div> <div class="btn"><a href="http://t.dianping.com/deal/60173" target="_blank"><img src="images/btn.jpg" width="88" height="33" /></a></div> <div class="price">￥1430</div> </div> </div> </li> </ul> </div> <div class="Footer"><div class="FL"></div> <span class="logo"><a href="http://www.dianping.com/shanghai" target="_blank"><img src="images/logo.png" width="60" height="20" /></a></span> <span class="SI">©2003-2012 dianping.com, All Rights Reserved. 沪B2-20040012</span><span class="SL"><a href="http://www.dianping.com/shanghai" target="_blank" class=B>首页</a> | <a href="http://www.dianping.com/promo/shanghai" class=B target="_blank">优惠券</a> | <a target="_blank" href="http://t.dianping.com/shanghai" class=B>团购</a> | <a target="_blank" href="http://q.dianping.com" class=B>签到</a> | <a href="http://www.dianping.com/card/shanghai" target="_blank" class=B>会员卡</a> | <a href="http://www.dianping.com/shanghai/group" target="_blank" class=B>社区</a> | <a href="http://www.dianping.com/events/m/index.htm" target="_blank" class=B>手机版</a> | <a href="http://www.dianping.com/help" target="_blank" class=B>帮助</a></span> <p class="SA">免责声明：站内会员言论仅代表个人观点,并不代表本站同意其说法或描述,本站不承担由此引起的法律责任。</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <script type="text/javascript" src="http://i3.dpfile.com/combo/_s_js_g.mt.min.js-_s_js_g.dp.min.js-_s_j_dp.min.js-_s_j_ui.min.js-_s_j_page_header.min.js-_s_res_ga.min.js/18_72_4_3_7.js"></script> <script type="text/javascript"> var pageTracker = _gat._getTracker("UA-464026-1"); pageTracker._addOrganic("soso", "w"); pageTracker._addOrganic("sogou", "query"); pageTracker._addOrganic("yodao", "q"); pageTracker._addOrganic("bing", "q"); pageTracker._addOrganic("gougou", "search"); pageTracker._initData(); pageTracker._initData(); window.addEvent('domready', function(){ new PopupPanel($("$m_h_mps"),$("$m_h_mp"),{adjust:{x:-10, y:15}, type:'c'}); // GA pageTracker._trackPageview('events/market/dazhaxie_tuan_120918'); }); </script> </body>