简约大气的登录界面，记录下来方便下次使用！

最新推荐文章于 2024-04-28 15:36:04 发布
最新推荐文章于 2024-04-28 15:36:04 发布
阅读量3k 收藏 34
点赞数 3
分类专栏： html 文章标签： html 登录界面 Login
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/molixiangshi/article/details/80110372
版权

今天写了一个登录界面，现在记录下来方便以后使用！

首先是样式文件（Login.css）：

*{
    margin:0px; padding:0px;
}

a{
    text-decoration:none;
}

body{
    background:#024aa3 url("images/loginBg.png") no-repeat;
    background-size:cover;
    background-repeat:no-repeat;
}

#loginWraper {
    position:fixed;
    top:50%;
    left:50%;
    margin-left:-250px;
    margin-top:-150px;
    width:500px;
    height:350px;
    background:url(images/loginWraper.png);
}

#title{
    width:80%;
    height:45px;
    margin:10px auto;
    line-height:45px;
    text-align:center;
    font-size:30px;
    font-family:YouYuan;
    font-weight:bold;
    color:white;
}

#content, #action, #loginConfirm{
    margin-top:15px;
}

#content table tr td, #loginConfirm table tr td{
    height:50px;
}

#content label{
    color:white;
    font-weight:bold;
    font-family:YouYuan;
    letter-spacing:1px;
    font-size:14px;
    height:30px;
    margin-left:115px;
    margin-right:5px;
}

#studentNumber, #password, #validateCode{
    color:white;
    width:200px;
    height:30px;
    border-radius:5px;
    padding-left:5px;
    letter-spacing:0.5px;
    font-size:14px;
    background-color:rgba(255, 255, 255, 0.40);
    border:0px;
    /*border:2px solid rgba(0, 215, 237, 1.00);*/
}

#validateCode{
    width:200px;
}

#studentNumber:focus, #password:focus, #validateCode:focus{
    border:0px;
    /*border:2px solid #00a3f6;*/
    outline:none;
}

#code{
    float:right;
    margin-right:5px;
    height:30px;
}

#rememberPw{
    margin-left:135px;
    width:13px;
    height:13px;
    vertical-align:middle;
}

#action label{
    color:white;
    font-weight:bold;
    font-family:YouYuan;
    font-size:13px;
    margin-left:0px;
}

#confirm{
    margin-left:115px;
    border:1px solid #FF9A14;
    background-color:#FF9A14;
    width:270px;
    height:30px;
    color:white;
    border-radius:5px;
    font-weight:bold;
    font-family:YouYuan;
    font-size:14px;
}

#confirm:hover{
    border:1px solid #E36709;
    background-color:#E36709;
    outline:none;
}

接着的就是页面布局的html文件（login.html）：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" charset="utf-8" />
    <title>登录</title>
    <link href="Login.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <!-- 登录界面 -->
    <div id="loginWraper">
        <div id="title">学生学籍管理系统</div>
        <form id="login_fm" method="post">
            <div id="content">
                <table>
                    <tr>
                        <td><label>学　号:</label></td>
                        <td><input id="studentNumber" name="studentNumber" type="text" placeholder="学　号" /></td>
                    </tr>
                    <tr>
                        <td><label>密　码:</label></td>
                        <td><input id="password" name="password" type="password" placeholder="密　码" /></td>
                    </tr>
                    <tr>
                        <td><label>验证码:</label></td>
                        <td>
                            <input id="validateCode" name="validateCode" type="text" placeholder="验证码" />
                        </td>
                    </tr>
                </table>
            </div>
            <div id="action">
				<input id="rememberPw" name="rememberPw" type="checkbox" checked="checked" />
				<label for="rememberPw">让我记住本次登录状态</label>
            </div>
        </form>
        <div id="loginConfirm">
            <table>
                <tr>
                    <td><button id="confirm" onclick="userLogin()">登 录</button></td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

代码就这些，当然了，不能落下最终的效果截图：

代码demo实例下载地址：

登录界面demo代码

个人博客本文文章地址：奕独客博客-简约大气登录界面

