Community Learn Tools Library Leisure
search
English
Home > List of blog posts > em,rem特点改版课程表
Blogger Information
Blog 12
fans 0
comment 2
visits 6277
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
em,rem特点改版课程表
白鸽
Original
761 people have browsed it

em,rem

案例简述em，rem

em,rem本质是字体高度的单位。
一个em,rem是16px的像素。
但是em是具有父类继承的特性，而rem是继承自根类的。
如果采用rem作为宽度单位，可以初始一个数值，例如
1rem=100px;

  1. html{
  2.         font-size: 100px;
  3.      }

这样，我们的一个字的高度就是100px.但是正文中我们不能使用这么大的字啊。我们可以在body中二次设置一个字高。

  1. body{
  2.         font-size:0.16rem;
  3.      }

这样我们的字高就回到了16px。但是我们可以使用根设置的1rem=100px来设置div等标签的宽度高度了。

  1. div{
  2.         width: 14rem;
  3.         height: 10rem;
  4.     }

这时，div的宽度是1400px,高度是1000px.

改版课程表

改版课程表

  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.         html{
  10.             font-size: 1rem;
  11.         }
  12.       table td,
  13.       table th {
  14.         border: 0.0625rem solid #000;
  15.         height: 2.5rem;
  16.       }
  17.       table {
  18.         border-collapse: collapse;
  19.       }
  21.       table {
  22.         width: 50rem;
  23.         margin: auto;
  24.         text-align: center;
  25.       }
  27.       table caption {
  28.         font-size: 2rem;
  29.         margin-bottom: 1rem;
  30.       }
  32.       table thead {
  33.         background-color:lightsalmon;
  34.       }
  35.       /* 这里难道是选择了表格主体中的第一列第一行中的单元格和倒数第二个单元格  ？？   ：）*/
  36.       table tbody:not(tbody:nth-of-type(2)) tr:first-of-type td:first-of-type {
  37.         background-color:violet;
  38.       }
  39.     </style>
  40.   </head>
  41.   <body>
  42.     <table>
  43.       <caption>
  44.         改版课程表
  45.       </caption>
  46.       <thead>
  47.         <tr>
  48.           <th>时间</th>
  49.           <th>周一</th>
  50.           <th>周二</th>
  51.           <th>周三</th>
  52.           <th>周四</th>
  53.           <th>周五</th>
  54.         </tr>
  55.       </thead>
  56.       <!-- 上午 -->
  57.       <!-- 第一个tbody  -->
  58.       <tbody>
  59.         <tr>
  60.           <td rowspan="4" class="period">上午</td>
  61.           <td>数学</td>
  62.           <td>数学</td>
  63.           <td>数学</td>
  64.           <td>数学</td>
  65.           <td>数学</td>
  66.         </tr>
  67.         <tr>
  68.           <td>数学</td>
  69.           <td>数学</td>
  70.           <td>数学</td>
  71.           <td>数学</td>
  72.           <td>数学</td>
  73.         </tr>
  74.         <tr>
  75.           <td>语文</td>
  76.           <td>语文</td>
  77.           <td>语文</td>
  78.           <td>语文</td>
  79.           <td>语文</td>
  80.         </tr>
  81.         <tr>
  82.           <td>英语</td>
  83.           <td>英语</td>
  84.           <td>英语</td>
  85.           <td>英语</td>
  86.           <td>英语</td>
  87.         </tr>
  88.       </tbody>
  89.       <!-- 中午 -->
  91.       <!-- 第二个tbody  -->
  92.       <tbody>
  93.         <tr>
  94.           <td colspan="6" style="height:5.0rem">中午休息</td>
  95.         </tr>
  96.       </tbody>
  97.       <!-- 下午 -->
  98.       <!-- 第3个tbody  -->
  99.       <tbody>
  100.         <tr>
  101.           <td rowspan="3" class="period">下午</td>
  102.           <td>音乐</td>
  103.           <td>音乐</td>
  104.           <td>体育</td>
  105.           <td>体育</td>
  106.           <td>体育</td>
  107.         </tr>
  108.         <tr>
  109.           <td>美术</td>
  110.           <td>美术</td>
  111.           <td>美术</td>
  112.           <td>美术</td>
  113.           <td>美术</td>
  114.         </tr>
  115.         <tr>
  116.           <td>科学</td>
  117.           <td>科学</td>
  118.           <td>科学</td>
  119.           <td>科学</td>
  120.           <td>科学</td>
  121.         </tr>
  122.       </tbody>
  123.       <!-- 表尾 -->
  124.       <tfoot>
  125.         <tr>
  126.           <td>备注:</td>
  127.           <td colspan="5">每天下午15:30-17:30在校写作业</td>
  128.         </tr>
  129.       </tfoot>
  130.     </table>
  131.   </body>
  132. </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