【教程】登录界面前端代码

最新推荐文章于 2024-06-29 06:36:59 发布
最新推荐文章于 2024-06-29 06:36:59 发布
阅读量2.6k 收藏 2
点赞数
文章标签： html5 jquery nagios less applet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hifhf/article/details/107311621
版权

使用layui制作登录界面，layui版本v2.2.6

界面如下图所示：

捕获.JPG

html部分代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>留言板</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="Shortcut Icon" href="../images/favicon.ico">
  <link rel="stylesheet" href="../layui/css/layui.css"  media="all"> 
  <link rel="stylesheet" href="../css/style.css"> 
  <script src="../layui/layui.js" charset="utf-8"></script>
</head>
<body> 
<script>
function showmsg(msg,nicon){
	layui.use('layer',function(){
		var layer = layui.layer;
		layer.alert(msg,{icon:nicon});
		})
	}
</script>  
<div class="layui-tab-content">
<div class="layui-form">
	<div class="layui-btn-container">
    <button class="layui-btn layui-btn-normal layui-btn-sm" οnclick="window.history.back();"><i class="layui-icon">&#xe65c;返回</i></button>
  	</div>
    <form class="layui-form" action="" method="post">
    <div class="login-main">    
        <div class="login-content">    
           <fieldset class="layui-elem-field layui-field-title">
              <legend>管理员登录</legend>          
            </fieldset>
            <div class="layui-form-item">       		
                <input type="text" name="account" required  lay-verify="required" placeholder="用户名" autocomplete="off" class="layui-input">            
            </div>
            <div class="layui-form-item">       		
                <input type="password" name="password" required  lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input">           
            </div>
            <div class="layui-input-inline login-btn">
                <button type="submit" class="layui-btn layui-btn-normal btnwidth">登录</button>
            </div>
            <br>
            <div class="layui-input-inline">
                <button type="reset" class="layui-btn layui-btn-primary btnwidth">重置</button>
            </div>
        </div>
    </div>
    </form>
</div>
</div>

<script>
layui.use('form', function(){
  var form = layui.form;  
});
</script>
</body>
</html>

style.css代码

@charset "utf-8";
.login-main {
	text-align: center;
}
.login-content {	
	margin: 14px auto;
	width: 300px;	
}
.btnwidth {
	width: 300px;
}
.login-btn {
	margin-bottom:14px;
}


