12.23日网页设计

最新推荐文章于 2024-07-17 14:13:18 发布

怡云_Expectancy

最新推荐文章于 2024-07-17 14:13:18 发布

阅读量337

点赞数 10

文章标签： html css 前端

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

版权

在前几天设计的网页上加入了一些细节，改变了总体的背景布局，并增加了几个小板块。由于对于一些地方不太清楚，很多部分都是由ai协助完成的。

网页由内嵌css和html生成的静态页面，没有加入任何动态加载效果（图片都是由我截取下来，因此使用均为相对路径）

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>学生教学系统</title>
        <style>
            /* 设置背景颜色，铺满整个网页 */
            body {
                margin: 0; /* 移除默认的 margin */
                padding: 0; /* 移除默认的 padding */
                background-color: #34b4f7; /* 蓝色背景，带有透明度 */
                height: 100vh; /* 确保至少填满整个视口的高度 */
                position: relative; /* 为白色背景块设置定位上下文 */
            }

            /* 通过伪元素在 body 的右下角添加小背景 */
            body::after {
                content: ''; /* 伪元素需要内容，即使为空 */
                position: absolute; /* 绝对定位，相对于 body */
                right: 0; /* 右侧与下方距离均为 0 */
                bottom: 0;
                background-color: #FFFFFF; /* 白色背景 */
                width: 90%; /* 宽度为 body 宽度的 80% */
                height: 93%; /* 高度为 body 高度的 93% */
                z-index: 1; /* 确保它在内容下面 */
            }

            /* 主体内容容器样式，确保内容在白色背景区域内 */
            .content-container {
                position: absolute;
                top: 10%; /* 调整以确保内容在白色背景内 */
                left: 20%; /* 调整以确保内容在白色背景内 */
                width: 60%; /* 调整宽度以适应设计 */
                height: 80%; /* 调整高度以适应设计 */
                z-index: 2; /* 确保它在白色背景之上 */
                background-color: #FFFFFF; /* 设置背景为白色 */
            }
            /* 图片logo样式 */
            .header-logo {
                position: absolute; /* 绝对定位 */
                top: 0; /* 顶部 */
                left: 0; /* 左侧 */
                height: 7%; /* 高度为视口高度的7% */
                z-index: 10; /* 确保图片在其他内容上方 */
            }


            /* 主体位置 */
            main {
                width: 100%;
            }

            .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;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .notifications {
                width: 95%;
                margin: 10px;
                padding: 20px;
                background-color: #FFFFFF;
                border: 1px solid #ddd;
                border-radius: 5px;
            }

            table {
                width: 100%;
                border-collapse: collapse;
            }

            th, td {
                border: 1px solid #ddd;
                padding: 8px;
                text-align: center;
            }

            .additional-blocks {
                display: flex;
                justify-content: space-around; /* 如果需要更多空间，请调整此设置 */
                margin: 10px 0; /* 上下外边距 */
            }

        </style>
    </head>
    <body>
        <img src="./img/屏幕截图 2023-12-23 233810.png" alt="Logo" class="header-logo" />
        <div class="content-container">
            
            <main>
                <div class="row">
                    <div class="block profile">
                        <b>学生基本信息</b>
                        <br>
                        <img src="./img/屏幕截图 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>
                <div class="notifications">学习提醒</div>
                <div class="notifications">学习目标</div>
                <div class="notifications">学业消息</div>

            </main>
        </div>
    </body>
</html>

运行结果如下：

页面做得比较粗糙，后续还需要经过大量修改与丰富

怡云_Expectancy

关注

10
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
12.23日网页设计

在前几天设计的网页上加入了一些细节，改变了总体的背景布局，并增加了几个小板块。由于对于一些地方不太清楚，很多部分都是由ai协助完成的。网页由内嵌css和html生成的静态页面，没有加入任何动态加载效果（图片都是由我截取下来，因此使用均为相对路径）页面做得比较粗糙，后续还需要经过大量修改与丰富。
复制链接

扫一扫