Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1024作业
Blogger Information
Blog 26
fans 0
comment 1
visits 10546
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1024作业
P粉751989631
Original
680 people have browsed it

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>

运行结果

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：完成的很好，继续加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post