html网页设计简单登陆界面

最新推荐文章于 2024-03-04 14:18:16 发布
最新推荐文章于 2024-03-04 14:18:16 发布
阅读量3.1w 收藏 92
点赞数 16
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33875089/article/details/78448906
版权 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>用户登录界面</title><base target="_blank" />
<style>
*{
padding:0px;
margin:0px;
}
a{color:White}
body{
font-family:Arial, Helvetica, sans-serif;
background:#000 no-repeat center;
font-size:13px; 
}
img{
border:0;
}
.lg{width:468px; height:468px; margin:100px auto; background:url(http://keleyi.com/keleyi/phtml/divcss/21/images/login_bg.png) no-repeat;}
.lg_top{ height:200px; width:468px;}
.lg_main{width:400px; height:180px; margin:0 25px;}
.lg_m_1{
width:290px;
height:100px;
padding:60px 55px 20px 55px;
}
.ur{
height:37px;
border:0;
color:#666;
width:236px;
margin:4px 28px;
background:url(http://keleyi.com/keleyi/phtml/divcss/21/images/user.png) no-repeat;
padding-left:10px;
font-size:16pt;
font-family:Arial, Helvetica, sans-serif;
}
.pw{
height:37px;
border:0;
color:#666;
width:236px;
margin:4px 28px;
background:url(http://keleyi.com/keleyi/phtml/divcss/21/images/password.png) no-repeat;
padding-left:10px;
font-size:16pt;
font-family:Arial, Helvetica, sans-serif;
}
.bn{width:330px; height:72px; background:url(http://keleyi.com/keleyi/phtml/divcss/21/images/enter.png) no-repeat; border:0; display:block; font-size:18px; color:#FFF; font-family:Arial, Helvetica, sans-serif; font-weight:bolder;}
.lg_foot{
height:80px;
width:330px;
padding: 6px 68px 0 68px;
}
</style>
</head>

<body class="b">
<div class="lg">
<form action="#" method="POST">
<div class="lg_top"></div>
<div class="lg_main">
<div class="lg_m_1">

<input name="username" value="hovertree" class="ur" />
<input name="password" type="password" value="keleyi.com" class="pw" />

</div>
</div>
<div class="lg_foot">
<input type="button" value="点这里登录" class="bn" /></div>
</form>
</div>
<div style="text-align:center;">
</div>
</body>
</html>

Roses Boy
关注
  • 16
    点赞
  • 踩
  • 92
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Html制作简单而漂亮的登录页面-web前端教程
web前端入门基础进阶教程-htmlcssjs
07-04 5401
这篇文章主要为大家详细介绍了Html制作简单而漂亮的登录页面具体代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下 先来看看样子。 html源码： > XML/HTML Code > > <!DOCTYPE html> > > <html lang="en"> > > <head> > > <meta charset="UTF-8"> > > <title>
HTML案例登录页面
weixin_67464822的博客
06-14 7677
本人是菜鸟，刚入前端坑 想记录一下自己写过的页面，也希望能帮到跟我一样的你，加油鸭~~~简单的登录页面
好看实用的六个html登录页面
热门推荐
ss810540895的博客
07-15 12万+
原文1.效果图： 代码： 2.效果图： 源码： 3.效果图：源码： 4.效果图：源码： 5.效果图： 源码： 6.效果图：源码：
html好看的登录界面2（十四种风格登录源码）
xcLeigh
06-15 2万+
html好看的登录页面2（十四种风格登录源码），登录页面源码，大气好看的网站登录页面html源码模板，页面源码，适用于各种项目，也可以用作学习，各种登录风格都有，高端大气上档次，直接嵌入使用，代码易懂，复用性高，你值得拥有。
(Html)实现一个账号密码登录的弹窗界面（代码）
小劉同学成长日记~~
09-08 2万+
【代码】(Html)实现一个账号密码登录的弹窗界面，闲杂日记~~
html点击按钮跳转到另一个界面_网页制作：一个简易美观的登录界面
weixin_39755218的博客
11-02 2万+
效果图目录结构：在我们做一个页面之前，要先想好他的一个整体布局，也就是我们这里面的login.html主页面，大致结构如下：接下来，我们先上代码，看一下具体实现方法：login.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&gt...
JavaScript + CSS/CSS3 + HTML 网页登陆 + 注册界面设计
02-09
登陆界面设计 登陆界面由一个简单的表单（头像、用户名、密码、登陆按钮、记住我、取消、忘记密码），创建了一个CSS3的缩放效果构成。需要做浏览器（Firefox、Safari and Chrome、Opera）兼容处理和 @media 简单响应...
JSP登陆界面
12-28
* HTML 语法：HTML 语法用于设计网页结构和样式，例如使用 <FORM> 元素来设计表单，使用 <INPUT> 元素来接受用户输入。 * 数据库连接：JSP 页可以与数据库连接，以便实现用户登录和注册功能。 * FORM 元素：FORM ...
简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】
06-13
简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。 简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】
登入页面.html
07-08
页面设计
简单登录注册界面模板（HTML+CSS+JavaScript）
12-28
简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。
设计的一个登录页面（html）
04-26
公司美工做的一个登录页面的HTML文档，有需要的朋友可以拿去用用。纯属白送哦。
登录页面HTML代码
05-30
登录页面代码，登录页面代码登录页面代码登录页面代码登录页面代码登录页面代码
纯CSS3用户登录界面设计
04-24
纯CSS3用户登录界面设计
html简单的登录界面结构，以及详细分析
subsdom的博客
11-20 947
设置指定方向的外边距：可以使用单独的 margin-top、margin-right、margin-bottom、margin-left 属性来分别设置元素的上、右、下、左方向的外边距。设置不同的外边距：可以使用多个值来设置元素的上、右、下、左四个方向的外边距为不同的值。将设置元素的上外边距为 10 像素，右外边距为 20 像素，下外边距为 15 像素，左外边距为 5 像素。例如，margin-top: -10px;设置相同的外边距：可以使用一个值来设置元素的上、右、下、左四个方向的外边距为相同值。
HTML +CSS制作QQ登录页面
Pythonfinish的博客
11-30 3147
Html,CSS,QQ，校园官网制作
HTML、PHP实战：搭建一个网页登录页面。
m0_50818626的博客
05-21 7414
可以看到当我们输入用户名：zhangsan 密码：123456 时，后台的数据库能够查询到，所以登录成功。可以看到，当输入数据库中已经存在的用户时，会显示用户已经存在，并且在3秒之后会跳转回原来的页面。当注册成功时，可以看到数据库中新增了对应的用户名及密码。当用户注册时前后两次输入密码不一致时也会出现提示。而当用户名和密码不匹配时则登录失败。文件名：denglu.html。我这里用的是小皮一键搭建的。文件名：denglu.php。文件名：zhuce.html。文件名：zhuce.php。
html网页制作之简单登入界面
最新发布
不蒸馒头曾口气的博客
03-04 1256
【代码】html网页制作之简单登入界面。
发一份html网页设计的登陆界面
06-08
以下是一个简单的 HTML 登录界面的代码示例： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login Page</title> <style> body { background-color: #f2f2f2; font-family: Arial; } form { background-color: #ffffff; border: 1px solid #ccc; border-radius: 5px; padding: 20px; width: 300px; margin: auto; margin-top: 50px; } h2 { text-align: center; color: #333; } input[type="text"], input[type="password"] { width: 100%; padding: 12px; margin: 8px 0; box-sizing: border-box; border: none; border-bottom: 1px solid #ccc; } input[type="submit"] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; width: 100%; } </style> </head> <body> <form> <h2>Login Form</h2> <label for="username"><b>Username</b></label> <input type="text" placeholder="Enter Username" name="username" required> <label for="password"><b>Password</b></label> <input type="password" placeholder="Enter Password" name="password" required> <button type="submit">Login</button> <label> <input type="checkbox" checked="checked" name="remember"> Remember me </label> </form> </body> </html> ``` 这个示例代码实现了一个简单的登录表单，包括用户名和密码输入框、记住密码复选框、登录按钮等元素。同时使用 CSS 美化表单的样式，使其看起来更加美观。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值