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

已于 2024-04-09 19:51:20 修改
阅读量605 收藏 7
点赞数 12
文章标签： 前端 javascript 开发语言 css html5 前端框架
于 2024-04-05 22:20:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Bug.ink

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值