CSS教程,DIV CSS视频教程,DIV CSS模板,DIV CSS布局入门教程 - CSS中国

我发现自己使用每天几个不同的CSS代码段，所以我想这些CSS技巧当中有些人可能会发现他们是有用的。因此，我们开始吧。

1、  将网页或元素居中   
     

The HTML

<DIV class=wrap>    
</DIV><!-- end wrap -->   

The CSS

.wrap { width:960px; margin:0 auto;}  

2、Sticky Footer (让页脚永远停靠在页面底部，而不是根据绝对位置)

   

The HTML

<DIV id=wrap> 
 
<DIV class=clearfix id=main> 
 
</DIV> 
 
</DIV> 
 
<DIV id=footer> 
 
</DIV> 

    The CSS

* { margin:0; padding:0; }   
 
html, body, #wrap { height: 100%; }  
 
body > #wrap {height: auto; min-height: 100%;}  
 
#main { padding-bottom: 150px; }  /* must be same height as the footer */ 
 
#footer {  
        position: relative;  
 margin-top: -150px; /* negative value of footer height */ 
 height: 150px;  
 clear:both;}   
 
/* CLEAR FIX*/ 
.clearfix:after {content: ".";  
 display: block;  
 height: 0;  
 clear: both;  
 visibility: hidden;}  
.clearfix {display: inline-block;}  
/* Hides from IE-mac */ 
* html .clearfix { height: 1%;}  
.clearfix {display: block;}  
/* End hide from IE-mac */ 

3.跨浏览器最小高度设置      

 The CSS：

.element { min-height:600px; height:auto !important; height:600px; }   

4.Box阴影(CSS3)
   

   
The CSS：

.box { box-shadow: 5px 5px 5px #666;  -moz-box-shadow: 5px 5px 5px #666;  -webkit-box-shadow: 5px 5px 5px #666; }    

5.文字阴影（CSS3）

The CSS：

.text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); } 

6.跨浏览器的CSS透明度
   

The CSS：

.transparent {     
       
  /* Modern Browsers */ opacity: 0.7;     
     
  /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";     
     
  /* IE 5-7 */ filter: alpha(opacity=70);     
     
  /* Netscape */ -moz-opacity: 0.7;     
     
  /* Safari 1 */ -khtml-opacity: 0.7;     
       
}     

7.著名的 Meyer Reset（重置）
   

The CSS：

html, body, div, span, applet, object, iframe,     
h1, h2, h3, h4, h5, h6, p, blockquote, pre,     
a, abbr, acronym, address, big, cite, code,     
del, dfn, em, font, img, ins, kbd, q, s, samp,     
small, strike, strong, sub, sup, tt, var,     
dl, dt, dd, ol, ul, li,     
fieldset, form, label, legend,     
table, caption, tbody, tfoot, thead, tr, th, td {     
 margin: 0;     
 padding: 0;     
 border: 0;     
 outline: 0;     
 font-weight: inherit;     
 font-style: inherit;     
 font-size: 100%;     
 font-family: inherit;     
 vertical-align: baseline;     
}     
/* remember to define focus styles! */     
:focus {     
 outline: 0;     
}     
body {     
 line-height: 1;     
 color: black;     
 background: white;     
}     
ol, ul {     
 list-style: none;     
}     
/* tables still need 'cellspacing="0"' in the markup */     
table {     
 border-collapse: separate;     
 border-spacing: 0;     
}     
caption, th, td {     
 text-align: left;     
 font-weight: normal;     
}     
blockquote:before, blockquote:after,     
q:before, q:after {     
 content: "";     
}     
blockquote, q {     
 quotes: "" "";     
}     
      

8.删除虚线轮廓      

The CSS： 

a, a:active { outline: none; }   

9.圆角
   

The CSS：

.element {     
 -moz-border-radius: 5px;     
 -webkit-border-radius: 5px;     
 border-radius: 5px; /* future proofing */     
}     
.element-top-left-corner {     
 -moz-border-radius-topleft: 5px;     
 -webkit-border-top-left-radius: 5px;     
}     

10.覆盖内联的样式

 The CSS:

.override {     
 font-size: 14px !important;     
}