Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1024作业
Blogger Information
Blog 19
fans 0
comment 1
visits 7375
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作业
移动用户-4050479
Original
328 people have browsed it
  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>
  10.     <style>
  11.         table,tr,th,td{
  12.             border: 0.01rem solid black;
  13.             border-collapse: collapse;
  14.         }
  15.         table {
  16.             width: 80vw;
  17.             height: auto;
  18.             text-align: center;
  19.         }
  20.         table caption {
  21.             font-size:2rem;
  22.             font-weight: bold;
  23.         }
  24.         table thead {
  25.             background-color: aqua;
  26.         }
  27.         table tbody:nth-of-type(1) tr:nth-of-type(1) td:nth-of-type(1){
  28.             background-color: aquamarine;
  29.         }
  30.         table tbody:nth-of-type(3) tr:nth-of-type(1) td:nth-of-type(1){
  31.             background-color: aquamarine;
  32.         }
  33.         table tr:nth-of-type(even){
  34.             background-color: gray;
  35.         }
  36.         /* table tfoot{
  37.             background-color: gray;
  38.         } */
  39.     </style>
  41. </head>
  42. <body>
  45.     <body>
  46.         <table>
  47.           <caption>
  48.             课程表
  49.           </caption>
  50.           <thead>
  51.             <tr>
  52.               <th>时间</th>
  53.               <th>周一</th>
  54.               <th>周二</th>
  55.               <th>周三</th>
  56.               <th>周四</th>
  57.               <th>周五</th>
  58.             </tr>
  59.           </thead>
  60.           <!-- 上午 -->
  61.           <!-- 第一个tbody  -->
  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>
  71.             <tr>
  72.               <td>数学</td>
  73.               <td>数学</td>
  74.               <td>数学</td>
  75.               <td>数学</td>
  76.               <td>数学</td>
  77.             </tr>
  78.             <tr>
  79.               <td>语文</td>
  80.               <td>语文</td>
  81.               <td>语文</td>
  82.               <td>语文</td>
  83.               <td>语文</td>
  84.             </tr>
  85.             <tr>
  86.               <td>英语</td>
  87.               <td>英语</td>
  88.               <td>英语</td>
  89.               <td>英语</td>
  90.               <td>英语</td>
  91.             </tr>
  92.           </tbody>
  93.           <!-- 中午 -->
  95.           <!-- 第二个tbody  -->
  96.           <tbody>
  97.             <tr>
  98.               <td colspan="6">中午休息</td>
  99.             </tr>
  100.           </tbody>
  101.           <!-- 下午 -->
  102.           <!-- 第3个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>
  127.           <!-- 表尾 -->
  128.           <tfoot>
  129.             <tr>
  130.               <td>备注:</td>
  131.               <td colspan="5">每天下午15:30-17:30在校写作业</td>
  132.             </tr>
  133.           </tfoot>
  134.         </table>
  135.       </body>
  137. </body>
  138. </html>

  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>
  9.     <style>
  10.         *{
  11.             margin: 0;
  12.             padding: 0;
  13.             box-sizing: border-box;
  14.         }
  15.         .css {
  16.             line-height: 1.5rem;
  17.             margin-top: 1.25rem;
  18.             width: 18.75rem ;
  19.             height: auto ;
  20.             border: .3125rem solid royalblue;
  21.             border-radius: 2rem;
  22.             padding: .625rem;
  23.             text-align: left;
  24.             box-shadow: 0rem 0rem 0.625rem black;
  26.         }
  27.         .css p {
  28.             color: black;
  29.             font-size: 1rem;
  30.         }
  31.         .css:nth-of-type(1) p:nth-last-of-type(1) {
  32.             color: red;
  33.         }
  35.         .vw{
  36.             width: 50vw;
  37.             height: 5vw;
  38.             border: 3px solid black;
  39.         }
  40.     </style>
  42. </head>
  43. <body>
  45.     <div class="vw">
  47.     </div>
  50.     <div align="center">
  51.         <div class="css">
  53.             <p>绝对单位: px</p>
  54.             <p>相对单位: em , rem , vw , vh , %</p>
  55.             <p>font-size: 可以被继承</p>
  56.             <p>自适应页面不要规定绝对单位</p>
  58.         </div>
  59.         <div class="css">
  61.             <p>em 是继承字号 受自身和父元素等影响</p>
  62.             <p>大多数情况 ：</p>
  63.             <p>PC => em</p>
  64.             <p>移动端 => rem</p>
  65.             <p></p>
  66.             <p></p>
  67.         </div>
  69.         <div class="css">
  71.             <p>视口 ： 浏览器可见的网页内容</p>
  72.             <p>类似于百分比</p>
  73.             <p>与百分比区别是：</p>
  74.             <p>视口是以浏览器大小为参照</p>
  75.             <p>百分比以父元素为参照</p>
  76.             <p>布局宽度受限制，高度无限制</p>
  77.             <p></p>
  78.             <p></p>
  80.         </div>
  81.     </div>
  84. </body>
  85. </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