12.19网页设计练习

最新推荐文章于 2024-11-01 12:26:05 发布

怡云_Expectancy

最新推荐文章于 2024-11-01 12:26:05 发布

阅读量398

点赞数 7

文章标签： css css3 前端

本文链接：https://blog.csdn.net/As_Expected/article/details/135089381

版权

本文描述了作者使用HTML和CSS为完成网页设计作业而创建的教务系统学生部分，包括学生基本信息、课程表和通知消息的初步设计。

摘要由CSDN通过智能技术生成

为完成老师布置的网页设计作业，决定做一个教务系统网页（只包含学生部分），教务系统包含学生信息，学生课表，消息，以及学习完成情况等等，今天先暂时使用css与html设计一个简易的小网页：

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-family: Arial, sans-serif;
                background-color: #297ee0;
            }
            header {
                display: flex;
                justify-content: center;
                width: 100%;
                padding: 20px;
                background-color: #f0f0f0;
            }
            main {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100%;
                padding: 20px;
            }
            .row {
                display: flex;
                flex-direction: row;
                width: 100%;
                justify-content: space-around;
            }
            .profile {
                flex: 0.3;  /*设置学生信息背景大小*/
                margin: 10px;
                padding: 20px;
                background-color: #FFFFFF;
                border: 1px solid #ddd;
                border-radius: 5px;
            }
            .schedule {
                flex: 1;  /* 设置课程表的背景大小 */
                margin: 10px;
                padding: 20px;
                background-color: #FFFFFF;
                border: 1px solid #ddd;
                border-radius: 5px;
                height: 500px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .notifications {
                flex: 100%;  /* 设置通知消息的背景大小 */
                margin: 10px;
                padding: 20px;
                background-color: #FFFFFF;
                border: 1px solid #ddd;
                border-radius: 5px;
                width:95%
            }
            table {
                width: 100%;
                border-collapse: collapse;
            }
            th, td {
                border: 1px solid #ddd;
                padding: 8px;
                text-align: center;
            }
        </style>
    </head>
<body>
    <header>
        <div class="logo">Logo</div>
        <nav>导航栏</nav>
    </header>
    <main>
        <div class="row">
            <div class="block profile">
                <br><br><br><br><br><br>
                <b >学生基本信息</b>
                </br>
                <img src="屏幕截图 2023-12-19 162240.png" alt="学生照片" width="100px">
                <br>    
                姓名：张三<br>
                学号：20225433<br>
                院系：计算机科学与技术学院<br>
                专业：计算机科学与技术<br>
                班级：计算机科学与技术2022级1班
            </div>
            <div class="schedule">
                <table>
                    <tr>
                        <th>时间</th>
                        <th>星期一</th>
                        <th>星期二</th>
                        <th>星期三</th>
                        <th>星期四</th>
                        <th>星期五</th>
                        <th>星期六</th>
                        <th>星期天</th>
                    </tr>
                    <tr>
                        <td>8:00-10:00</td>
                        <td>数据结构与算法</td>
                        <td>离散数学</td>
                        <td>编译原理</td>
                        <td>计算机网络</td>
                        <td>c语言程序设计</td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>10:00-12:00</td>
                        <td>毛泽东思想概论</td>
                        <td>大学英语</td>
                        <td>体育</td>
                        <td>大学英语</td>
                        <td>数据结构与算法</td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>14:00-16:00</td>
                        <td>离散数学</td>
                        <td>毛泽东思想概论</td>
                        <td>大学英语</td>
                        <td>c语言程序设计</td>
                        <td>计算机网络</td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>16:00-18:00</td>
                        <td>web设计</td>
                        <td>线性代数</td>
                        <td>线性代数</td>
                        <td>数据库原理与应用</td>
                        <td>计算机组成原理</td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>20:00-21:30</td>
                        <td>计算机组成原理</td>
                        <td>web设计</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="notifications">通知消息</div>
    </main>
</body>
</html>

运行结果如下：