search

博客列表 >1024用rem + vw 重写 课程表 案例, css中不出现px

1024用rem + vw 重写 课程表 案例, css中不出现px

放手去爱
放手去爱原创
2022年10月28日 13:46:24284浏览
  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>rem/em/vw/vh单位学习示例</title>
  8.     <style>
  9.       /* em：继承字号，受自身和祖先影响
  10.          rem：根字号，字号常量不变
  11.          PC端：用em 比较多
  12.          移动端：用rem 比较多
  13.          */
  14.       /*
  15.       因为font-size可以继承，写到父级与写到当前元素有区别
  16.       因为em受到了当前元素和祖先元素font-size 字号的影响
  17.         解决这个问题，最好引用一个不变的字号常量
  18.         这个不变的字号常量就是根字号 `rem`
  19.         * ! em : 继承字号
  20.         rem 根字号，默认是16px,除非人为更 新，否则不变
  21.         **/
  22.       /*
  23.          vw/vh：视口单位
  24.          视口： viewport 可视窗口，当前文档（html）的可见部分
  25.          视口单位：vw ， vh
  26.          vw：viewport-width  视口宽度
  27.          vh：viewport-height  视口高度
  28.          1vw = 1 / 100 (视口宽度 window.innerWidth )
  29.          1vh = 1 / 100 (视口高度 window.innerHeight )
  30.          和百分比 % 非常像
  31.          1. %       ： 以父级元素宽高为参照物
  32.          2. vw / vh ： 以视口宽高为参照物
  34.          */
  36.          :root{1rem;}
  37.          /* 表格文本居中 ,拆叠td 双线 宽度*/
  38.          table {text-align: center;border-collapse: collapse;width: 90vw;}
  39.          /* 设置边框 */
  40.          table td, table th, table caption {border:1px solid #000000;}
  41.          /* 行高 */
  42.          table tr,table caption {height: 2.2rem; line-height: 2.2rem;}
  43.          /* td宽度 */
  44.          table td{width:8rem;}
  45.          /* 头部标题字号和背景颜色字体颜色 */
  46.          table caption{font-size:2em;background: #72e7ca;color: red;}
  47.          /* 给thead 添加颜色 */
  48.          table thead{background-color: aqua;}
  49.          /* table tbody tr:first-of-type td:first-of-type  用tbody 作用not 取反伪类 */
  50.          table tbody:not(tbody:nth-of-type(0)) tr:first-of-type td:first-of-type{background-color: lightgreen;}
  51.         /* 鼠标悬浮伪类 */
  52. table td:hover{cursor: pointer;background: #e97a9b;}
  53.     </style>
  54.   </head>
  55.   <body>
  56.     <table>
  57.       <!-- 顶部标题 -->
  58.       <caption>
  59.         PHP.CN中文网学员上课表
  60.       </caption>
  61.       <!-- 头部标题 -->
  62.       <thead>
  63.         <tr>
  64.           <th>时间</th>
  65.           <th>周一</th>
  66.           <th>周二</th>
  67.           <th>周三</th>
  68.           <th>周四</th>
  69.           <th>周五</th>
  70.         </tr>
  71.       </thead>
  72.       <!-- 上午tbody -->
  73.       <tbody>
  74.         <tr>
  75.           <td rowspan="2">上午</td>
  76.           <td>前端html</td>
  77.           <td>CSS样式</td>
  78.           <td>html5</td>
  79.           <td>php开发</td>
  80.           <td>TP6</td>
  81.         </tr>
  82.         <tr>
  83.           <td>前端html</td>
  84.           <td>CSS样式</td>
  85.           <td>html5</td>
  86.           <td>php开发</td>
  87.           <td>TP6</td>
  88.         </tr>
  89.       </tbody>
  91.       <tbody>
  92.         <tr>
  93.           <td rowspan="2">下午</td>
  94.           <td>TP6</td>
  95.           <td>php开发</td>
  96.           <td>html5</td>
  97.           <td>前端html</td>
  98.           <td>CSS样式</td>
  99.         </tr>
  100.         <tr>
  101.           <td>TP6</td>
  102.           <td>php开发</td>
  103.           <td>html5</td>
  104.           <td>前端html</td>
  105.           <td>CSS样式</td>
  106.         </tr>
  107.       </tbody>
  108.     </table>
  109.   </body>
  110. </html>
上一条：1017作业下一条：微信早教小程序源码开发设计方案
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多