搜索
我的图书馆

文具盒

发文工具

其他工具

留言交流
搜索
分享

CSS 精华

 歪SIR 2011-07-24
DIV  上下居中用 line-height
Html代码  收藏代码
  1. <style type="text/css">  
  2.   div.v-align {  
  3.     line-height: 200px;  
  4.     height: 200px;  
  5.     border: 1px solid red;  
  6.    }  
  7.  </style>  
  8.   
  9. <div class="v-align">  
  10.    垂直居中  
  11.  </div>   


例子1:
Html代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="/1999/xhtml" xml:lang="en">  
  3. <head>  
  4. <title>AgiCRM</title>  
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
  6. <meta name="demo" content="Demo" />  
  7. <meta name="demo" content="demo" />  
  8.   <style type="text/css">  
  9.    div.v-align {  
  10.      line-height: 200px;  
  11.      height: 200px;  
  12.      border: 1px solid red;  
  13.     }  
  14.   </style>  
  15. <!--[if IE]>  
  16.   
  17. <![endif]-->  
  18. </head>  
  19. <body>  
  20.   <div class="v-align">  
  21.     垂直居中  
  22.   </div>    
  23. </body>  
  24. </html>  


清除浏览器默认样式

1.用其他有名的库来清除（如：YUI)

2.自已清除
如：
*  {
    padding: 0;
    margin:0;
}

让A支持所有浏览器

Html代码  收藏代码
  1.  <style type="text/css">  
  2.    a.agideo:link, a.agideo:visited {  
  3.      font-weight: bold;  
  4.      text-decoration: none;  
  5.      color: green;  
  6.    }  
  7.    a.agideo:hover, a.agideo:active {  
  8.      font-weight: bold;  
  9.      text-decoration: none;  
  10.      color: red;  
  11.    }   
  12. </style>  
  13.   
  14. <a href="" class="agideo">捷道数码</a>  
  15. <style type="text/css">  
  16.    a.google:hover, a.google:active {  
  17.      font-weight: bold;  
  18.      text-decoration: none;  
  19.      color: red;  
  20.    }  
  21.    a.google:link, a.google:visited {font-weight: bold;  
  22.      text-decoration: none;  
  23.      color: green;  
  24.    }  
  25.   </style>  
  26.   <a href="http://www.google.com" class="google">Google</a>  


例子2:
Html代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="/1999/xhtml" xml:lang="en">  
  3. <head>  
  4. <title>AgiCRM</title>  
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
  6. <meta name="demo" content="Demo" />  
  7. <meta name="demo" content="demo" />  
  8.   <style type="text/css">  
  9.    a.agideo:link, a.agideo:visited {  
  10.      font-weight: bold;  
  11.      text-decoration: none;  
  12.      color: green;  
  13.    }  
  14.    a.agideo:hover, a.agideo:active {  
  15.      font-weight: bold;  
  16.      text-decoration: none;  
  17.      color: red;  
  18.    }  
  19.    a.google:hover, a.google:active {  
  20.      font-weight: bold;  
  21.      text-decoration: none;  
  22.      color: red;  
  23.    }  
  24.    a.google:link, a.google:visited {  
  25.      font-weight: bold;  
  26.      text-decoration: none;  
  27.      color: green;  
  28.    }  
  29.   </style>  
  30. <!--[if IE]>  
  31.   
  32. <![endif]-->  
  33. </head>  
  34. <body>  
  35.   <a href="" class="agideo">捷道数码</a>  
  36.   <a href="http://www.google.com" class="google">Google</a>  
  37. </body>  
  38. </html>  


A 伪类定义顺序记忆法
LoVe:HAte(爱恨)

IMG vertical-align

vertical-align : auto | baseline | sub | super | top | text-top |  middle | bottom | text-bottom | length

baseline :默认值。将支持 valign 特性的对象的内容与基线对齐

sub   垂直对齐文本的下标
super   垂直对齐文本的上标

top :  将支持 valign 特性的对象的内容对象顶端对齐
text-top :  将支持 valign 特性的对象的文本与对象顶端对齐

middle :  将支持 valign 特性的对象的内容与对象中部对齐
bottom :  将支持 valign 特性的对象的内容与对象底端对齐

