首页 > 代码库 > 负margin一些奇葩的布局技巧
负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，轻松加微笑
负margin一些奇葩的布局技巧
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。