HTML登录界面的实现

最新推荐文章于 2024-06-11 11:30:38 发布
最新推荐文章于 2024-06-11 11:30:38 发布
阅读量6.8w 收藏 47
点赞数 10
分类专栏： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34909297/article/details/68492630
版权

实现这个界面非常简单，以前就学过静态网页的开发，虽然学的不精，但还是懂一些的。

这次主要是实现对用户名，密码的验证，即验证用户名和密码是否为空，没什么说的，直接看代码吧

源代码下载链接



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户登录</title>
<link href="./css/login.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function loginClick() {
	var name=document.login.username.value;
	var pwd=document.login.password.value;
	if(name==null||name.length==0){
		alert("用户名不能为空！");
		return;
	}
	 if(pwd==null||pwd.length==0){
		alert("密码不能为空！");
		return;
	 }
	 document.login.submit();
}
</script>
</head>
<body>
<table class="login_tb1">
    <tr align="center" valign="middle">
        <td height="100%">
        <table class="login_tb2" cellSpacing=0 cellPadding=0 border=0
            align="center"
        >
            <tr valign="middle">
                <td class="login_td1" colSpan=2><font face="黑体" size="4px"
                    color="#196ed1"
                >网上书店系统-用户登录</font></td>
            </tr>
            <tr>
                <td width="203"><img height="200" width="202"
                    src="./images/login_Page/loginPage_02.jpg" alt="此处显示登录图片"
                /></td>
                <td class="login_td2">
                <form action="LoginJsp.jsp" name="login" method="post">
                <table>
                    <tr>
                        <td width="66" height="20" class="login_td">登录名：</td>
                        <td width="115" height="20" class="login_td"><input
                            class="login_input" type="text" name="username"
                        ></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td height="20" class="login_td">密 码：</td>
                        <td height="20" class="login_td"><input
                            type="password" name="password" class="login_input"></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td height="20" colspan="2" align="center"><input
                            type="reset" value="重置" class="login_button"
                        />   <input type="button" value="登录"
                            class="login_button" onClick="loginClick()"
                        />  </td>
                        <td class="login_td" align="left" width=71><a
                            href="Regist.html"
                        >新用户注册</a></td>
                    </tr>
                </table>
                </form>
                </td>
            </tr>
            <tr>
                <td colSpan=2
                    style="background-image: url(images/login_Page/loginPage_04.jpg)"
                    height=56 align="center" class="login_td"
                >版权所有</td>
            </tr>
        </table>
        </td>
    </tr>
</table>
</body>
</html>



