用hbuilderx制作课程表

最新推荐文章于 2024-07-01 22:21:31 发布

原创最新推荐文章于 2024-07-01 22:21:31 发布 · 1.6k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端

本文介绍如何利用HBuilderX工具制作一个美观的课程表。通过HTML和CSS，实现了一周课程的清晰展示，包括上课时间、课程名、教师和班级信息。表格设计采用不同背景色区分各时间段，配以边框和居中对齐，使得课程表既实用又整洁。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            table {
                border: 3px solid #ccc;
                border-collapse: collapse;
                margin: 0 auto;
                text-align: center;
            }

            td {
                border: 3px solid #ccc;
                height: 100px;
            }

            .a {
                background-color: skyblue;
            }

            .b {
                background-color: skyblue;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td></td>
                <td>星期一</td>
                <td>星期二</td>
                <td>星期三</td>
                <td>星期四</td>
                <td>星期五</td>
            </tr>
            <tr class="a">
                <td>第一二节</td>
                <td></td>
                <td>人工智能与应用<br />徐国清<br />G计算机1903</td>
                <td>企业网站综合实训<br />付显<br />G计算机1903</td>
                <td>信息安全<br />华隆<br />G计算机1903</td>
                <td></td>
            </tr>
            <tr>
                <td>第三四节</td>
                <td>形势与政策9<br />赵国峰<br />G计算机1903</td>
                <td></td>
                <td></td>
                <td>前端框架技术<br />岳小兵<br />G计算机1903</td>
                <td>计算机网络基础<br />任海留洋<br />G计算机1903</td>
            </tr>
            <tr class="b">
                <td>第五六节</td>
                <td>企业网站综合实训<br />付显<br />G计算机1903</td>
                <td></td>
                <td></td>
                <td>影视编辑与合成<br />庞士昱<br />G计算机1903</td>
                <td></td>
            </tr>
            <tr>
                <td>第七八节</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>影视编辑与合成<br />庞士昱<br />G计算机1903</td>
            </tr>
        </table>
    </body>
</html>

以上代码是一个简单的HTML表格，用来展示一个星期的课程安排。这个表格展示了一个星期的课程安排，包括了上课时间、课程名称、任课教师和班级信息。

表格使用了CSS样式来美化，每节课程的格子都有不同的背景颜色，便于区分。同时，表格具有边框和居中对齐的特点，看起来非常整齐。