zoukankan      html  css  js  c++  java

  • 10个非常有用的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. }  
  • 相关阅读:
    sed命令
    python常用库
    python标准库
    从 Python 打包到 CLI 工具
    pip
    python包自我理解
    docker常用命令
    chattr命令
    xmss
    live2d-widget.js
  • 原文地址：https://www.cnblogs.com/hnyei/p/hnyei.html
Copyright © 2011-2022 走看看