一、设计表格样式
目标：定义表格的宽度、字体、背景颜色等。
1 2 3 4 5黄石港区各类人数统计 6 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 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 237 44 45
4黄石港区各类人数统计
5
6
登录后复制
知识拓展：
1、javascript中onmouseover和onmouseout事件：
onmouseover 用户鼠标移入元素时触发的事件。并执行onmouseover调用的函数。
onmouseout 用户鼠标移开元素时触发的事件。并执行onmouseout调用的函数。
HTML中可以用这两个事件改变背景颜色或者背景图片，例如：
（1）用onmouseout onmouseover 图像间相互变换：
1
登录后复制
（2）onmouseover onmouseout 改变文字背景色：
1文字
登录后复制
（3）onmouseover onmouseout 改文字变背景图：
1文字3
登录后复制
三、完成效果
1、打开效果
2、鼠标放上去的效果：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3107862.html
