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

程序员文章站 2022-04-28 12:06:15

...

一、设计表格样式

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

 1  2  3   4 5 黄石港区各类人数统计 6     32

知识拓展：
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  2      3         
 4         黄石港区各类人数统计
 5         
 6     
 7      8          9             10                 11                 12                 13             14             15                 16                 17             18             19                 20                 21             22             23                 24                 25             26             27                 28                 29             30             31                 32                 33             34             35                 36                 37             38             39                 40                 41             42         社区
*党派
无党派
党外知识分子
宗教人士
少数民族流动人口 少数民族常住人口
非公有制经济人士
新的社会阶层人士
出国和归国留学人员
港澳同胞（家属） *同胞（家属）
华侨/归侨/侨眷
江北社区










天方社区










天虹社区










大码头社区










老虎头社区










锁前社区










花湖社区










43     
44 45