HTML5+CSS3 表格设计(Table).doc

CSS样式：cssview plaincopy1. 2. 3. body4. width:600px;5. margin:40pxauto;6. font-family:trebuchetMS,Lucidasans,Arial;7. font-size:14px;8. color:#444;9. 10. 11. table12. *border-collapse:collapse;/*IE7andlower*/13. border-spacing:0;14. width:100%;15. 16. 17. .bordered18. border:solid#ccc1px;19. -moz-border-radius:6px;20. -webkit-border-radius:6px;21. border-radius:6px;22. -webkit-box-shadow:01px1px#ccc;23. -moz-box-shadow:01px1px#ccc;24. box-shadow:01px1px#ccc;25. 26. 27. .borderedtr:hover28. background:#fbf8e9;29. -o-transition:all0.1sease-in-out;30. -webkit-transition:all0.1sease-in-out;31. -moz-transition:all0.1sease-in-out;32. -ms-transition:all0.1sease-in-out;33. transition:all0.1sease-in-out;34. 35. 36. .borderedtd,.borderedth37. border-left:1pxsolid#ccc;38. border-top:1pxsolid#ccc;39. padding:10px;40. text-align:left;41. 42. 43. .borderedth44. background-color:#dce9f9;45. background-image:-webkit-gradient(linear,lefttop,leftbottom,from(#ebf3fc),to(#dce9f9);46. background-image:-webkit-linear-gradient(top,#ebf3fc,#dce9f9);47. background-image:-moz-linear-gradient(top,#ebf3fc,#dce9f9);48. background-image:-ms-linear-gradient(top,#ebf3fc,#dce9f9);49. background-image:-o-linear-gradient(top,#ebf3fc,#dce9f9);50. background-image:linear-gradient(top,#ebf3fc,#dce9f9);51. -webkit-box-shadow:01px0rgba(255,255,255,.8)inset;52. -moz-box-shadow:01px0rgba(255,255,255,.8)inset;53. box-shadow:01px0rgba(255,255,255,.8)inset;54. border-top:none;55. text-shadow:01px0rgba(255,255,255,.5);56. 57. 58. .borderedtd:first-child,.borderedth:first-child59. border-left:none;60. 61. 62. .borderedth:first-child63. -moz-border-radius:6px000;64. -webkit-border-radius:6px000;65. border-radius:6px000;66. 67. 68. .borderedth:last-child69. -moz-border-radius:06px00;70. -webkit-border-radius:06px00;71. border-radius:06px00;72. 73. 74. .borderedth:only-child75. -moz-border-radius:6px6px00;76. -webkit-border-radius:6px6px00;77. border-radius:6px6px00;78. 79. 80. .borderedtr:last-childtd:first-child81. -moz-border-radius:0006px;82. -webkit-border-radius:0006px;83. border-radius:0006px;84. 85. 86. .borderedtr:last-childtd:last-child87. -moz-border-radius:006px0;88. -webkit-border-radius:006px0;89. border-radius:006px0;90. 91. 92. /*-*/93. 94. .zebratd,.zebrath95. padding:10px;96. border-bottom:1pxsolid#f2f2f2;97. 98. 99. .zebratbodytr:nth-child(even)100. background:#f5f5f5;101. -webkit-box-shadow:01px0rgba(255,255,255,.8)inset;102. -moz-box-shadow:01px0rgba(255,255,255,.8)inset;103. box-shadow:01px0rgba(255,255,255,.8)inset;104. 105. 106. .zebrath107. text-align:left;108. text-shadow:01px0rgba(255,255,255,.5);109. border-bottom:1pxsolid#ccc;110. background-color:#eee;111. background-image:-webkit-gradient(linear,lefttop,leftbottom,from(#f5f5f5),to(#eee);112. background-image:-webkit-linear-gradient(top,#f5f5f5,#eee);113. background-image:-moz-linear-gradient(top,#f5f5f5,#eee);114. background-image:-ms-linear-gradient(top,#f5f5f5,#eee);115. background-image:-o-linear-gradient(top,#f5f5f5,#eee);116. background-image:linear-gradient(top,#f5f5f5,#eee);117. 118. 119. .zebrath:first-child120. -moz-border-radius:6px000;121. -webkit-border-radius:6px000;122. border-radius:6px000;123. 124. 125. .zebrath:last-child126. -moz-border-radius:06px00;127. -webkit-border-radius:06px00;128. border-radius:06px00;129. 130. 131. .zebrath:only-child132. -moz-border-radius:6px6px00;133. -webkit-border-radius:6px6px00;134. border-radius:6px6px00;135. 136. 137. .zebratfoottd138. border-bottom:0;139. border-top:1pxsolid#fff;140. background-color:#f1f1f1;141. 142. 143. .zebratfoottd:first-child144. -moz-border-radius:0006px;145. -webkit-border-radius:0006px;146. border-radius:0006px;147. 148. 149. .zebratfoottd:last-child150. -moz-border-radius:006px0;151. -webkit-border-radius:006px0;152. border-radius:006px0;153. 154. 155. .zebratfoottd:only-child156. -moz-border-radius:006px6px;157. -webkit-border-radius:006px6px158. border-radius:006px6px159. 160. 161. HTML：htmlview plaincopy1. Highlightedrows,borders2. 3. 4. 5. 6. #7. IMDBTop10Movies8. Year9. 10. 11. 12. 113. TheShawshankRedemption14. 15. 199416. 17. 18. 219. TheGodfather20. 197221. 22. 23. 24. 325. TheGodfather:PartII26. 197427. 28. 29. 430. TheGood,theBadandtheUgly31. 196632. 33. 34. 35. 536. PulpFiction37. 199438. 39. 40. 641. 12AngryMen42. 43. 195744. 45. 46. 747. SchindlersList48. 199349. 50. 51. 52. 853. OneFlewOvertheCuckoosNest54. 197555. 56. 57. 958. TheDarkKnight59. 60. 200861. 62. 63. 1064. TheLordoftheRings:TheReturnoftheKing65. 200366. 67. 68. 69. 70. 71. 72. Zebrastripes,footer73. 74. 75. 76. #77. IMDBTop10Movies78. Year79. 80. 81. 82. 83. 84. 85. 86. 87. 88. 89. 90. 91. 192. TheShawshankRedemption93. 199494. 95. 96. 297. TheGodfather98. 197299. 100. 101. 102. 3103. TheGodfather:PartII104. 1974105. 106. 107. 4108. TheGood,theBadandtheUgly109. 110. 1966111. 112. 113. 5114. PulpFiction115. 1994116. 117. 118. 119. 6