转自:http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html 有改动
关于负值的原理建议看这个:http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812
1.左右列固定,中间列自适应布局
css
<style type="text/css">
body{
margin:0;
padding:0;
min-width:600px;
}
.main{
width:100%;
float:left;
background:#06F;
}
.main_body{
margin:0 210px;
height:200px;
background:#9F0;
}
.left,.right{
width:200px;
float:left;
height:200px;
background:#F60;
}
.left{
margin-left:-100%;
}
.right{
margin-left:-200px;
}
</style>
html
<div class="main">
<div class="main_body">Main_body</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>
1.去除列表右边框
css
<style type="text/css">
body,ul,li{
padding:0;
margin:0;
}
ul li{
list-style:none;
}
.box{
width:320px;
height:210px;
border:5px solid #000;
}
.list{
margin-right:-10px;
zoom:1;
overflow:hidden;
}
.list li{
width:100px;
height:100px;
margin-right:10px;
margin-bottom:10px;
background:#060;
float:left;
}
</style>
html
<div class="box">
<ul class="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
3.负边距+定位,水平垂直居中
css
<style type="text/css">
#test{
background:#9C0;
width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px;
}
</style>
html
<div id="test"></div>
4.去除列表最后一个元素的li的border-bottom
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>去除列表最后一个元素的li的border-bottom</title>
<style type="text/css">
body,ul,li{
margin:0;
padding:0;
}
ul,li{
list-style:none;
}
#test{
width:400px;
margin:20px;
background:#0FF;
border:2px solid #009;
border-radius:3px;
}
#test li{
height:25px;
line-height:25px;
padding:5px;
border-bottom:1px dotted #FF0000;
margin-bottom:-1px;
}
</style>
</head>
<body>
<ul id="test">
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</body>
5.多列等高
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多列等高</title>
<style type="text/css">
body{
margin:0;
padding:0;
}
#warp{
width:600px;
overflow:hidden;
margin:0 auto;
}
#left,#center,#right{
padding-bottom:200px;
margin-bottom:-200px;
float:left;
}
#left{
width:100px;
height:50px;
background:#CCC;
}
#center{
width:200px;
height:100px;
background:#999;
}
#right{
width:300px;
height:200px;
background:#666;
}
</style>
</head>
<body>
<div id="warp">
<div id="left">
height=50px;
</div>
<div id="center">
height=100px;
</div>
<div id="right">
height=200px;
</div>
</div>
</body>
6.负边距自适应布局
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>负边距自适应布局</title>
<style type="text/css">
body,h2,ul,li{
margin:0;
padding:0;
}
ul li{
list-style:none;
}
#header{
height:60px;
background:#990;
}
#main{
overflow:hidden;
}
#container{
width:100%;
float:left;
background:#9C9;
/*margin-right:-200px;*/
padding-bottom:500px;
margin-bottom:-500px
}
#sidebar{
width:200px;
float:right;
background:#6FC;
margin-left:-200px;
padding-bottom:500px;
margin-bottom:-500px
}
#contain{
margin-right:200px;
background:#F60;
;
}
#footer{
clear:both;
height:80px;
background:#666;
}
</style>
</head>
<body>
<div id="header">
<h2>#header</h2>
</div>
<div id="main">
<div id="container">
<div id="contain">
<h2>#contain</h2>
The main content of you
</div>
</div>
<div id="sidebar">
<h2>#sidebar</h2>
<ul>
<li>Fixed the sidebar</li>
<li>Fixed the sidebar</li>
<li>Fixed the sidebar</li>
<li>Fixed the sidebar</li>
<li>Fixed the sidebar</li>
</ul>
</div>
</div>
<div id="footer">
<h2>#footer</h2>
</div>
</body>
7.google reader自适应渐变圆角按钮
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>google reader自适应渐变圆角按钮</title>
<style type="text/css">
.button-outer-box{
border-top:1px solid #bbb;
border-bottom:1px solid #aaa;
display:inline-block;
cursor:pointer;
}
.button-inner-box{
border-left:1px solid #bbb;
border-right:1px solid #aaa;
margin:0 -1px;
background:#e3e3e3;
position:relative;
}
.button-top-shadow{
background:#f9f9f9;
border-bottom:solid #eee 0.23em;
height:0.692em;
display:block;
position:absolute;
top:0;
left:0;
right:0;
}
.button-content{
color:#333;
line-height:1.4em;
padding:0 0.461em;
position:relative;
text-align:center;
}
</style>
</head>
<body>
<div class="button-outer-box">
<div class="button-inner-box">
<div class="button-top-shadow"> </div>
<div class="button-content">
<span>纯css自适应渐变圆角按钮</span>
</div>
</div>
</div>
</body>