使用列表,链接, 图片等制作一个图文列表或导航组件 2. 使用表格元素制作课程表/购物车(二选一)

1、使用列表，链接，图片等制作一个图文列表

div.list>ol.nextList>li*3>a>img[src="images/list$.jpg" alt="这是一只"]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      img {
        padding-left: 20px;
        padding-top: 20px;
        width: 50px;
        height: auto;
      }
    </style>
  </head>
  <body>
    <!-- div.list>ol.nextList>li*3>a>img[src="image/list$.jpg"] -->
    <div class="list">
      <ol class="nextList">
        <li>
          <a href="#"><img src="images/list1.jpg" alt="这是一只老鼠" /></a>
        </li>
        <li>
          <a href="#"><img src="images/list2.jpg" alt="这是一只企鹅" /></a>
        </li>
        <li>
          <a href="#"><img src="images/list3.jpg " alt="这是一个精灵" /></a>
        </li>
      </ol>
    </div>
  </body>
</html>

2、使用表格元素制作课程表

div.timetable>table[border="1"]>caption{三年级课程表}+(thead>tr>th{}*2+th{星期$}*5)+(tbody>tr*7>td*7)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      img {
        padding-left: 20px;
        padding-top: 20px;
        width: 50px;
        height: auto;
      }
      tr,
      th,
      td {
        text-align: center;
      }
      table {
      }
    </style>
  </head>
  <body>
    <!-- div.timetable>table[border="1"]>caption{三年级课程表}+(thead>tr>th{}*2+th{星期$}*5)+(tbody>tr*7>td*7) -->
    <div class="timetable">
      <table border="1">
        <caption>
          三年级课程表
        </caption>
        <thead>
          <tr>
            <th colspan="2">类别/时间</th>
            <th>星期1</th>
            <th>星期2</th>
            <th>星期3</th>
            <th>星期4</th>
            <th>星期5</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td rowspan="4">上午</td>
            <td>第一节</td>
            <td>数学</td>
            <td>语文</td>
            <td>语文</td>
            <td>英语</td>
            <td>英语</td>
          </tr>
          <tr>
            <td>第二节</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>语文</td>
            <td>语文</td>
          </tr>
          <tr>
            <td>第三节</td>
            <td>科学</td>
            <td>英语</td>
            <td>音乐</td>
            <td>综合实践</td>
            <td>体育</td>
          </tr>
          <tr>
            <td>第四节</td>
            <td>品德与社会</td>
            <td>科学</td>
            <td>数学</td>
            <td>体育</td>
            <td>美术</td>
          </tr>
          <tr>
            <td rowspan="3">下午</td>
            <td colspan="6">午间休息</td>
          </tr>
          <tr>
            <td>第五节</td>
            <td>综合实践</td>
            <td>美术</td>
            <td>信息技术</td>
            <td>品德与社会</td>
            <td>数学</td>
          </tr>
          <tr>
            <td>第六节</td>
            <td>数学</td>
            <td>语文</td>
            <td>体育</td>
            <td>劳技</td>
            <td>音乐</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

批改老师：

PHPz

批改状态：合格

老师批语：代码附加上效果图更佳

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

Markdown语法和emmet语法

2022-07-02 10:20:44