《web实践标准》学习

电玩女神 2022-05-27 02:53 205阅读 0赞

ul {list-style:none}
    li {background:url(back.gif) no-repeat 0 50%;
    padding-left:17px;
    }

说明：0 50% 告诉浏览器这张背景图片应该位于距左侧0像素且竖直方向位于从顶部住下50%处，实际上就是在竖直方向居中

迷你选项卡形状：

#minitabs {margin:0; padding:0 0 20px 10px; border-bottom:1px solid #9FB1bc;}
    
    #minitabs li {margin:0; padding: 0; display:inline; list-style-type: none;}
    
    #minitabs a {float: left; line-height:14px; font-weight:bold; padding:0 12px 6px 12px; text-decoration: none; color:#708491}
    
    #minitabs a.active, #minitabs a:hover {color:#000; backgroud: url(tab_pyra.gif) no-repeat bottom center;}

<img>标签的对齐

h3 img {backgroud:#696; 
                 vertical-align:middle;
    }

这就保证了图片会对齐于<h3>中的文本竖直方向的正中。

table的网格样式

table {border-top: 1px solid #999; border-left: 1px solid #999; border-collapse: collapse;}
    th,td {border-right: 1px solid #999; border-bottom:1px solid #999;}

table完整样式

table {border-top:1px solid #999; border-left: 1px solid #999}
    
    caption {font-family: Arial,sans-serif;
    color: #993333; padding-bottom:6px;}
    
    th, td {padding: 10px; border-right: 1px solid #999; border-bottom: 1px solid #999;}
    
    th {font-family: Verdana, sans-serif;
    padding-left: 26px; backgroud-color: #ccc; backgroud-repeat: no-repeat; backgroud-position: 10px 50%}
    
    #year {backgroud-image: url(icon_year.gif);}
    
    #opponent {backgroud-image: url(icon_opp.gif);}
    
    #record {backgroud:url(icon_rec.gif)}

<table summary="This table is a chart fo all Boston Red Sox World Series Wins.">
     <caption>Boston Red Sox World Series Championships</caption>
    <tr>
       <th id = "year">Year </th>
       <th id = "opponent">Opponent</th>
        <th id = "record" abbr="Record">Season Record(W-L)</th>
    </tr>
    <tr>
        <td>1918</td>
        <td>Chicago</td>
        <td>75-51</td>
    </tr>
    <tr>
        <td>1916</td>
        <td>Brooklyn Robins<td>
        <td>91-63</td>
    </tr>
    </table>