博客列表 >html基础-图文列表、表格

html基础-图文列表、表格

CY明月归
CY明月归原创
2022年03月18日 11:35:45881浏览

作业内容:1. 使用图片,链接,列表,写一个图文列表 2. 使用表格写一个课程表或商品表

作业一:图文列表 

微信截图_20220318103910.png


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://www.cnblogs.com/summit7ca/p/6944215.html" target="_blank">emmet学习</a>
    <button onclick="alert('提交成功')">获取邮箱</button><hr/>
    <!-- 图片 -->
    <img src="../0316/http.png" width="200px" height="100px" alt="haha"><hr/>
    <!-- 链接 -->
    <a href="https://www.php.cn/course/1382.html" target="_blank">19期的课程</a><hr/>
    <!-- 列表 -->
    <ul style="display: flex; list-style: none;" >
        <li><img src="../0317/img/panda.jpeg" alt="" width="100px" height="100px"><p>http3</p></li> 
        <li><img src="../0317/img/panda.jpeg" alt="" width="100px" height="100px"><p>http1</p></li> 
        <li><img src="../0317/img/panda.jpeg" alt="" width="100px" height="100px"><p>http4</p></li> 
        <li><img src="../0317/img/panda.jpeg" alt="" width="100px" height="100px"><p>http2</p></li> 
    </ul>
<!-- 有序列表ol无序列表ul -->
    <nav>
        <a href=""><img src="img/panda.jpeg" width="100px" height="100px" alt=""></a>
        <a href=""><img src="img/panda.jpeg" width="100px" height="100px" alt=""></a>
        <a href=""><img src="img/panda.jpeg" width="100px" height="100px" alt=""></a>
    </nav>
</body>
</html>

作业二:课程表

微信图片_20220318103714.png

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div style="text-align:center;">
        <h2>小学生课程表</h2>
    <!-- <title>小学生课程表</title> -->
    <table border="1" style="margin: 0 auto;" cellspacing='0' width='400px'>
        <thead>
            <th>时间</th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
        </thead>
        <tr>
            <td rowspan="4" bgcolor="lightgreen">上午</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 colspan="6">中午休息</td>
            
        </tr>
        <tr>
            <td rowspan="4" bgcolor="lightgreen">下午</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 bgcolor="gray">备注</td>
            <td colspan="5" bgcolor="gray">写完作业才能回家</td>

        </tr>
    </table>
    </div>
    
</body>
</html>

商品表:

微信图片_20220318113507.png

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议