银行卡解码器视频:CSS 精华

来源：百度文库 编辑：九乡新闻网 时间：2024/10/06 01:00:08
DIV  上下居中用 line-height
Html代码  
  1.   
  2.   div.v-align {  
  3.     line-height: 200px;  
  4.     height: 200px;  
  5.     border: 1px solid red;  
  6.    }  
  7.    
  8.   
  9.   
  10.    垂直居中  
  11.  
   

例子1:
Html代码  
  1.   
  2.   
  3.   
  4. AgiCRM  
  5.   
  6.   
  7.   
  8.     
  9.    div.v-align {  
  10.      line-height: 200px;  
  11.      height: 200px;  
  12.      border: 1px solid red;  
  13.     }  
  14.     
  15.   
  16.   
  17.   
  18.     
  19.     垂直居中  
  20.   
    
  •   
  •   


    • 清除浏览器默认样式

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

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

    让A支持所有浏览器

    Html代码  
    1.    
    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.   
    13.   
    14. 捷道数码  
    15.   
    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.     
    26.   Google  


    例子2:
    Html代码  
    1.   
    2.   
    3.   
    4. AgiCRM  
    5.   
    6.   
    7.   
    8.     
    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.     
    30.   
    31.   
    32.   
    33.   捷道数码  
    34.   Google  
    35.   
    36.   


    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.   
    2.   
    3.   
    4. AgiCRM  
    5.   
    6.   
    7.   
    8.     
    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.     
    37.   
    38.   
    39.   
    40.     
    41.     正常  
    42.   
      
  •     
  •       
  •   
    •   
  •     
  •     有图片有字  
  •