「已注销」
关注
  • 3
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简约的登陆界面-易语言
06-12
在IT行业中，设计一个简约的登录界面是用户体验中至关重要的一环。易语言，作为一款中国本土的编程语言，以其简洁的语法和丰富的库支持，使得创建这样的界面变得相对容易。本篇文章将深入探讨如何利用易语言来设计一...
简约大气的个人博客HTML源码
02-03
为了实现简约大气的设计，源码中必然包含CSS（Cascading Style Sheets）代码。CSS用于控制网页的外观，包括颜色、字体、布局等。通过选择器（如类名、ID名）来指定特定元素的样式，如`.container`、`.header`、`....
C# winfrom写了一个美观的登陆窗体 login
wangyzsir的博客
07-21 6916
记录一下，同时本着互联网的分享精神分享出来，以便后来者引用。先放效果图： 这里用到几个东西，gif好看的背景图好难找，基本都是需要钱下载，我这里放两个给需要用到的小伙伴，告诉一下大家：这些好看的动图我都是去那些需要钱下载的网站，然后点击进去后用gif录制工具给录制的，推荐这个工具给大家：GifCam，直接搜索去官网下载这个软件就好。 我这个登陆窗体用到两个功能点：1、是用到自定义圆角窗体的代码段，首先先把属性：backgroundimagelayout=Stretch；接着fromborderstyle
【实战】前端必会 —— 微信小程序引入背景图
程序边界
06-20 7632
wxss中直接引用本地图片会报错： 使用本地图片的话，需要在行内样式中引用 ，外部wxss只能引用线上图片（需要上传服务器后引用）背景图片既可以直接在最外层view使用background，也可以在relative的外层view内使用absolute的image标签（记得宽高设置100%）...
html好看的登录界面2（十四种风格登录源码）_html登录页面
最新发布
2301_82243626的博客
04-28 2665
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
【炫酷登录界面】详解5款高级的前端登录页面及实现源码（附完整源码）
赏樱看雪撸代码
06-16 2万+
好看大气的登录页面，高级炫酷登录界面，5款登录界面源码分享，web登录页面制作，如何实现高级登录页面，如何设置透明遮罩，div实现水平垂直居中，CSS动画效果，登录动态切换效果，高科技登录按钮，动态炫酷登录界面实现，animation实现动态登录按钮效果。
简洁大气上档次的登录页面
weixin_44764207的博客
12-30 1946
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <style&gt...
4款简洁好看的登录页面源码
字节网盘SEO工具
04-28 1万+
简介： 1.紫色渐变登录页面 这是一款紫色渐变登录页面，输入框和按钮都有动画效果，同时还有基本的表单验证。 2.蓝色简洁大气登录页面 这是一款蓝色简洁大气登录页面，输入框聚焦的时候有一个非常显眼的动画效果，增强了用户体验，同时也加入了基本的表单验证。 登录页面默认为蓝色，可修改为需要的颜色，大幅的底图也可以更换。 该登录页面适配了各种分辨率，任何设备都可以使用。 3.紫色背景简洁登录页面 这是一款紫色背景的简洁登录页面，输入框聚焦的时候有一个非常显眼的动画效果，增强了用户体验。 该登录页面默认为紫色渐变背景
蓝色主题的简约大气的登录界面
04-27
蓝色主题的简约大气的登录界面，蓝色背景的登录界面！login（登录界面） 蓝色主题的简约大气的登录界面，蓝色背景的登录界面！login（登录界面） 蓝色主题的简约大气的登录界面，蓝色背景的登录界面！login（登录...
易语言实现简约的登陆界面
05-29
在本文中，我们将深入探讨如何使用易语言（EasyLanguage）创建一个简约的登录界面。易语言是一种面向对象的、易学易用的编程语言，特别适合初学者进行软件开发。在这个项目中，我们将利用易语言提供的组件和模块，如...
各种简约大气的PPT模板集合
01-14
"各种简约大气的PPT模板集合"提供了一系列精心设计的模板，旨在帮助用户快速创建专业且吸引人的演示文稿。 首先，我们来探讨一下“简约大气”的设计理念。简约风格强调简洁明了，去除多余的元素，让信息更易于理解...
简洁大气的登录页面
01-03
左边是登录表单，使用蓝色和白色搭配；右边是一张图片，可更换成需要的图片。总体简洁大方，适合大部分网站。
简洁大气的登录页面----
01-16
简洁大方的html登录页面，花钱买的, 复制可以直接使用运行。简洁大方的html登录页面，花钱买的, 复制可以直接使用运行
20种大气漂亮的后台登陆界面HTML源码
07-09
20种大气漂亮的后台登陆界面HTML源码
高端大气网站登录页面html模板源码_html源码查看
12-04
高端大气网站登录页面html模板源码
简洁好看的登录页面
code袁的博客
02-08 2832
简洁好看的登录页面 1.看效果 2.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录界面</title> <link rel="stylesheet" href="static/login.css"> </head> <body> <div class="con
html好看的登录页面1（十三种风格登录页面源码）
热门推荐
xcLeigh
06-15 3万+
html好看的登录页面1（十三种风格登录源码），大气好看的网站登录页面html源码模板，页面源码，适用于各种项目，也可以用作学习，各种登录风格都有，高端大气上档次，直接嵌入使用，代码易懂，复用性高，你值得拥有。
帮我使用flask+ajax+html设计出简约大气的后台登录界面
05-25
好的，下面是一个简单的示例，使用 Flask 作为后台框架，Ajax 实现异步提交表单，HTML 和 Bootstrap 实现页面布局和样式。 首先，创建一个 Flask 应用，设置路由和视图函数。 ```python from flask import Flask, render_template, request, jsonify app = Flask(__name__) @app.route('/') def index(): return render_template('login.html') @app.route('/login', methods=['POST']) def login(): username = request.form['username'] password = request.form['password'] if username == 'admin' and password == '123456': return jsonify({'success': True}) else: return jsonify({'success': False, 'message': '用户名或密码错误'}) ``` 然后，创建一个 HTML 文件，包含登录表单和 Ajax 提交代码。 ```html <!DOCTYPE html> <html> <head> <title>后台登录</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row justify-content-md-center mt-5"> <div class="col-md-6"> <h3 class="text-center mb-4">后台登录</h3> <form id="login-form"> <div class="form-group"> <label for="username">用户名</label> <input type="text" class="form-control" id="username" name="username" required> </div> <div class="form-group"> <label for="password">密码</label> <input type="password" class="form-control" id="password" name="password" required> </div> <button type="submit" class="btn btn-primary btn-block">登录</button> </form> </div> </div> </div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(function() { $('#login-form').submit(function(event) { event.preventDefault(); $.ajax({ url: '/login', type: 'POST', data: $(this).serialize(), dataType: 'json', success: function(data) { if (data.success) { window.location.href = '/dashboard'; } else { alert(data.message); } }, error: function() { alert('登录失败，请重试'); } }); }); }); </script> </body> </html> ``` 最后，启动应用并访问 http://localhost:5000/ 即可看到登录界面。 注意：这只是一个简单的示例，实际应用中需要做更多的安全处理，比如密码加密、防止 CSRF 攻击等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值