HTML小练习------彩色课程表------小网页

最新推荐文章于 2024-07-11 17:51:07 发布

**kwargs

最新推荐文章于 2024-07-11 17:51:07 发布

阅读量931

点赞数

本文链接：https://blog.csdn.net/liuxingxing_star/article/details/103694326

版权

第三阶段专栏收录该内容

20 篇文章 0 订阅

订阅专栏

HTML小练习------彩色课程表
可以练习很多基础操作命令, 代码如下
如图:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>带颜色的课程表</title>
    <style>
        /* 去除单元格间距 */
        table{border-spacing: 0; text-align: center; font-size: 28px}
        td{
            width: 130px;
            height: 40px;
            border: 1px solid black
        }
        #h1{text-align: center; background-color: #6ebf3f}
        .head{background-color: #ed7ab1; text-align: left}
        .week{background-color: #7fcdcd}
        .am{background-color: #9a61a8}
        .wx{background-color: #6ebf3f}
        .pm{background-color: #f69da1}

    </style>
</head>
<body>
    <h1 id="h1" >课 程 表</h1>
    <form action="">
        <table border="1px" align="center">
            <tr class="head">
                <td colspan="3"> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 姓 名 : </td>
                <td colspan="3"> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 班 级 : </td>
            </tr>
            <tr class="week">
                <td>星 期</td>
                <td>一</td>
                <td>二</td>
                <td>三</td>
                <td>四</td>
                <td>五</td>
            </tr>
            <tr>
                <td class="am" rowspan="4">上 <br> <br> 午</td>
                <td  ></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td class="wx" colspan="6">午 &nbsp  &nbsp  &nbsp  &nbsp  &nbsp  &nbsp  &nbsp 
                        &nbsp  &nbsp  &nbsp  &nbsp  &nbsp  &nbsp  &nbsp 休</td>
            </tr>
            <tr>
                <td class="pm" rowspan="3">下 <br> <br> 午</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>

    </form>
</body>
</html>

**kwargs

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML小练习------彩色课程表------小网页

HTML小练习------彩色课程表可以练习很多基础操作命令, 代码如下如图:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-...
复制链接

扫一扫

专栏目录