<tt id="kjox3"><noscript id="kjox3"><samp id="kjox3"></samp></noscript></tt><tt id="kjox3"><li id="kjox3"><var id="kjox3"></var></li></tt><cite id="kjox3"><noscript id="kjox3"><delect id="kjox3"></delect></noscript></cite>

<source id="kjox3"><menuitem id="kjox3"></menuitem></source>

  • <rt id="kjox3"></rt>
      <rp id="kjox3"></rp>

    1. <cite id="kjox3"></cite>
        <tt id="kjox3"><form id="kjox3"><delect id="kjox3"></delect></form></tt><rp id="kjox3"><meter id="kjox3"><button id="kjox3"></button></meter></rp>

      1. <tt id="kjox3"></tt>

        <rt id="kjox3"><meter id="kjox3"></meter></rt>
      2. <b id="kjox3"><form id="kjox3"><label id="kjox3"></label></form></b>

          在网页设计中设计动态效果的表格

          • 2019-10-31 09:43:21
          • 阅读次数:
          • 作者:盈岚科技小编
          • 来源:http://www.1c4w.com

          对于长时间浏览大量表格数据的用户来说,即使是隔行变色的表格,阅读时间长了仍然会感到疲劳。如果数据在设计网页时,行能动态地根据鼠标来变色,就会大大较少用户的疲劳感,也会使表格更易用,本例介绍了网站建设时鼠标经过时变色的表格。

          【操作步骤】

          第1步,新建文档,保存为index.html。构建网页基本结构。在本例中构建了一个8行4列的表格。

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

          <caption>     

          学生成绩一览表    

          </caption>

          <tr>        

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

          <th scope="col">数学</th>        

          <th scope="col">语文</th>        

          <th scope="col">外语</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>

          此时在没有CSS样式设置时的显示结果如图6.62所示。

          第2步,定义表格和表格标题样式。设计网页时,在<head>标签内添加<style type="text/css">标签,定义一个内部样式表,然后输入下面样式。

          .chart {/*表格样式*/    

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

          font-family: Arial;    

          border-collapse: collapse;   /*边框重叠*/    

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

          font-size: 14px;

          }.chart caption {/*表格标题样式*/    

          padding-bottom: 5px;    

          font-size: 20px;    

          font-weight: bold;    

          text-align: center;}

          以上代码中,首先设置了表格的样式和表格的边框,并对表格标题样式进行了定义。

          第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;               /*水平对齐*/}

          .chart td {/*单元格样式*/    

          border: 1px solid #0058a3;        /*单元格边框*/    

          text-align: center;               /*水平对齐*/    

          padding-top: 4px;    

          padding-bottom: 4px;    

          padding-left: 10px;    

          padding-right: 10px;}

          以上代码中,首先定义了<th>标签样式和<td>标签样式。可以看到,整个表格样式已经形成,最后只差实现动态变色。

          第4步,实现动态变色。

          .chart tr:hover { background-color: #CC9999; /*动态变色*/}

          从以上代码可以看到,实现动态变色可以直接调用<tr>标签的伪类hover。

          提示:在现代标准浏览器中支持<tr>标签的伪类,但是在IE浏览器中,只有在IE8以上版本才支持,所以要注意浏览器的兼容性。


          当前文章标题:在网页设计中设计动态效果的表格

          当前URL:http://www.1c4w.com/news/wzzz/3119.html

          上一篇:如何在网页设计中设计清晰、醒目的表格

          下一篇:如何在网页设计中设计音乐首页

          网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)
          鸭子tv国产在线永久播放,天天夜日日日日碰日日摸日日澡,日本特黄特黄刺激大片,老熟妇乱子伦456在线观看 网站地图