hifhf
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
前端登录页面代码
weixin_35749545的博客
01-09 173
这是一个简单的前端登录页面的代码示例： <form id="login-form"> <label for="username">用户名：</label><br> <input type="text" id="username" name="username"><br> <label for="passwor...
简单登陆页面的前端代码实现
silencer1024的博客
08-01 2456
登录页面 <!-- 1. 导入CSS的全局样式 --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- 2. jQuery导入，建议使用1.9以上的版本 --> <script src="js/jquery-3.1.1.min.js"></script> <!-- 3. 导入bootstrap的js文件 --&...
layui-用户登录界面响应式动画模板
06-08
layui用户登录界面响应式动画模板基于layui-1.0.9制作，响应式设计，自适应分辨率，兼容PC端和移动端，动画背景，登录提示框动画效果。
前端登陆页面
Where there is a will, there is a way !
03-02 7387
例如，你可以使用JavaScript为表单添加验证功能，或者使用CSS和JavaScript为页面添加一些动态效果，比如当用户输入错误时，用户名和密码输入框可能会出现红色边框。该页面包含一个简单的表单，用户需要输入用户名和密码才能登录。同时，我们还引用了一个CSS文件，该文件可以在同一目录下创建一个名为style.css的文本文件，以自定义页面的外观和样式。当表单被提交时，该代码将检查用户名和密码输入框是否为空。你可以将这些CSS代码保存到一个名为style.css的文件中，并将其与HTML文件链接起来。
html+js+css登录注册界面
最新发布
w11111xxxl的博客
06-29 910
拥有向服务器发送登录或注册数据并接收返回数据的功能 点赞关注界面源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login and Registration Form</title> <style> * { box-sizing: border-box; } body { font-family: Arial, sans-serif; background-col
【炫酷登录界面】详解5款高级的前端登录页面及实现源码（附完整源码）
热门推荐
赏樱看雪撸代码
06-16 2万+
好看大气的登录页面，高级炫酷登录界面，5款登录界面源码分享，web登录页面制作，如何实现高级登录页面，如何设置透明遮罩，div实现水平垂直居中，CSS动画效果，登录动态切换效果，高科技登录按钮，动态炫酷登录界面实现，animation实现动态登录按钮效果。
前端登录页面
guangmingdaihua的博客
07-06 3567
关于使用HTML5+CSS3实现编写流光效果的Web前端登陆页面。注：实现本次效果全程使用HBuilder软件进行操作和编写。
拿来即用的前端登录页面（简洁清爽版）
RoyRaoHR的博客
05-12 1万+
代码： resgister.css为自定义文件 bootstrap-3.3.7-dist/css/bootstrap.min.css jquery-3.6.0.min.js bootstrap-3.3.7-dist/js/bootstrap.min.js 都可以通过相应官网下载 background:url(‘…/imags/timg.jpg’) no-repeat;中的time.jpg为登录背景图，可以自己替换 代码 admin.css log.css layui.css layui.js jquery-
前端H5_华丽注册登录界面案例2，入门学习案例（css+JS）
02-05
在这个“前端H5_华丽注册登录界面案例2”中，我们将探讨如何利用CSS（层叠样式表）和JavaScript来创建一个吸引人的、功能完善的注册与登录界面，这对于初学者来说是一个很好的学习起点。 首先，我们要了解HTML5的...
前端CSS3基础教程，前端必备基础相关代码资源
07-11
这个基础教程涵盖了前端开发者需要了解的CSS3基础知识，通过实例代码和相关资源，帮助学习者理解和应用这些技术。 【标签】中提到“前端”意味着教程内容与前端开发相关，这是网页开发中负责用户交互的部分，包括...
科技感的网站登录界面（适合小白参考使用）
06-10
总的来说，这个科技感的网站登录界面教程是一个很好的起点，无论是对于HTML、CSS的基础学习，还是对于前端开发实践的理解，都能提供宝贵的指导。记住，动手实践是最好的学习方式，所以不要犹豫，立即开始探索这个...
.net前端界面框架源码20170808
01-12
此源码包名为".net前端界面框架源码20170808"，可能包含了一套特定日期（2017年8月8日）的.NET前端开发框架的完整代码，对于开发者来说，这是一份宝贵的学习和参考材料。 首先，.NET框架是由微软开发的一种软件框架...
JSP制作简单登录界面实例
10-19
本文将详细介绍如何使用JSP来制作一个简单的登录界面，涉及到的技术点包括前端页面设计、后端数据处理以及数据库的连接和操作。 首先，要制作JSP登录界面，你需要有相应的开发环境。本例中提到的是使用Eclipse作为...
前端小案例——登录界面（正则验证, 附源码）
前端小白一枚
03-04 2250
这是一个非常适合前端入门练习的小案例，各位小伙伴可以自行更改样式和内容，如果大家运行时出现问题或代码有什么不懂的地方都可以随时评论留言或联系博主QQ。来监听 DOMContentLoaded 事件，确保页面中的所有元素都已加载完毕。最后，根据验证结果，在页面上显示相应的提示信息。在表单提交事件中，首先阻止默认的表单提交行为。，以便在验证用户输入后自行处理提交逻辑。和用于显示验证信息的元素。当页面加载完成后，通过。用于验证身份证号码。
写一个完整的前端登录页面
weixin_42579969的博客
02-12 234
前端登录页面是前端开发中常见的页面之一，下面是一份完整的前端登录页面代码(使用 HTML、CSS 和 JavaScript)： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录页面</title> <style> /* ...
写一个前端登陆页面代码
weixin_35749440的博客
02-18 166
<html> <head> <title>登录页面</title> </head> <body> <form action="login.php" method="post"> 用户名：<input type="text" name="username"><br /> 密码：<...
前端三件套搭建登录页面（HTML+CSS+JS）
weixin_62268437的博客
04-28 4723
本文运用前端三件套，搭建了这样一个登录界面与注册界面。
用vue实现注册页面、登录页面、主页之间跳转并保持登录状态【完整代码】
m0_67265464的博客
03-10 2万+
文章目录 前言 一、页面的简单实现 1.登录页面 2.注册页面 3.主页（显示个人信息） 二、逻辑实现 1.localStorage的使用 2.功能实现 登录 注册 主页 路由配置文件 总结 前言 本文主要讲解用vue来实现三个页面之间的跳转以及登录状态的实现，css还在努力学习中，所以界面做的很丑lol 要求： 1.三个页面，登录页面Login，注册页面Register，主页Home 2.用route路由实现不同页面逻辑跳转 3.登录状态 打开网页时，不论输入的路
前端 代码 登录页面
weixin_65459869的博客
07-12 257
邮箱：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

hifhf

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

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

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

打赏作者

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

抵扣说明：

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

余额充值