Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 图文列表和课程表
Blogger Information
Blog 12
fans 0
comment 0
visits 9407
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
图文列表和课程表
P粉355147598
Original
455 people have browsed it

1.图文列表

1.图文列表代码

  1. <body>
  2.     <!-- 图文列表 ul.nav>li*3.item>a+p>a-->
  3.     <ul class="nav" style="display: flex; list-style: none">
  4.         <li class="item">
  5.             <a href="#"><img src="./static/images/bear.jpg" alt=""></a>
  6.             <p><a href="#">bear</a></p>
  7.         </li>
  8.         &nbsp;
  9.         <li class="item">
  10.             <a href="#"><img src="./static/images/dog.jpg" alt=""></a>
  11.             <p><a href="#">dog</a></p>
  12.         </li>
  13.         &nbsp;
  14.         <li class="item">
  15.             <a href="#"><img src="./static/images/duck.jpg" alt=""></a>
  16.             <p><a href="#">duck</a></p>
  17.         </li>
  18.     </ul>
  19.     </ul>
  20. </body>

2.效果图

3.课程表代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>家里蹲大学课程表</title>
  9.     <style>
  10.         body {
  11.             background: #fff;
  12.             text-align: center;
  13.         }
  15.         caption {
  16.             width: 439px;
  17.             height: 80px;
  18.         }
  20.         td {
  21.             width: 58px;
  22.             height: 40px;
  23.             border: 1px solid;
  24.             border-radius: 10%;
  25.             filter: opacity(0.7);
  26.         }
  28.         table tr td:first-child {
  29.             width: 30px;
  30.         }
  32.         table {
  33.             margin: auto;
  34.             padding: 0;
  35.             width: 439px;
  36.             height: 480px;
  37.             text-align: center;
  38.             font-size: 13px;
  39.         }
  40.     </style>
  41. </head>
  43. <body>
  44.     <table>
  45.         <caption>
  46.             <h3>第18周课程表</h3>
  47.         </caption>
  48.         <thead>
  49.             <tr>
  50.                 <th>时间</th>
  51.                 <th>周一</th>
  52.                 <th>周二</th>
  53.                 <th>周三</th>
  54.                 <th>周四</th>
  55.                 <th>周五</th>
  56.             </tr>
  57.         </thead>
  58.         <tbody>
  59.             <tr>
  60.                 <td>一</td>
  61.                 <td rowspan="2"></td>
  62.                 <td rowspan="4">视觉设计基础</td>
  63.                 <td rowspan="2">软件导论</td>
  64.                 <td rowspan="2">电路与电子技术</td>
  65.                 <td rowspan="2">[非本周]电路与电子技术</td>
  66.             </tr>
  67.             <tr>
  68.                 <td>二</td>
  69.             </tr>
  70.             <tr>
  71.                 <td>三</td>
  72.                 <td rowspan="2">操作系统</td>
  73.                 <td rowspan="2">UI界面设计</td>
  74.                 <td rowspan="2">操作系统</td>
  75.                 <td rowspan="2">毛概</td>
  76.             </tr>
  77.             <tr>
  78.                 <td>四</td>
  79.             </tr>
  80.         </tbody>
  81.         <!-- 午休 -->
  82.         <tbody>
  83.             <tr>
  84.                 <td colspan="6">中午休息</td>
  85.             </tr>
  86.         </tbody>
  87.         <!-- 下午 -->
  88.         <tbody>
  89.             <tr>
  90.                 <td>五</td>
  91.                 <td rowspan="2">电路与电子技术</td>
  92.                 <td rowspan="2">大学体育</td>
  93.                 <td rowspan="2">毛概</td>
  94.                 <td rowspan="2"></td>
  95.                 <td rowspan="2">软件导论</td>
  96.             </tr>
  97.             <tr>
  98.                 <td>六</td>
  99.             </tr>
  100.             <tr>
  101.                 <td>七</td>
  102.                 <td rowspan="2">[非本周]形式与政策IV</td>
  103.                 <td rowspan="2"></td>
  104.                 <td rowspan="2"></td>
  105.                 <td rowspan="2">[非本周]Web前端高级技术</td>
  106.                 <td rowspan="2">操作系统</td>
  107.             </tr>
  108.             <tr>
  109.                 <td>八</td>
  110.             </tr>
  111.         </tbody>
  112.         <!-- 表尾 -->
  113.         <tfoot>
  114.             <tr>
  115.                 <td>备注:</td>
  116.                 <td colspan="5">如有调整，会提前通知，请各位同学按时上课</td>
  117.             </tr>
  118.         </tfoot>
  119.     </table>
  120. </body>
  122. </html>

4.效果图

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