text-bottom : 将支持 valign 特性的对象的文本与对象顶端对齐
length : 由浮点数字和单位标识符组成的长度值 | 百分数。可为负数。定义由基线算起的偏移量。基线对于数值来说为0，对于百分数来说就是0%。请参阅 长度单位 。目前IE尚未实现此参数

例子3:
Html代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="/1999/xhtml" xml:lang="en">  
  3. <head>  
  4. <title>AgiCRM</title>  
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
  6. <meta name="demo" content="Demo" />  
  7. <meta name="demo" content="demo" />  
  8.   <style type="text/css">  
  9.     div.v-align {  
  10.       border: 1px solid red;  
  11.       line-height: 40px;  
  12.       float: left;  
  13.       font-size: 11px;  
  14.       height: 40px;  
  15.     }  
  16.     div.v-align img.only-img {  
  17.       float:left;  
  18.     }  
  19.     div.v-align.has-img {  
  20.       padding-top: 10px;  
  21.       height: 30px;  
  22.     }  
  23.   
  24.     div.v-align.has-img-and-text img.has-text {  
  25.       vertical-align: -4px !important;  
  26.       vertical-align: middle;  
  27.       margin-top: -3px !important;  
  28.       margin-top: 0px;  
  29.     }  
  30.     div.v-align.has-img-and-text {  
  31.       padding-top: 0px !important;  
  32.       padding-top: 10px;  
  33.       height: 40px !important;  
  34.       height: 30px;  
  35.     }  
  36.   </style>  
  37. <!--[if IE]>  
  38.   
  39. <![endif]-->  
  40. </head>  
  41. <body>  
  42.   <div class="v-align">  
  43.     正常  
  44.   </div>  
  45.   <div class="v-align has-img">  
  46.     <img src="/upload/attachment/162320/1f89f269-580c-304b-975a-e6004b9893ce.png" class="only-img" />  
  47.   </div>  
  48.   <div class="v-align has-img-and-text">  
  49.     <img src="./accept.png" align="absmiddle" class="has-text" />有图片有字  
  50.   </div>  
  51. </body>  
  52. </html>  


