资讯频道 → Web前端
阅读更多

51顶
1踩

Web前端

翻译新闻 10个非常有用的CSS技巧

2009-12-31 14:35 by 副主编 just_cool 评论(18) 有40899人浏览
CSS

1. 将网页或元素居中       

center     

    
HTML：

 

  1. <div class="wrap">  
  2. </div><!-- end wrap -->  

CSS：

 

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

 

 

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

   

 
HTML：

 

  1. <div id="wrap">  
  2.   
  3. <div id="main" class="clearfix">  
  4.   
  5. </div>  
  6.   
  7. </div>  
  8.   
  9. <div id="footer">  
  10.   
  11. </div>  

CSS：

 

  1. * { margin:0; padding:0; }   
  2.   
  3. html, body, #wrap { height: 100%; }  
  4.   
  5. body > #wrap {height: auto; min-height: 100%;}  
  6.   
  7. #main { padding-bottom: 150px; }  /* must be same height as the footer */  
  8.   
  9. #footer {  
  10.         position: relative;  
  11.  margin-top: -150px; /* negative value of footer height */  
  12.  height: 150px;  
  13.  clear:both;}   
  14.   
  15. /* CLEAR FIX*/  
  16. .clearfix:after {content: ".";  
  17.  display: block;  
  18.  height: 0;  
  19.  clear: both;  
  20.  visibility: hidden;}  
  21. .clearfix {display: inline-block;}  
  22. /* Hides from IE-mac */  
  23. * html .clearfix { height: 1%;}  
  24. .clearfix {display: block;}  
  25. /* End hide from IE-mac */  

 

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

       

 CSS：

 

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

 

 

4.Box阴影(CSS3)
   
box-shadow

   

    
CSS：

 

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

 

5.文字阴影（CSS3）

   
text-shadow

        

CSS：

 

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

 

6.跨浏览器的CSS透明度
   
opac

 

CSS：

  1. .transparent {  
  2.     
  3.   /* Modern Browsers */ opacity: 0.7;  
  4.   
  5.   /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";  
  6.   
  7.   /* IE 5-7 */ filter: alpha(opacity=70);  
  8.   
  9.   /* Netscape */ -moz-opacity: 0.7;  
  10.   
  11.   /* Safari 1 */ -khtml-opacity: 0.7;  
  12.     
  13. }  

 

 

7.著名的 Meyer Reset（重置）
   
reset

 

CSS：

 

  1.   html, body, div, span, applet, object, iframe,  
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
  3. a, abbr, acronym, address, big, cite, code,  
  4. del, dfn, em, font, img, ins, kbd, q, s, samp,  
  5. small, strike, strong, sub, sup, tt, var,  
  6. dl, dt, dd, ol, ul, li,  
  7. fieldset, form, label, legend,  
  8. table, caption, tbody, tfoot, thead, tr, th, td {  
  9.  margin: 0;  
  10.  padding: 0;  
  11.  border: 0;  
  12.  outline: 0;  
  13.  font-weight: inherit;  
  14.  font-style: inherit;  
  15.  font-size: 100%;  
  16.  font-family: inherit;  
  17.  vertical-align: baseline;  
  18. }  
  19. /* remember to define focus styles! */  
  20. :focus {  
  21.  outline: 0;  
  22. }  
  23. body {  
  24.  line-height: 1;  
  25.  color: black;  
  26.  background: white;  
  27. }  
  28. ol, ul {  
  29.  list-style: none;  
  30. }  
  31. /* tables still need 'cellspacing="0"' in the markup */  
  32. table {  
  33.  border-collapse: separate;  
  34.  border-spacing: 0;  
  35. }  
  36. caption, th, td {  
  37.  text-align: left;  
  38.  font-weight: normal;  
  39. }  
  40. blockquote:before, blockquote:after,  
  41. q:before, q:after {  
  42.  content: "";  
  43. }  
  44. blockquote, q {  
  45.  quotes: "" "";  
  46. }  
  47.    

 

8.删除虚线轮廓      
dotted

   

CSS：

 

  1. a, a:active { outline: none; }  

 

 

9.圆角
   
rounded

         

CSS：

 

  1. .element {  
  2.  -moz-border-radius: 5px;  
  3.  -webkit-border-radius: 5px;  
  4.  border-radius: 5px; /* future proofing */  
  5. }  
  6. .element-top-left-corner {  
  7.  -moz-border-radius-topleft: 5px;  
  8.  -webkit-border-top-left-radius: 5px;  
  9. }  

 

10.覆盖内联的样式
import

     

 CSS:

 

  1. .override {  
  2.  font-size: 14px !important;  
  3. }  
来自: webdevmania
51
顶
1
踩
评论 共 18 条 请登录后发表评论
18 楼 m2maomao 2011-09-29 17:30
2,4,5,6，9都不兼容或者代码有问题，其他都测了IE6+版本，均正确。IE6支持滤镜透明？？？？这个新手都知道吧？当时我就震惊了，还兼容IE5~7。被吓了一跳。
17 楼 qiusa1989 2011-08-02 14:18
[/i][/b][b][u][/u][i][i][/i]      
16 楼 lengdie2002 2010-12-22 11:24
不错。。
15 楼 glh 2010-01-25 16:42
谢啦，很不错
14 楼 simo8025_lee 2010-01-14 10:30
学习了，多谢
13 楼 axiseed 2010-01-05 14:27
longer042 写道
bluemeteor 写道
wyinwing 写道
以上的写法都是所有浏览器通用的？貌似圆角的不是哦


我想，圆角和阴影应该都是CSS3的

但是第十个有点搞笑，这也叫技巧？


圆角 现在 还不行 微软IE6 不刁cs3


同意，CSS2中肯定不能这样实现。
12 楼 longer042 2010-01-04 10:46
bluemeteor 写道
wyinwing 写道
以上的写法都是所有浏览器通用的？貌似圆角的不是哦


我想，圆角和阴影应该都是CSS3的

但是第十个有点搞笑，这也叫技巧？


圆角 现在 还不行 微软IE6 不刁cs3
11 楼 energykey 2010-01-04 10:18
引用
# #footer { 
#         position: relative; 
#  margin-top: -150px; /* negative value of footer height */ 
#  height: 150px; 
#  clear:both;}
10 楼 bluemeteor 2010-01-04 10:06
wyinwing 写道
以上的写法都是所有浏览器通用的？貌似圆角的不是哦


我想，圆角和阴影应该都是CSS3的

但是第十个有点搞笑，这也叫技巧？
9 楼 shinezhou 2010-01-04 09:34
mark

8 楼 black.angel 2010-01-04 08:32
文章虽好，可是浏览器兼容有问题哦。
7 楼 swing6 2010-01-03 14:46
学习一下技巧，兼容再考虑
6 楼 lianzerong 2010-01-03 14:05
thinks !
5 楼 lym6520 2010-01-03 09:12
很值得收藏！LZ赞一个！
4 楼 拜月小刀 2010-01-02 17:36
一点小经验吧 不能兼顾兼容性
3 楼 yak47 2010-01-02 13:37
不错不错
2 楼 wyinwing 2010-01-02 11:20
以上的写法都是所有浏览器通用的？貌似圆角的不是哦
1 楼 lijie250 2009-12-31 20:42
不错

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Global site tag (gtag.js) - Google Analytics