博客列表 >引用外部字体图标及媒体查询

引用外部字体图标及媒体查询

P粉932932019
P粉932932019原创
2022年07月09日 16:01:15358浏览
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Document</title>
  8. <script src="icon-font/iconfont.js"></script>
  9. </head>
  10. <body>
  11. <style>
  12. @media (max-width:300px) {
  13. html {
  14. font-size: 12px;
  15. }
  16. }
  17. @media (min-width:301px) and (max-width:600px) {
  18. :root {
  19. font-size: 14px;
  20. }
  21. }
  22. @media (min-width:601px) {
  23. :root {
  24. font-size: 16px;
  25. }
  26. }
  27. body {
  28. margin: 0;
  29. padding: 0;
  30. }
  31. table {
  32. width: 90vw;
  33. border-collapse: collapse;
  34. border-spacing: 0;
  35. margin: 5vw;
  36. }
  37. table caption {
  38. font-size: 2rem;
  39. font-weight: bold;
  40. margin-bottom: 10px;
  41. }
  42. table thead tr {
  43. background-color: coral;
  44. }
  45. table tr th {
  46. font-size: 1.2rem;
  47. line-height: 3rem;
  48. border: 1px solid rgb(151, 79, 7);
  49. text-align: center;
  50. }
  51. table tr:nth-of-type(2n) {
  52. background-color: blanchedalmond;
  53. }
  54. *[rowspan] {
  55. background-color: #fff;
  56. }
  57. table tbody tr:hover {
  58. background-color: burlywood;
  59. cursor: pointer;
  60. transition-duration: 0.6s;
  61. }
  62. .icon {
  63. width: 1.2em;
  64. height: 1.2em;
  65. vertical-align: -0.15em;
  66. fill: currentColor;
  67. overflow: hidden;
  68. }
  69. </style>
  70. <table>
  71. <caption>
  72. 课程表
  73. </caption>
  74. <thead>
  75. <tr>
  76. <th>时间</th>
  77. <th>周一</th>
  78. <th>周二</th>
  79. <th>周三</th>
  80. <th>周四</th>
  81. <th>周五</th>
  82. </tr>
  83. </thead>
  84. <tbody>
  85. <tr>
  86. <th rowspan="4">上午</th>
  87. <th>
  88. <svg class="icon" aria-hidden="true">
  89. <use xlink:href="#icon-huiyuan"></use>
  90. </svg>数学
  91. </th>
  92. <th>数学</th>
  93. <th>数学</th>
  94. <th>数学</th>
  95. <th>数学</th>
  96. </tr>
  97. <tr>
  98. <th><svg class="icon" aria-hidden="true">
  99. <use xlink:href="#icon-biji"></use>
  100. </svg>语文</th>
  101. <th>语文</th>
  102. <th>语文</th>
  103. <th>语文</th>
  104. <th>语文</th>
  105. </tr>
  106. <tr>
  107. <th><svg class="icon" aria-hidden="true">
  108. <use xlink:href="#icon-shoucang"></use>
  109. </svg>英语</th>
  110. <th>英语</th>
  111. <th>英语</th>
  112. <th>英语</th>
  113. <th>英语</th>
  114. </tr>
  115. <tr>
  116. <th><svg class="icon" aria-hidden="true">
  117. <use xlink:href="#icon-xiaoxi"></use>
  118. </svg>体育</th>
  119. <th>体育</th>
  120. <th>体育</th>
  121. <th>体育</th>
  122. <th>体育</th>
  123. </tr>
  124. <tr>
  125. <th colspan="6">中午休息</th>
  126. </tr>
  127. <tr>
  128. <th rowspan="3">下午</th>
  129. <th><svg class="icon" aria-hidden="true">
  130. <use xlink:href="#icon-ziliao"></use>
  131. </svg>音乐</th>
  132. <th>音乐</th>
  133. <th>音乐</th>
  134. <th>音乐</th>
  135. <th>音乐</th>
  136. </tr>
  137. <tr>
  138. <th><svg class="icon" aria-hidden="true">
  139. <use xlink:href="#icon-xihuan"></use>
  140. </svg>美术</th>
  141. <th>美术</th>
  142. <th>美术</th>
  143. <th>美术</th>
  144. <th>美术</th>
  145. </tr>
  146. <tr>
  147. <th><svg class="icon" aria-hidden="true">
  148. <use xlink:href="#icon-huiyuan"></use>
  149. </svg>生理</th>
  150. <th>生理</th>
  151. <th>生理</th>
  152. <th>生理</th>
  153. <th>生理</th>
  154. </tr>
  155. <tr>
  156. <th>执勤</th>
  157. <th colspan="5">各小组安排</th>
  158. </tr>
  159. </tbody>
  160. </table>
  161. </body>
  162. </html>

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议