主要用到CSS3 :nth-child 属性
工具/原料
CSS3 :nth-child
方法/步骤
1
写入html虚拟数据
| 排名 | 校名 | 总得分 | 人才培养总得分 | 研究生培养得分 | 本科生培养得分 | 科学研究总得分 | 自然科学研究得分 | 社会科学研究得分 | 所属省份 | 分省排名 | 学校类型 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | 清华大学 | 296.77 | 128.92 | 93.83 | 35.09 | 167.85 | 148.47 | 19.38 | 京 | 1 | 理工 |
| 2 | 北京大学 | 222.02 | 102.11 | 66.08 | 36.03 | 119.91 | 86.78 | 33.13 | 京 | 2 | 综合 |
| 3 | 浙江大学 | 205.65 | 94.67 | 60.32 | 34.35 | 110.97 | 92.32 | 18.66 | 浙 | 1 | 综合 |
| 4 | 上海交大 | 150.98 | 67.08 | 47.13 | 19.95 | 83.89 | 77.49 | 6.41 | 沪 | 1 | 综合 |
| 5 | 南京大学 | 136.49 | 62.84 | 40.21 | 22.63 | 73.65 | 53.87 | 19.78 | 苏 | 1 | 综合 |
| 6 | 复旦大学 | 136.36 | 63.57 | 40.26 | 23.31 | 72.78 | 51.47 | 21.31 | 沪 | 2 | 综合 |
| 7 | 华中科大 | 110.08 | 54.76 | 30.26 | 24.50 | 55.32 | 47.45 | 7.87 | 鄂 | 1 | 理工 |
| 8 | 武汉大学 | 103.82 | 50.21 | 29.37 | 20.84 | 53.61 | 36.17 | 17.44 | 鄂 | 2 | 综合 |
| 9 | 吉林大学 | 96.44 | 48.61 | 25.74 | 22.87 | 47.83 | 38.13 | 9.70 | 吉 | 1 | 综合 |
| 10 | 西安交大 | 92.82 | 47.22 | 24.54 | 22.68 | 45.60 | 35.47 | 10.13 | 陕 | 1 | 综合 |
2
定义CSS样式
3
设置th，tdth { background-image: url(images/th_bg1.gif); background-repeat:repeat-x; height:30px; overflow:hidden;}td { height:20px; }td, th { border:1px solid #cad9ea; padding:0 1em 0;}
4
设置隔行变色tr:nth-child(even) { background-color:#f5fafe;}
5
生成了漂亮的表格
6
没有引入js，纯css技术
注意事项
css3中新属性，兼容性不好
上一篇：国家电网考试通信类推荐用书
下一篇：勤工俭学的工资标准怎么定的