HTML——超级课程表页面制作

最新推荐文章于 2023-02-23 19:00:13 发布

Volcano_WQL

最新推荐文章于 2023-02-23 19:00:13 发布

阅读量1k

点赞数

文章标签： html5 css css3 html

本文链接：https://blog.csdn.net/qq_45614713/article/details/104824053

版权

方法：

借助html,css相关知识制作。
1.用表格来做主体设计，相同课程使之显示效果相同。
2.使用属性选择器将相同课程的效果同化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超课</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        table,tr,td{
            border:1px solid  lightgray;
            text-align: center;
            color: floralwhite;
            border-collapse: collapse;
        }
        table{
            margin:0 auto;
            left: 0;top:0;right:0;bottom:0;
        }
        td{
            width: 20px;
            height:43PX;
            background-color: gainsboro;
        }
        td[class*="VS"]{
            background-color: aquamarine;
        }
        td[class*="OS"]{
            background-color: khaki;
        }
        td[class*="SE"]{
            background-color: lightpink;
        }
        td[class*="UI"]{
            background-color: greenyellow;
        }
        td[class*="CE"]{
            background-color: cornflowerblue;
        }
        td[class*="MG"]{
            background-color: yellow;
        }
        td[class*="PE"]{
            background-color: lightgreen;
        }
        td[class*="PS"]{
            background-color: lightsteelblue;
        }
        td[class*="Web"]{
            background-color: limegreen;
        }
        tr:nth-child(2) td,td:nth-child(1){
            color: black;
        }
        img{
            margin-bottom:-3px;
            margin-left: -1px;
        }
    </style>
</head>
<body>

<table>
    <tr>
        <td colspan="8">
            <header>
                <img src="超课.png">
            </header>
        </td>
    </tr>
    <tr>
        <td>    </td>
        <td>周一</td>
        <td>周二</td>
        <td>周三</td>
        <td>周四</td>
        <td>周五</td>
        <td>周六</td>
        <td>周日</td>
    </tr>
    <tr>
        <td>1</td>
        <td>    </td>
         <td class="VS" rowspan="4">视觉<br>设计<br>基础</td>
        <td class="SE" rowspan="2">软件<br>工程<br>导论</td>
        <td class="CE" rowspan="2">电路<br>与<br>电子<br>技术</td>
        <td class="CE" rowspan="2">电路<br>与<br>电子<br>技术</td>
        <td class="UI" rowspan="8">UI<br>界面<br>设计</td>
        <td>    </td>
    </tr>
    <tr>
        <td>2</td>
        <td>    </td>
        <td>    </td>
    </tr>
    <tr>
        <td>3</td>
        <td class="OS" rowspan="2">操作<br>系统</td>
        <td class="UI" rowspan="2">UI<br>界面<br>设计</td>
        <td class="OS" rowspan="2">操作<br>系统</td>
        <td class="MG" rowspan="2">毛概</td>
        <td>    </td>
    </tr>
    <tr>
        <td>4</td>
        <td>    </td>
    </tr>
    <tr>
        <td>5</td>
        <td class="CE" rowspan="2">电路<br>与<br>电子<br>技术</td>
        <td>    </td>
        <td class="MG" rowspan="2">毛概</td>
        <td></td>
        <td class="SE" rowspan="2">软件<br>工程<br>导论</td>
        <td>    </td>
    </tr>
    <tr>
        <td>6</td>

        <td>    </td>

        <td>    </td>
        <td>    </td>
    </tr>
    <tr>
        <td>7</td>
        <td class="SP" rowspan="2">形势<br>与<br>政策</td>
        <td class="PE" rowspan="2">大学<br>体育<br>(四)</td>
        <td>    </td>
        <td class="Web" rowspan="2">Web<br>前端<br>高级<br>设计</td>
        <td class="OS" rowspan="2">操作<br>系统</td>
        <td>    </td>
    </tr>
    <tr>
        <td>8</td>
        <td>    </td>
        <td>    </td>
    </tr>
    <tr>
        <td>9</td>
        <td class="UI" rowspan="2">UI<br>界面<br>设计</td>
         <td class="PS" rowspan="3">PS<br>图像<br>处理</td>
         <td class="PS" rowspan="3">PS<br>图像<br>处理</td>
        <td class="Web" rowspan="3">Web<br>前端<br>高级<br>设计</td>
        <td>    </td>
        <td class="Web" rowspan="3">Web<br>前端<br>高级<br>设计</td>
        <td>     </td>
    </tr>
    <tr>
        <td>10</td>
        <td>     </td>
        <td>     </td>
    </tr>
    <tr>
        <td>11</td>
        <td>    </td>
        <td>    </td>
        <td>    </td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述