表格/图片/链接/列表 - - php中文网博客

首页 > 博客列表 > 表格/图片/链接/列表

博主信息

博文 7

粉丝 0

访问量 8736

专题推荐

更多>

一、表格/图片/链接/列表

<!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>
  </head>
  <body>
    <table
      style="width: 80%; text-align: center"
      border="1"
      cellspacing="0"
      cellpadding="5"
    >
      <caption style="font-weight: bolder; margin-bottom: 1em">
        课时表
      </caption>
      <thead>
        <tr style="background: rgb(111, 140, 219)">
          <th colspan="2">时间</th>
          <th>星期一</th>
          <th>星期二</th>
          <th>星期三</th>
          <th>星期四</th>
          <th>星期五</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th rowspan="3">上午</th>
          <th>9:00-9:40</th>
          <th>语文</th>
          <th>数学</th>
          <th>英语</th>
          <th>音乐</th>
          <th>体育</th>
        </tr>
        <tr>
          <th>9:55-10:35</th>
          <th>语文</th>
          <th>数学</th>
          <th>英语</th>
          <th>音乐</th>
          <th>体育</th>
        </tr>
        <tr>
          <th>10:50-11:30</th>
          <th>语文</th>
          <th>英语</th>
          <th>数学</th>
          <th>音乐</th>
          <th>体育</th>
        </tr>
        <tr>
          <th colspan="7">午休(11:30-13:00)</th>
        </tr>
        <tr>
          <th
            rowspan="2
        "
          >
            下午
          </th>
          <th>13:00-13:40</th>
          <th>语文</th>
          <th>英语</th>
          <th>数学</th>
          <th>音乐</th>
          <th>体育</th>
        </tr>
        <tr>
          <th>13:55-14:35</th>
          <th>数学</th>
          <th>英语</th>
          <th>语文</th>
          <th>体育</th>
          <th>音乐</th>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>备注</th>
          <th colspan="6">每天16:00之前提交作业</th>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

：）演示：

课表描述

二、图片/链接/列表

<!DOCTYPE html>
<html lang="zh-CN">
<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>图片/链接/列表</title>
    <style>
        img{
          width: 300px;
          height: 180px;
        }
        ul>li{
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <ul class="nav" style="display: flex; list-style: none;width: 100%;">
        <li class="item">
            <a href="https://www.php.cn/course/1401.html">
                <img src="./image/part1.jpeg" alt="" /><br>
                <span>第一课</span>
            </a>
        </li>
        <li class="item">
            <a href="https://www.php.cn/course/1400.html">
                <img src="./image/part2.jpeg" alt="" />
                <br>
                <span>第二课</span>
            </a>
        </li>
        <li class="item">
            <a href="https://www.php.cn/course/1399.html">
                <img src="./image/part3.jpeg" alt="" />
                <br>
                <span>第三课</span>
            </a>
        </li>
    </ul>
</body>
</html>

：）演示：

图片列表

批改老师：

PHPz

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

css基础

2022-03-29 12:44:17