项目：（前端部分）制作一个导航目录表格，统计黄石港区各社区各类人数_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屬性對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，casundfornthetthetthetthetthetthetthetttributefordforderfordforderforderentnumberingsnumberingsnumberingStys。

HTML行動：網站結構的示例May 05, 2025 am 12:03 AM

HTML用於構建結構清晰的網站。 1)使用標籤如、、定義網站結構。 2)示例展示了博客和電商網站的結構。 3)避免常見錯誤如標籤嵌套不正確。 4)優化性能通過減少HTTP請求和使用語義化標籤。

您如何將圖像插入HTML頁面？May 04, 2025 am 12:02 AM

toinsertanimageIntoanhtmlpage，usethetagwithsrcandaltattributes.1）usealttextforAcccessibilityandseo.2）instementRcsetForresponSiveImages.3）applylazyloadingWithLoadingWithLoading =“ lazy” tooptimizeperformance.4）tooptimizeperformance.4）

See all articles