负margin一些奇葩的布局技巧
copy_from_ http://www.hicss.net/i-know-you-do-not-know-the-negative-margin/
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <style> *{ margin:0; padding:0; } .demoTab{width:400px; font:14px/1.5 Microsoft YaHei,verdana,Helvetica,Arial,sans-serif;} .demoTab .demoTabHd{margin-bottom:-1px; border:1px solid #6C92AD; border-bottom:none; background:#EAF0FD;} .demoTab .demoTabNav{height:28px; overflow:hidden; *zoom:1;} .demoTab .demoTabList{float:left; margin-left:-1px; padding:0 22px; line-height:28px; border-left:1px solid #6C92AD; border-right:1px solid #6C92AD; font-weight:bold; color:#005590; text-align:center; cursor:pointer;} .demoTab .demoTabList.current{position:relative; background:#fff;} .demoTab .demoTabBd{border:1px solid #6C92AD;} .demoTab .demoTabBd .roundBox{padding:15px;} .demoTab .demoTabContent{display:none;} .demoTab .demoTabContent.current{display:block;} </style> <body> <div id="demoTab" class="demoTab"> <div class="demoTabHd"> <ul class="demoTabNav clearfix"> <li class="demoTabList current">前端</li> <li class="demoTabList">实战</li> <li class="demoTabList">交互</li> <li class="demoTabList">优化</li> </ul> </div> <div class="demoTabBd"> <div class="roundBox"> <div class="demoTabContent current">这是第一个选项卡的内容。</div> <div class="demoTabContent">这是第二个选项卡的内容。</div> <div class="demoTabContent">这是第三个选项卡的内容。</div> <div class="demoTabContent">这是第四个选项卡的内容。</div> </div> </div> </div> <br> <br> <style> .demoSpecItem{width:212px; min-height:178px; _height:178px;} .demoSpecItem .demoItemPic{display:block; text-align:center;} .demoSpecItem .demoItemPic img{padding:5px; border:1px solid #ccc;} .demoSpecItem .demoIcon{display:block; margin:-185px 0 0 150px;} </style> <div class="demoSpecItem"><!-- --><a href="javascript:void(0)" class="demoItemPic"><!-- --><img width="200" height="166" src="toygersKittens.jpg" alt="toygers kittens" /><!----> </a><!-- --><span class="demoIcon"><img width="54" height="54" src="buyInSoon.png" alt="icon" /></span> </div> <br> <br> <style> .demoLayout{width:500px; border:1px solid #aaa; background:#EEEEEE;} .demoLayout .roundBox{padding:10px; min-height:170px; _height:170px;} .demoLayout .demoShowPic img{padding:1px; border:1px solid #DAA520;} .demoText{margin:-170px 0 0 215px;} .demoLayoutBtn{margin:15px 0 0 0;} </style> <div id="demoLayout" class="demoLayout"> <div class="roundBox"> <div class="demoShowPic"><img width="200" height="166" src="toygersKittens.jpg" alt="toygers kittens" /></div> <div class="demoText">利用负margin制作左右布局</div> </div> </div> </body> </html>
直接copy代码到浏览器看，easy，轻松加微笑
天道酬勤
