• <abbr id="qqgmy"></abbr>
      <menu id="qqgmy"><abbr id="qqgmy"></abbr></menu>
    • <rt id="qqgmy"><code id="qqgmy"></code></rt>
      • 在網(wǎng)頁(yè)設(shè)計(jì)中設(shè)計(jì)動(dòng)態(tài)效果的表格

        對(duì)于長(zhǎng)時(shí)間瀏覽大量表格數(shù)據(jù)的用戶來(lái)說(shuō),即使是隔行變色的表格,閱讀時(shí)間長(zhǎng)了仍然會(huì)感到疲勞。如果數(shù)據(jù)在設(shè)計(jì)網(wǎng)頁(yè)時(shí),行能動(dòng)態(tài)地根據(jù)鼠標(biāo)來(lái)變色,就會(huì)大大較少用戶的疲勞感,也會(huì)使表格更易用,本例介紹了網(wǎng)站建設(shè)時(shí)鼠標(biāo)經(jīng)過(guò)時(shí)變色的表格。

        【操作步驟】

        第1步,新建文檔,保存為index.html。構(gòu)建網(wǎng)頁(yè)基本結(jié)構(gòu)。在本例中構(gòu)建了一個(gè)8行4列的表格。

        <table class="chart" summary="list of members in EE Studay">    

        <caption>     

        學(xué)生成績(jī)一覽表    

        </caption>

        <tr>        

        <th scope="col">姓名</th>        

        <th scope="col">數(shù)學(xué)</th>        

        <th scope="col">語(yǔ)文</th>        

        <th scope="col">外語(yǔ)</th>    

        </tr>    

        <tr>        

        <td>TOM</td>        

        <td>100</td>        

        <td>97</td>        

        <td>59</td>    

        </tr>    

        <tr>        

        <td>YOLANDA</td>        

        <td>76</td>        

        <td>77</td>        

        <td>89</td>    

        </tr>    

        <tr>        

        <td>JACK</td>        

        <td>85</td>

        <td>97</td>        

        <td>66</td>    

        </tr>    

        <tr>        

        <td>LILY</td>        

        <td>66</td>        

        <td>87</td>        

        <td>76</td>    

        </tr>    

        <tr>        

        <td>JASSIC</td>        

        <td>88</td>        

        <td>89</td>        

        <td>96</td>    

        </tr>    

        <tr>        

        <td>PETTER</td>        

        <td>56</td>        

        <td>87</td>        

        <td>67</td>    

        </tr>

         <tr>        

        <td>MING</td>        

        <td>77</td>        

        <td>88</td>        

        <td>83</td>    

        </tr></table>

        此時(shí)在沒(méi)有CSS樣式設(shè)置時(shí)的顯示結(jié)果如圖6.62所示。

        第2步,定義表格和表格標(biāo)題樣式。設(shè)計(jì)網(wǎng)頁(yè)時(shí),在<head>標(biāo)簽內(nèi)添加<style type="text/css">標(biāo)簽,定義一個(gè)內(nèi)部樣式表,然后輸入下面樣式。

        .chart {/*表格樣式*/    

        border: 1px solid #0058a3;   /*表格邊框*/    

        font-family: Arial;    

        border-collapse: collapse;   /*邊框重疊*/    

        background-color: #eaf5ff;   /*表格背景色*/   

        font-size: 14px;

        }.chart caption {/*表格標(biāo)題樣式*/    

        padding-bottom: 5px;    

        font-size: 20px;    

        font-weight: bold;    

        text-align: center;}

        以上代碼中,首先設(shè)置了表格的樣式和表格的邊框,并對(duì)表格標(biāo)題樣式進(jìn)行了定義。

        第3步,定義表格的行名稱樣式和單元格樣式。

        .chart th {/*行名稱樣式*/    

        border: 1px solid #0058a3;        /*行名稱邊框*/    

        background-color: #4bacff;        /*行名稱背景色*/    

        color: #FFFFFF;                   /*行名稱顏色*/    

        font-weight: bold;    

        padding-top: 4px;

        padding-bottom: 4px;    

        padding-left: 12px;    

        padding-right: 12px;    

        text-align: center;               /*水平對(duì)齊*/}

        .chart td {/*單元格樣式*/    

        border: 1px solid #0058a3;        /*單元格邊框*/    

        text-align: center;               /*水平對(duì)齊*/    

        padding-top: 4px;    

        padding-bottom: 4px;    

        padding-left: 10px;    

        padding-right: 10px;}

        以上代碼中,首先定義了<th>標(biāo)簽樣式和<td>標(biāo)簽樣式??梢钥吹剑麄€(gè)表格樣式已經(jīng)形成,最后只差實(shí)現(xiàn)動(dòng)態(tài)變色。

        第4步,實(shí)現(xiàn)動(dòng)態(tài)變色。

        .chart tr:hover { background-color: #CC9999; /*動(dòng)態(tài)變色*/}

        從以上代碼可以看到,實(shí)現(xiàn)動(dòng)態(tài)變色可以直接調(diào)用<tr>標(biāo)簽的偽類hover。

        提示:在現(xiàn)代標(biāo)準(zhǔn)瀏覽器中支持<tr>標(biāo)簽的偽類,但是在IE瀏覽器中,只有在IE8以上版本才支持,所以要注意瀏覽器的兼容性。


        網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷咨詢專線:0871-63535511(點(diǎn)擊可一鍵撥號(hào))
        在线一区视频二区三区,av无码久久久不卡网站,亚洲国产人成精品,国产成人白丝视频
        • <abbr id="qqgmy"></abbr>
          <menu id="qqgmy"><abbr id="qqgmy"></abbr></menu>
        • <rt id="qqgmy"><code id="qqgmy"></code></rt>