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.效果图

更多相关文章

  1. HTML图片列表及表格制作课程表
  2. Emmet插件使用和HTML知识及课程表作业
  3. 两分钟彻底让你明白Android(安卓)Activity生命周期(图文)!
  4. 图文列表与课程表代码实现
  5. HTML入门学习之表格制作课程表实战练习
  6. 图文列表与课程表
  7. 图文列表和表格（商品表）
  8. 图文列表和行程列表
  9. 使用table做一个简易的课程表

随机推荐

  1. go语言是脚本语言吗
  2. go是动态语言还是静态语言
  3. godoc命令不存在的解决方法
  4. go语言删除文件的方法
  5. go语言开源么
  6. mac下怎么安装go语言
  7. go语言 类型转换表示什么
  8. yum怎么安装go语言
  9. go语言是动态语言么
  10. 详解golang string和[]byte的对比