负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,轻松加微笑

posted @ 2014-10-13 15:02  方方和圆圆  阅读(430)  评论(0编辑  收藏  举报

再过一百年, 我会在哪里?