search

博客列表 >1024作业

1024作业

P粉751989631
P粉751989631原创
2022年10月25日 23:23:31679浏览

1. em,rem的特点是什么, 应用场景是什么?为什么推荐使用rem？

  1. em和rem都是属于相对单位
  2. em: 继承字号,受自身和祖先影响 ，
  3. rem: 根字号, 字号常量不变,可以自定义，默认是16px，除非人为更新，否则不变。
  4. em的设置方式：推荐PC端
  5. rem的设置方式：推荐移动端
  6. 目前主流的移动端解决方案：REM+VW（根字号+视口单位）

2.使用rem+vw做表格

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  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>表格中的常用样式</title>
  8.     <style>
  9.       table td,
  10.       table th {
  11.         border: 1px solid #000;
  12.       }
  13.       table {
  14.         border-collapse: collapse;
  15.       }
  16.       table {
  17.         width: 90%;
  18.         margin: center;
  19.         text-align: center;
  20.       }
  22.       table caption {
  23.         font-size: 1.2em;
  24.         margin-bottom: 0.6em;
  25.       }
  27.       table thead {
  28.         background-color: lightgreen;
  29.       }
  31.       table tbody:not(tbody:nth-of-type(2)) tr:first-of-type td:first-of-type {
  32.         background-color: lightcyan;
  33.       }
  34.     </style>
  35.   </head>
  36.   <body>
  37.     <table>
  38.       <style>
  39.         line-height:30px
  40.         width:40VW
  41.         text-align::content
  42.         font-size:0.16rem
  43.         border-radius:0.1rem
  44.         border-collapse:collapse
  45.       </style>
  46.     </table>
  47.     <table>
  48.       <caption>
  49.         前洲中心小学课程表
  50.       </caption>
  51.       <thead>
  52.         <tr>
  53.           <th>时间</th>
  54.           <th>周一</th>
  55.           <th>周二</th>
  56.           <th>周三</th>
  57.           <th>周四</th>
  58.           <th>周五</th>
  59.         </tr>
  60.       </thead>
  62.       <tbody>
  63.         <tr>
  64.           <td rowspan="4" class="period">上午</td>
  65.           <td>数学</td>
  66.           <td>数学</td>
  67.           <td>数学</td>
  68.           <td>数学</td>
  69.           <td>数学</td>
  70.         </tr>
  72.         <tr>
  73.           <td>数学</td>
  74.           <td>数学</td>
  75.           <td>数学</td>
  76.           <td>数学</td>
  77.           <td>数学</td>
  78.         </tr>
  80.         <tr>
  81.           <td>语文</td>
  82.           <td>语文</td>
  83.           <td>语文</td>
  84.           <td>语文</td>
  85.           <td>语文</td>
  86.         </tr>
  88.         <tr>
  89.           <td>英语</td>
  90.           <td>英语</td>
  91.           <td>英语</td>
  92.           <td>英语</td>
  93.           <td>英语</td>
  94.         </tr>
  95.       </tbody>
  97.       <tbody>
  98.         <tr>
  99.           <td colspan="6">中午休息</td>
  100.         </tr>
  101.       </tbody>
  103.       <tbody>
  104.         <tr>
  105.           <td rowspan="3" class="period">下午</td>
  106.           <td>音乐</td>
  107.           <td>音乐</td>
  108.           <td>体育</td>
  109.           <td>体育</td>
  110.           <td>体育</td>
  111.         </tr>
  112.         <tr>
  113.           <td>美术</td>
  114.           <td>美术</td>
  115.           <td>美术</td>
  116.           <td>美术</td>
  117.           <td>美术</td>
  118.         </tr>
  119.         <tr>
  120.           <td>科学</td>
  121.           <td>科学</td>
  122.           <td>科学</td>
  123.           <td>科学</td>
  124.           <td>科学</td>
  125.         </tr>
  126.       </tbody>
  128.       <tfoot>
  129.         <tr>
  130.           <td>备注:</td>
  131.           <td colspan="5">每天下午15:30-17:30在校写作业</td>
  132.         </tr>
  133.       </tfoot>
  134.     </table>
  135.   </body>
  136. </html>

运行结果

上一条：1025 - 字体图标/媒体查询/定位布局下一条：1024作业 - em,rem与vw的运用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议