图文列表和课程表

1.图文列表/课程表

  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. </head>
  9. <style>
  10.     .title, .piclist{
  11.         width: 600px;
  12.         text-align: center;
  13.         overflow: hidden;
  14.     }
  15.     .piclist li{
  16.         float: left;
  17.         list-style: none;
  18.         width: 200px;
  19.         height: auto;
  20.     }
  21.     table,tr,td,thead{
  22.         margin: 0;
  23.         padding: 0;
  24.         border: 1px solid rgb(99, 96, 96);
  25.         border-spacing: 0;
  26.         text-align: center;
  27.     }
  28.     thead, tfoot{
  29.         background-color: aquamarine;
  30.     }
  31. </style>
  32. <body>
  33. <h3 class="title">图文列表</h3>
  34. <ul class="piclist">
  35.     <li><a href="/"><img src="static/images/bear.jpg" alt="树袋熊"></img></a><a href="">树袋熊</a></li>
  36.     <li><a href="/"><img src="static/images/dog.jpg" alt="小狗"></img></a><a href="">小狗</a></li>
  37.     <li><a href="/"><img src="static/images/duck.jpg" alt="小鸭"></img></a><a href="">小鸭</a></li>
  38. </ul>
  39. <hr>
  40. <table>
  41.     <caption>高坪一小课程表</caption>
  42.     <thead>
  43.         <tr>
  44.             <td>日期</td>
  45.             <td>星期一</td>
  46.             <td>星期二</td>
  47.             <td>星期三</td>
  48.             <td>星期四</td>
  49.             <td>星期五</td>
  50.         </tr>
  51.     </thead>
  52.     <tbody>
  53.         <!-- 上午 -->
  54.         <tr>
  55.             <td rowspan="4">上午</td>
  56.             <td>升旗</td>
  57.             <td>语文</td>
  58.             <td>数学</td>
  59.             <td>语文</td>
  60.             <td>数学</td>
  61.         </tr>
  62.         <tr>
  63.             <td>国学</td>
  64.             <td>数学</td>
  65.             <td>语文</td>
  66.             <td>劳动</td>
  67.             <td>语文</td>
  68.         </tr>
  69.         <tr>
  70.             <td>数学</td>
  71.             <td>美术</td>
  72.             <td>音乐</td>
  73.             <td>语文</td>
  74.             <td>体育活动</td>
  75.         </tr>
  76.         <tr>
  77.             <td>音乐</td>
  78.             <td>体育与健康</td>
  79.             <td>道德与法制</td>
  80.             <td>体育与健康</td>
  81.             <td>活动</td>
  82.         </tr>
  83.     </tbody>
  84.     <tbody>
  85.         <!-- 中午 -->
  86.         <tr>
  87.             <td colspan="6">中午休息</td>
  88.         </tr>
  89.     </tbody>
  90.     <tbody>
  91.         <!-- 下午 -->
  92.         <tr>
  93.             <td rowspan="4">下午</td>
  94.             <td>语文</td>
  95.             <td>语文</td>
  96.             <td>体育活动</td>
  97.             <td>科学</td>
  98.             <td>美术</td>
  99.         </tr>
  100.         <tr>
  101.             <td>生命生态安全</td>
  102.             <td>活动</td>
  103.             <td>语文</td>
  104.             <td>道德与法制</td>
  105.             <td>班队/心理健康</td>
  106.         </tr>
  107.         <tr>
  108.             <td>体育</td>
  109.             <td>语文</td>
  110.             <td>语文</td>
  111.             <td>数学</td>
  112.             <td>语文</td></td></td>
  113.         </tr>
  114.         <tr>
  115.             <td>体育</td>
  116.             <td>语文</td>
  117.             <td>语文</td>
  118.             <td>数学</td>
  119.             <td>数学</td>
  120.         </tr>
  121.     </tbody>
  122.     <tfoot>
  123.         <tr>
  124.             <td colspan="6">每天下午后两节为课后辅导！</td></td>
  125.         </tr>
  126.     </tfoot>
  127. </table>
  128. </body>
  129. </html>

2.效果图

更多相关文章

  1. Emmet插件使用和HTML知识及课程表作业
  2. 图文列表和课程表
  3. html中做图片,链接,列表,图文列表 及一个课程表
  4. HTML图片列表及表格制作课程表
  5. Emmet插件使用和HTML知识及课程表作业
  6. HTML入门学习之表格制作课程表实战练习
  7. 图文列表与课程表
  8. 表格/图片/链接/列表
  9. 使用table做一个简易的课程表

随机推荐

  1. Android渐变色xml文件
  2. ch024 Android BroadCastReceiver
  3. android 获取手机的所有程序和widget的包
  4. Android 透明度对应16进制值
  5. Android Theme 样式 展示
  6. android 随手记-画虚线
  7. Android 允许权限
  8. android中文字跑马灯效果
  9. Android日期时间格式国际化
  10. android 颜色值 xml