垂直 Margin 叠加
例子4:
Html代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="/1999/xhtml" xml:lang="en">  
  3. <head>  
  4. <title>AgiCRM</title>  
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
  6. <meta name="demo" content="Demo" />  
  7. <meta name="demo" content="demo" />  
  8.   <style tyep="text/css">  
  9.     body, div {  
  10.       padding:0;  
  11.       margin:0;  
  12.     }  
  13.     div, span {  
  14.       padding: 10px;  
  15.       margin: 10px;  
  16.       border: 10px solid #000;  
  17.     }  
  18.     #div1 {  
  19.       background-color: red;  
  20.     }  
  21.     #div2 {  
  22.       background-color: green;  
  23.     }  
  24.     #div3 {  
  25.       background-color: blue;  
  26.     }  
  27.   </style>  
  28. <!--[if IE]>  
  29.   
  30. <![endif]-->  
  31. </head>  
  32. <body>  
  33.   <div id="div1">  
  34.     <div>div1</div>  
  35.   </div>  
  36.   <div id="div2">  
  37.     <div>div2</div>  
  38.   </div>  
  39.   <div id="div3">  
  40.     <span>span1</span>  
  41.     <span>span2</span>  
  42.   </div>  
  43. </body>  
  44. </html>  

  • Background position
    • 例子5:
    Html代码  收藏代码
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="/1999/xhtml" xml:lang="en">  
    3. <head>  
    4. <title>AgiCRM</title>  
    5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
    6. <meta name="demo" content="Demo" />  
    7. <meta name="demo" content="demo" />  
    8.   <style tyep="text/css">  
    9.     body, div {  
    10.       padding:0;  
    11.       margin:0;  
    12.     }  
    13.     div {  
    14.       border:1px solid #ccc;  
    15.       height: 200px;  
    16.       width: 300px;  
    17.     }  
    18.     #div1 {  
    19.       background: url(/upload/attachment/162316/eee477c8-1fcc-3a41-874f-065f0d65a422.jpg) no-repeat 20px 20px;  
    20.     }  
    21.     #div2 {  
    22.       background: url/upload/attachment/162316/eee477c8-1fcc-3a41-874f-065f0d65a422.jpg) no-repeat 20% 20%;  
    23.     }  
    24.     #div3 {  
    25.       background: url(/upload/attachment/162318/8be0e495-2d0a-3ec2-9f5f-7465eb8c23ae.jpg) no-repeat 20% 20%;  
    26.     }  
    27.   </style>  
    28. <!--[if IE]>  
    29.   
    30.   
    31. <![endif]-->  
    32. </head>  
    33. <body>  
    34.   <div id="div1">  
    35.     20px  
    36.   </div>  
    37.   <br/>  
    38.   <div id="div2">  
    39.     20%  
    40.   </div>  
    41.   <br/>  
    42.   <div id="div3">  
    43.     20%  
    44.   </div>  
    45. </body>  
    46. </html>  




    Float 占地问题

    1.父子TAG都Float以父能包含子

    Html代码  收藏代码
    1. <style type="text/css">  
    2.    div.parent {  
    3.      border: 1px solid red;  
    4.      width: 600px;  
    5.      float: left; /* For round child */  
    6.    }  
    7.    div.child {  
    8.      border: 1px solid green;  
    9.      float: left;  
    10.    }  
    11.  </style>  
    12. <div class="parent">  
    13.    <div class="child">  
    14.      child  
    15.    </div>  
    16.    <div class="child">  
    17.      child  
    18.    </div>  
    19.    <div class="child">  
    20.      child  
    21.    </div>  
    22.  </div>  


    例子6:
    Html代码  收藏代码
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="/1999/xhtml" xml:lang="en">  
    3. <head>  
    4. <title>AgiCRM</title>  
    5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
    6. <meta name="demo" content="Demo" />  
    7. <meta name="demo" content="demo" />  
    8.   <style type="text/css">  
    9.     div.parent {  
    10.       border: 1px solid red;  
    11.       width: 600px;  
    12.       float: left; /* For round child */  
    13.     }  
    14.     div.child {  
    15.       border: 1px solid green;  
    16.       float: left;  
    17.     }  
    18.   </style>  
    19. <!--[if IE]>  
    20.   
    21. <![endif]-->  
    22. </head>  
    23. <body>  
    24.   <div class="parent">  
    25.     <div class="child">  
    26.       child  
    27.     </div>  
    28.     <div class="child">  
    29.       child  
    30.     </div>  
    31.     <div class="child">  
    32.       child  
    33.     </div>  
    34.   </div>  
    35. </body>  
    36. </html>  


    2.最后一个子TAG后加一clear的无语义tag

    Html代码  收藏代码
    1. <style type="text/css">  
    2.    div.parent {  
    3.      border: 1px solid red;  
    4.      width: 600px;  
    5.    }  
    6.    div.child {  
    7.      border: 1px solid green;  
    8.      float: left;  
    9.    }  
    10.    div.clear {  
    11.      clear: both;  
    12.    }  
    13.  </style>  
    14. lt;div class="parent">  
    15.    <div class="child">  
    16.      child  
    17.    </div>  
    18.    <div class="child">  
    19.      child  
    20.    </div>  
    21.    <div class="child">  
    22.      child  
    23.    </div>  
    24.    <div class="clear"></div>  
    25.  </div>  


    例子7:
    Html代码  收藏代码
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="/1999/xhtml" xml:lang="en">  
    3. <head>  
    4. <title>AgiCRM</title>  
    5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
    6. <meta name="demo" content="Demo" />  
    7. <meta name="demo" content="demo" />  
    8.   <style type="text/css">  
    9.     div.parent {  
    10.       border: 1px solid red;  
    11.       width: 600px;  
    12.     }  
    13.     div.child {  
    14.       border: 1px solid green;  
    15.       float: left;  
    16.     }  
    17.     div.clear {  
    18.       clear: both;  
    19.     }  
    20.   </style>  
    21. <!--[if IE]>  
    22.   
    23. <![endif]-->  
    24. </head>  
    25. <body>  
    26.   <div class="parent">  
    27.     <div class="child">  
    28.       child  
    29.     </div>  
    30.     <div class="child">  
    31.       child  
    32.     </div>  
    33.     <div class="child">  
    34.       child  
    35.     </div>  
    36.     <div class="clear"></div>  
    37.   </div>  
    38. </body>  
    39. </html>  

      本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
      转藏 分享 献花（0）

      来自： 歪SIR > 《CSS》

      举报/认领

      0条评论

      发表

      请遵守用户 评论公约

      热点新闻
      类似文章 更多