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，轻松加微笑
时间： 2024-08-28 16:13:56