20240309web前端_第三周作业_教务系统页面

Bug.ink

已于 2024-04-09 19:51:20 修改

阅读量605

点赞数 12

文章标签：前端 javascript 开发语言 css html5 前端框架

于 2024-04-05 22:20:40 首次发布

本文链接：https://blog.csdn.net/weixin_73921499/article/details/137410736

版权

作业：教务系统页面

成果展示：

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教务系统</title>
    <style>
        .edu_top{
            display: flex;
            width: 1104px;
            height: 50px;
            margin-left: 250px;
            margin-top: 30px;
            margin-right: 360px;
            margin-bottom: 10px;
            color: #1069a4;
            font-size: 24px;           
        }
        .edu_top img{
            width: 50px;
            height: 50px;
            margin-right: 9px;
        }
        .font{
            align-items: center;
            padding-top: 7px;
        }
        .edu_mid{
            display: flex;
            width:1160px;
            height: 510px;
            background-color: #ededed79;
            float: left;
            margin-top: 30px;
            margin-left: 250px;
            border: 4px solid #ededed;
            margin-bottom: 20px;
        }
        .edu_mid img{
            width: 750px;
            height: 420px;
        }
        .edu_doc{
            margin-left: 20px;
            width: 380px;
            height: 500px;
            background-color:rgba(255, 255, 255, 0.913);
        }
        .userandpass img{
            width: 16px;
            height: 16px;
        }
        .userandpass{
            margin-left: 30px;
            margin-right: 25px;
            border-radius: 5px;
        }
        .bjdl img{
            width: 90px;
            height: 90px;
        }
        .cart:hover{
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    
    <div class = "edu_top" >
        <img src="../作业/img2/延安大学校徽2.png">
        <div class="font">延安大学教学管理信息服务平台</div>
    </div>
    <div class="edu_mid">
        <img src="../作业/img2/延安大学教务系统图片.png" alt="">
        <div class="edu_doc">
            <h5 style="margin-bottom: 20px; padding-left: 15px;">用户登录</h5>
            <div class="userandpass">
                <table style="border-radius: 5px;border-color: rgb(164, 163, 163);
                background-color: rgb(255, 255, 255);"
                 border="1px">
                    <tr>
                        <td style="border: 0; width: 55px;">
                            <div style="margin-right: 5px;padding: 4px 12px 4px 15px;
                            border-right-style:groove; border-right-color: rgb(250, 248, 248);">
                                <img src="../作业/img2/用户头像.png">
                            </div>
                        </td>
                        <td style="border: 0;padding: 1px 3px 1px 3px;">
                            <div class="cart">
                                <input type="text" name="username" value="" placeholder="用户名"
                                style="width: 250px; height: 20px;border-width: 0;
                                background-color: rgb(255, 255, 255);">
                            </div>
                        </td>
                    </tr>
                </table>
                <table style="border-radius: 5px;border-color: rgb(164, 163, 163);
                margin-top: 10px; background-color: rgb(255, 255, 255);"
                border="1px" >
                    <tr>
                        <td style="border: 0; width: 55px;">
                            <div style="margin-right: 5px;padding: 4px 12px 4px 15px;
                            border-right-style:groove; border-right-color: rgb(250, 248, 248);">
                                <img src="../作业/img2/密码图象.png">
                            </div>
                        </td>
                        <td style="border: 0;padding: 1px 3px 1px 3px;">
                            <div class="cart">
                                <input type="password" name="password" value="" placeholder="密码"
                                style="width: 250px; height: 20px;border-width: 0;
                                background-color: rgb(255, 255, 255);">
                            </div>
                        </td>
                    </tr>
                </table>
                <div  class="cart" style="font-size: small; color: #337ab7;
                margin-left: 250px; margin-top: 15px;">
                <p style="width: 80px;">忘记密码了？</p>
                </div>
                <form action="http://jwglxt.yau.edu.cn/jwglxt/xtgl/login_slogin.html" method="post">
                <button type="submit" style="background-color: #337ab7;
                color: #fff;border-radius: 5px;width: 325px;height: 30px;
                border: 0;
                "value="登录"  class="cart">登录</button>
                </form>
                
                <div style="color: #a94442;background-color: #f2dede;border-color: ebccd1;
                font-size: small;padding: 15px;margin-top: 10px;
                border-radius: 5px;">
                    “圣地教务”公众号非任何学校官方公众号，请立即取消关注，谨防受骗或个人信息泄露
                    <br>
                    登录教务管理系统途径：
                    <br>
                    1.访问http://jwglxt.yau.edu.cn/jwglxt
                    <br>
                    2.登录学校网办大厅后选择教务系统登录
                    <br>
                </div>
                <div class="bjdl" style="margin-top: 30px;">
                    <img src="../作业/img2/登录二维码.png" alt="" style="float: left;
                    margin-right: 10px;">
                    <span style="color: #333;font-size: small;">
                    <br>
                    用手机扫一扫,
                    <br>
                    安全、便捷登录
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="edu_end" style="text-align: center;
    color: #8099af;font: normal 12px microsoft YaHei;">
        <p style="display: inline-block;margin-top: 0px;">版权所有：延安大学教务处 电话：0911-2650133 传真：0911-2650131 电子信箱：ydjwc@yau.edu.cn 版本V8.3.14</p>
    </div> 
</body>
</html>

解析：

主体框架使用快就元素 div 包裹，并且使用元素属性转换将块级元素转换成行内样式并保留其中穿插动画效果，起提示作用。

top部分：

首先是 edu_top部分

<div class = "edu_top" >
        <img src="../作业/img2/延安大学校徽2.png">
        <div class="font">延安大学教学管理信息服务平台</div>
    </div>

在头head中使用<style>定义文档样式信息，即css（层叠式样式表），允许开发者在html文件中嵌入样式信息，以控制html元素的外观和布局。

        .edu_top{
            display: flex;
            width: 1104px;
            height: 50px;
            margin-left: 250px;
            margin-top: 30px;
            margin-right: 360px;
            margin-bottom: 10px;
            color: #1069a4;
            font-size: 24px;           
        }
        .edu_top img{
            width: 50px;
            height: 50px;
            margin-right: 9px;
        }

mid部分：

不断修改每个元素块之间的距离关系，并使用css渲染，使界面美观。

        .edu_mid{
            display: flex;
            width:1160px;
            height: 510px;
            background-color: #ededed79;
            float: left;
            margin-top: 30px;
            margin-left: 250px;
            border: 4px solid #ededed;
            margin-bottom: 20px;
        }
        .edu_mid img{
            width: 750px;
            height: 420px;
        }
        .edu_doc{
            margin-left: 20px;
            width: 380px;
            height: 500px;
            background-color:rgba(255, 255, 255, 0.913);
        }
        .userandpass img{
            width: 16px;
            height: 16px;
        }
        .userandpass{
            margin-left: 30px;
            margin-right: 25px;
            border-radius: 5px;
        }
        .bjdl img{
            width: 90px;
            height: 90px;
        }
        .cart:hover{
            transform: scale(1.1);
        }



    </style>
</head>
<body>


    <div class = "edu_top" >
        <img src="../作业/img2/延安大学校徽2.png">
        <div class="font">延安大学教学管理信息服务平台</div>
    </div>
    <div class="edu_mid">
        <img src="../作业/img2/延安大学教务系统图片.png" alt="">
        <div class="edu_doc">
            <h5 style="margin-bottom: 20px; padding-left: 15px;">用户登录</h5>
            <div class="userandpass">
                <table style="border-radius: 5px;border-color: rgb(164, 163, 163);
                background-color: rgb(255, 255, 255);"
                 border="1px">
                    <tr>
                        <td style="border: 0; width: 55px;">
                            <div style="margin-right: 5px;padding: 4px 12px 4px 15px;
                            border-right-style:groove; border-right-color: rgb(250, 248, 248);">
                                <img src="../作业/img2/用户头像.png">
                            </div>
                        </td>
                        <td style="border: 0;padding: 1px 3px 1px 3px;">
                            <div class="cart">
                                <input type="text" name="username" value="" placeholder="用户名"
                                style="width: 250px; height: 20px;border-width: 0;
                                background-color: rgb(255, 255, 255);">
                            </div>
                        </td>
                    </tr>
                </table>
                <table style="border-radius: 5px;border-color: rgb(164, 163, 163);
                margin-top: 10px; background-color: rgb(255, 255, 255);"
                border="1px" >
                    <tr>
                        <td style="border: 0; width: 55px;">
                            <div style="margin-right: 5px;padding: 4px 12px 4px 15px;
                            border-right-style:groove; border-right-color: rgb(250, 248, 248);">
                                <img src="../作业/img2/密码图象.png">
                            </div>
                        </td>
                        <td style="border: 0;padding: 1px 3px 1px 3px;">
                            <div class="cart">
                                <input type="password" name="password" value="" placeholder="密码"
                                style="width: 250px; height: 20px;border-width: 0;
                                background-color: rgb(255, 255, 255);">
                            </div>
                        </td>
                    </tr>
                </table>
                <div  class="cart" style="font-size: small; color: #337ab7;
                margin-left: 250px; margin-top: 15px;">
                <p style="width: 80px;">忘记密码了？</p>
                </div>
                <form action="http://jwglxt.yau.edu.cn/jwglxt/xtgl/login_slogin.html" method="post">
                <button type="submit" style="background-color: #337ab7;
                color: #fff;border-radius: 5px;width: 325px;height: 30px;
                border: 0;
                "value="登录"  class="cart">登录</button>
                </form>
                
                <div style="color: #a94442;background-color: #f2dede;border-color: ebccd1;
                font-size: small;padding: 15px;margin-top: 10px;
                border-radius: 5px;">
                    “圣地教务”公众号非任何学校官方公众号，请立即取消关注，谨防受骗或个人信息泄露
                    <br>
                    登录教务管理系统途径：
                    <br>
                    1.访问http://jwglxt.yau.edu.cn/jwglxt
                    <br>
                    2.登录学校网办大厅后选择教务系统登录
                    <br>
                </div>
                <div class="bjdl" style="margin-top: 30px;">
                    <img src="../作业/img2/登录二维码.png" alt="" style="float: left;
                    margin-right: 10px;">
                    <span style="color: #333;font-size: small;">
                    <br>
                    用手机扫一扫,
                    <br>
                    安全、便捷登录
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="edu_end" style="text-align: center;
    color: #8099af;font: normal 12px microsoft YaHei;">
        <p style="display: inline-block;margin-top: 0px;">版权所有：延安大学教务处 电话：0911-2650133 传真：0911-2650131 电子信箱：ydjwc@yau.edu.cn 版本V8.3.14</p>
    </div>

代码部分不断穿插各级元素的使用，调整小块元素的大小和布局

动画部分：缩放：

        .cart:hover{
            transform: scale(1.1);
        }


                            <div class="cart">
                                <input type="text" name="username" value="" placeholder="用户名"
                                style="width: 250px; height: 20px;border-width: 0;
                                background-color: rgb(255, 255, 255);">
                            </div>



                            <div class="cart">
                                <input type="password" name="password" value="" placeholder="密码"
                                style="width: 250px; height: 20px;border-width: 0;
                                background-color: rgb(255, 255, 255);">
                            </div>


                <div  class="cart" style="font-size: small; color: #337ab7;
                margin-left: 250px; margin-top: 15px;">
                <p style="width: 80px;">忘记密码了？</p>
                </div>


                <form action="http://jwglxt.yau.edu.cn/jwglxt/xtgl/login_slogin.html" method="post">
                <button type="submit" style="background-color: #337ab7;
                color: #fff;border-radius: 5px;width: 325px;height: 30px;
                border: 0;
                "value="登录"  class="cart">登录</button>
                </form>

分别对当光标移至用户名块，密码块，忘记密码字和登录块时实现放大1.1倍的提示效果。

end部分：

    <div class="edu_end" style="text-align: center;
    color: #8099af;font: normal 12px microsoft YaHei;">
        <p style="display: inline-block;margin-top: 0px;">版权所有：延安大学教务处 电话：0911-2650133 传真：0911-2650131 电子信箱：ydjwc@yau.edu.cn 版本V8.3.14</p>
    </div>

直接在块级元素内使用style，使前期修改简单，适合调整界面。

Bug.ink

关注

12
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
20240309web前端_第三周作业_教务系统页面

在头head中使用定义文档样式信息，即css（层叠式样式表），允许开发者在html文件中嵌入样式信息，以控制html元素的外观和布局。主体框架使用快就元素 div 包裹，并且使用元素属性转换将块级元素转换成行内样式并保留。不断修改每个元素块之间的距离关系，并使用css渲染，使界面美观。直接在块级元素内使用style，使前期修改简单，适合调整界面。代码部分不断穿插各级元素的使用，调整小块元素的大小和布局。首先是 edu_top部分。
复制链接

扫一扫