摘星辰_
关注
  • 10
    点赞
  • 踩
  • 47
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
html实现登录界面
qq_45300497的博客
09-12 4875
学习html的第一个效果图（如下） 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 表单的提交数据是post --> <form action="#"method="post"> <table c
HTML实现登录注册界面
热门推荐
qq_44892111的博客
04-09 7万+
我是一个初学者，学了有一星期的时间，分享一下最近在制作的登录注册界面。 登录页面：简单的运用了html和css的东西，没有用到js（目前功力不够）。 另外还用到了阿里巴巴矢量图标库的一些图标，毕竟自己不会做UI <!DOCTYPE > <html> <html lang="ch"> <head> <meta charset="utf-...
html好看的登录页面1（十三种风格登录源码）
06-15
html好看的登录页面1（十三种风格登录源码），大气好看的网站登录页面html源码模板，页面源码，适用于各种项目，也可以用作学习，各种登录风格都有，高端大气上档次，直接嵌入使用，代码易懂，复用性高，你值得拥有。 效果地址： https://blog.csdn.net/weixin_43151418/article/details/131206407
HTML 登录页表单
最新发布
南北极之间
06-11 980
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
html好看的登录页面1（十三种风格登录页面源码）
xcLeigh
06-15 3万+
html好看的登录页面1（十三种风格登录源码），大气好看的网站登录页面html源码模板，页面源码，适用于各种项目，也可以用作学习，各种登录风格都有，高端大气上档次，直接嵌入使用，代码易懂，复用性高，你值得拥有。
好看实用的六个html登录页面
bhegi_seg的博客
03-10 5万+
本人找到了六个html登录页面，感觉还行，也挺好看的。 1.效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
使用Html做一个简单的登陆页面
桑稚远方的博客
04-05 4万+
有了登录按钮后，在我们的认知下，肯定按了登录会跳到下一个页面，但是今天只是展示做一个简单的登陆界面，就不写跳转和账号密码验证了；登录页面一般就是账号和密码，另外还需要验证码验证需求，这三个常见的属性是一个项目登陆界面重要组成要素；2.账号密码有了之后，下一步就需要登录了，登录是一个按钮，按钮是一个标签。，所以就不使用验证码了，因为验证码在一个项目中是放在后端的，这次就不做演示；不好意思兄弟们，本人没有美感，尽力了，你们自己找好看的点自己修改；如下面的代码，这一步很简单；
HTML登录页面
jakelihua
10-27 4万+
本文用最通俗的语言，一步步教会大家CSS构建登录页面。首先构建。
HTML5+CSS3 精美登陆界面源码
01-19
在这个“HTML5+CSS3 精美登陆界面源码”压缩包中，包含了三个精心设计的登录界面，每一个都充分利用了HTML5的新特性与CSS3的动画效果，以提供卓越的用户体验。 首先，我们来详细了解一下HTML5。HTML5是超文本标记...
html登陆界面源码
11-28
此外，考虑到标签“前端登陆界面”，这表明这个源码可能不涉及后端逻辑，即用户提交的信息不会直接与数据库交互，而是通过接口发送到服务器端。后端服务接收到这些信息后，会进行验证，如果验证成功，返回成功的响应...
HTML 登陆界面
10-23
登录界面的美观性可以通过调整字体、颜色、间距、边框等属性来实现。 5. **响应式设计**：现代网页设计强调响应式，即页面应适应不同设备的屏幕大小。可以使用媒体查询（@media）来针对不同设备设置不同的样式。 6...
一款简易好看的登陆界面
12-17
在学习这个项目时，你还可以探索更多高级CSS特性，如Flexbox布局（用于更灵活地控制元素的排列方式）、媒体查询（用于实现响应式设计，使登录界面在不同设备上都能良好显示）以及自定义CSS变量（用于统一和简化样式...
简单的HTML登录界面（带源码）
宝子的博客
07-05 2万+
非常的简单，第一眼看到这个界面的时候就感觉非常的喜欢，给我一种简约又美观的感觉，然后就模仿样式自己写出来了，给大家分享一下。还写了一个注册页面大部分的代码都差不多，因为它们实在太像了，我太喜欢了。
html好看的登录界面2（十四种风格登录源码）
xcLeigh
06-15 2万+
html好看的登录页面2（十四种风格登录源码），登录页面源码，大气好看的网站登录页面html源码模板，页面源码，适用于各种项目，也可以用作学习，各种登录风格都有，高端大气上档次，直接嵌入使用，代码易懂，复用性高，你值得拥有。
利用html制作一个简单的登陆页面
m0_73780812的博客
05-10 9020
一张图片放入image,图片名称bg.jpg。需要的一张图片，两段代码。index.html代码。style.css代码。
用html+css制作简单好看的登陆注册界面
小袁同学的博客
07-19 6万+
注重版权，转载请注明原作者和原文链接 作者：Bald programmer 先看看效果图 login.html代码 <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/style.css" /> </head> <style> body{ .
Html登录页面
qq_59861678的博客
12-07 315
登录页面
html好看的登录界面2（十四种风格登录源码）_html登录页面
2301_82243626的博客
04-28 2664
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
使用html和css实现登陆界面
04-11
好的！登陆界面可以分为两个部分：登陆表单和背景。 首先，我们来实现登陆表单的HTML代码： ```html <div class="login-box"> <h2>Login</h2> <form> <label> Username: <input type="text" name="username" placeholder="Enter your username" required> </label> <label> Password: <input type="password" name="password" placeholder="Enter your password" required> </label> <button type="submit">Login</button> </form> </div> ``` 接下来，我们来给登陆表单添加样式： ```css .login-box { margin: 0 auto; max-width: 400px; padding: 20px; border: 1px solid #ccc; border-radius: 5px; background: #f9f9f9; } .login-box h2 { text-align: center; margin-bottom: 20px; } .login-box label { display: block; margin-bottom: 10px; } .login-box input[type="text"], .login-box input[type="password"] { display: block; width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; outline: none; } .login-box button[type="submit"] { display: block; width: 100%; padding: 10px; border: none; border-radius: 5px; background: #008CBA; color: #fff; font-size: 16px; cursor: pointer; } ``` 接着，我们来设置背景： ```css body { background: url("背景图片地址") no-repeat center center fixed; background-size: cover; } ``` 好啦，现在你有一个简单且美观的登陆界面啦！记得把背景图片地址换成你自己的哦~
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值