项目：（前端部分）制作一个导航目录表格，统计黄石港区各社区各类人数_html/css

首页

web前端

html教程

项目：（前端部分）制作一个导航目录表格，统计黄石港区各社区各类人数_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:33 AM

一、设计表格样式

目标：定义表格的宽度、字体、背景颜色等。

 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 id="黄石港区各类人数统计">黄石港区各类人数统计</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、鼠标放上去的效果：

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML的未来：进化和趋势May 13, 2025 am 12:01 AM

HTML的未来将朝着更加语义化、功能化和模块化的方向发展。1)语义化将使标签更明确地描述内容，提升SEO和无障碍访问。2)功能化将引入新元素和属性，满足用户需求。3)模块化将支持组件化开发，提高代码复用性。

为什么HTML属性对Web开发很重要？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopment forcontrollingBehavior，外观和功能

Alt属性的目的是什么？为什么重要？May 11, 2025 am 12:01 AM

alt属性是HTML中标签的重要部分，用于提供图片的替代文本。1.当图片无法加载时，alt属性中的文本会显示，提升用户体验。2.屏幕阅读器使用alt属性帮助视障用户理解图片内容。3.搜索引擎索引alt属性中的文本，提高网页的SEO排名。

HTML，CSS和JavaScript：示例和实际应用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在网页开发中的作用分别是：1.HTML用于构建网页结构；2.CSS用于美化网页外观；3.JavaScript用于实现动态交互。通过标签、样式和脚本，这三者共同构筑了现代网页的核心功能。

如何在标签上设置lang属性？为什么这很重要？May 08, 2025 am 12:03 AM

设置标签的lang属性是优化网页可访问性和SEO的关键步骤。1)在标签中设置lang属性，如。2)在多语言内容中，为不同语言部分设置lang属性，如。3)使用符合ISO639-1标准的语言代码，如"en"、"fr"、"zh"等。正确设置lang属性可以提高网页的可访问性和搜索引擎排名。

HTML属性的目的是什么？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外观和互动，使网站互动，响应式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，类，类型，类型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中创建列表？May 06, 2025 am 12:01 AM

toCreateAlistinHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulleTedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，customeizableWithTheTtheTthetTheTeTeptTributeFordTributeForderForderForderFerentNumberingSnumberingStyls。