Home >Web Front-end >HTML Tutorial >项目：（前端部分）制作一个导航目录表格，统计黄石港区各社区各类人数_html/css_WEB-ITnose
项目：（前端部分）制作一个导航目录表格，统计黄石港区各社区各类人数_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:33:02965browse
一、设计表格样式
目标：定义表格的宽度、字体、背景颜色等。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>黄石港区各类人数统计</title> 6 <style type="text/css"> 7 table.hovertable { 8 font-family: verdana,arial,sans-serif; 9 font-size:11px;10 color:#333333;11 border-width: 1px;12 border-color: #999999;13 border-collapse: collapse;14 }15 table.hovertable th {16 background-color:#c3dde0;17 border-width: 1px;18 padding: 8px;19 border-style: solid;20 border-color: #a9c6c9;21 }22 table.hovertable tr {23 background-color:#d4e3e5;24 }25 table.hovertable td {26 border-width: 1px;27 padding: 8px;28 border-style: solid;29 border-color: #a9c6c9;30 }31 </style>32 </head> 知识拓展：
1、font-family：
CSS中font-family用来定义页面字体，一般定义3-4个(比如：font-family: verdana,arial,helvetica,sans-serif; )。第一个优先级最高。这样如果访问你网页的电脑没有安装你定义的第一个字体，它会用第二个，以此类推。如果都找不到，就用浏览器的默认字体显示你的网页。通常推荐字体：黑体、宋体、微软雅黑、Arial, Helvetica, sans-serif。
2、html5表格的使用：
| 表格 | 描述 | ||||||||||||||||||
3、CSS border-style属性： 设置 4 个边框的样式
最不可预测的边框样式是 double。它定义为两条线的宽度再加上这两条线之间的空间等于 border-width 值。不过，CSS 规范并没有说其中一条线是否比另一条粗或者两条线是否应该是一样的粗，也没有指出线之间的空间是否应当比线粗。所有这些都有用户代理决定，创作人员对这个决定没有任何影响。 4、border-collapse: collapse： 为表格设置合并边框模型
二、设计表格效果 目标：将表格的表头加粗，鼠标移到某一行时会改变该行的颜色，鼠标移开则恢复原色。
1 <body bgcolor="#9999FF"> 2 <div class="head"> 3 <hr /> 4 <h1 align="center" >黄石港区各类人数统计</h1> 5 <hr /> 6 </div> 7 <div class="center"> 8 <table class="hovertable"> 9 <tr>10 <th>社区</th><th>民主党派</th><th>无党派</th><th>党外知识分子</th><th>宗教人士</th><th>少数民族流动人口</th>11 <th>少数民族常住人口</th><th>非公有制经济人士</th><th>新的社会阶层人士</th><th>出国和归国留学人员</th><th>港澳同胞（家属）</th>12 <th>台湾同胞（家属）</th><th>华侨/归侨/侨眷</th>13 </tr>14 <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">15 <td><a href="#">江北社区</a></td><td></td><td></td><td></td><td></td>16 <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>17 </tr>18 <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">19 <td><a href="#">天方社区</a></td><td></td><td></td><td></td><td></td><td></td>20 <td></td><td></td><td></td><td></td><td></td><td></td><td></td>21 </tr>22 <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">23 <td><a href="#">天虹社区</a></td><td></td><td></td><td></td><td></td><td></td><td></td>24 <td></td><td></td><td></td><td></td><td></td><td></td>25 </tr>26 <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">27 <td><a href="#">大码头社区</a></td><td></td><td></td><td></td><td></td><td></td><td></td>28 <td></td><td></td><td></td><td></td><td></td><td></td>29 </tr>30 <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">31 <td><a href="#">老虎头社区</a></td><td></td><td></td><td></td><td></td><td></td><td></td>32 <td></td><td></td><td></td><td></td><td></td><td></td>33 </tr>34 <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">35 <td><a href="#">锁前社区</a></td><td></td><td></td><td></td><td></td><td></td><td></td>36 <td></td><td></td><td></td><td></td><td></td><td></td>37 </tr>38 <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">39 <td><a href="#">花湖社区</a></td><td></td><td></td><td></td><td></td><td></td><td></td>40 <td></td><td></td><td></td><td></td><td></td><td></td>41 </tr>42 </table>43 </div>44 </body>45 </html> 知识拓展： 1、javascript中onmouseover和onmouseout事件： onmouseover 用户鼠标移入元素时触发的事件。并执行onmouseover调用的函数。 onmouseout 用户鼠标移开元素时触发的事件。并执行onmouseout调用的函数。 HTML中可以用这两个事件改变背景颜色或者背景图片，例如： （1）用onmouseout onmouseover 图像间相互变换：
1 <imagesrc="img1"onmouseover="this.src='img2'"onmouseout="this.src='img1'"> （2）onmouseover onmouseout 改变文字背景色：
1 <div width="100" height="100" onmouseover="style.backgroundColor='#fff'"2 onmouseout="style.backgroundColor='#bbb'" bgcolor="#bbb">文字</div> （3）onmouseover onmouseout 改文字变背景图：
1 <div width="100" height="100" onMouseOver="this.background='1.gif'"2 onMouseOut="this.background='2.gif'" background="2.gif">文字</div>3 <image src="img1" onmouseover="this.src='img2'" onmouseout="this.src='img1'">
三、完成效果 1、打开效果
2、鼠标放上去的效果：
|