简单的HTML登录界面

最新推荐文章于 2024-10-07 16:38:08 发布
最新推荐文章于 2024-10-07 16:38:08 发布
阅读量10w+ 收藏 151
点赞数 38
分类专栏： 前端 网页 文章标签： html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mingzi1245/article/details/106036031
版权

1

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="css/login.css">
    <title>登陆</title>
</head>
<body>
<main class="main" role="main">
    <div class="container">
        <div class="row">
            <div class="offset-md-3 col-md-6">
                <form class="form-container">
                    <h2>登陆</h2>
                    <div class="form-group">
                        <label for="exampleInputEmail1">用户名</label>
                        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入用户名">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">密码</label>
                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
                    </div>
                    <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" id="exampleCheck1">
                        <label class="form-check-label" for="exampleCheck1">记住信息</label>
                    </div>
                    <button type="submit" class="btn btn-success btn-block">登录</button>
                </form>
            </div>
        </div>
    </div>
</main>
<div class="footer">
    <div class="container">
        登录页面 @2020年5月10日
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

完整的代码：https://download.csdn.net/download/mingzi1245/12406211

2.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>login</title>
</head>

<body>
    <div>
        <div>
            <!-- 左上角部分 -->
            <div class="chrome">
                <span>欢迎</span>
                <span>使用</span>
            </div>

            </div>

            <!-- 中间部分 -->
            <div class="center">
                <!-- 登陆框 -->
                <div class="user">
                    <p class="cuser">账号登录</p>
                    <!-- 用户名密码及登录按钮部分 -->
                    <div class="form">
                        <div class="user1">
                            <img src="images/user.png" alt="">

                            <input type="text" placeholder="邮箱">
                        </div>
                        <div class="user2">
                            <img src="images/passwd.png" alt="">
                            <input type="password" placeholder="密码">
                        </div>
                        <div>
                            <button type="button">马上登录</button>
                        </div>
                    </div>
                    <div style="height: 25px;"></div>
                    <div class="mima">
                        <p class="jz">
                            <input type="checkbox" class="box">
                            <span>记住密码</span>
                        </p>
                        <p class="wj">忘记密码?
                            <a href="#">立即找回</a>
                        </p>
                    </div>
                </div>
            </div>

            <!-- 底部部分 -->
            <div class="foot">
                <p class="banquan">
                    2020年5月10日
                </p>
            </div>
        </div>

    </div>

</body>

</html>

完整的代码：https://download.csdn.net/download/mingzi1245/12406208 

 

3

 html代码

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>后台管理系统</title>
</head> 

<body>
	<div class="logo_box"><img class="logo_img" src="images/login_logo.png"></div>
	<div class="login_box">
		<h1 class="title">欢迎登录</h1>
		<input class="input_box" type="text" placeholder="用户名">
		<input class="input_box" type="password" placeholder="密码">
		<input class="button_box" type="button" value="登录">
	</div>
	
</body>
</html>

 css代码


	body {
		background-color: #8ea4f8;
		background-image: url(images/background.jpg);
		background-repeat: no-repeat;
		background-size: cover; //背景图适应屏幕

	}
	.login_box {
		width: 400px;
		height: 400px;
		background-color: #fff;
		margin: auto;
		margin-top: 150px;
		border-radius: 5px;
		overflow: hidden;//.title设置margin-top无效，给父元素设置overflow:hidden;
	}
	.title {
		text-align: center;
		font-size: 28px;
		color: #000;
		margin-top: 80px;
		margin-bottom: 10px;
		letter-spacing: 3px;
		font-family: sans-serif;
	}
	.input_box {
		width: 300px;
		height: 30px;
		width: 300px;
		height: 40px;
		padding-left: 10px;
		margin-top: 20px;
		margin-left: 50px;
	}
	.button_box {
		width: 300px;
		height: 35px;
		width: 300px;
		height: 40px;
		margin-top: 20px;
		margin-left: 50px;
		border-radius: 5px;
		background-color: #64a9d9;
		cursor: pointer;
		color: #fff;
	}
	.logo_box {
		position: absolute;
		background-color: #fff;
		width: 100px;
		height: 100px;
		border-radius: 100px;
		top: 100px;
		left: 46%;
		border: solid 5px #A68364;
		text-align: center;
	}
	.logo_img {
		margin-top: 20px;
	}

完整的代码：https://download.csdn.net/download/mingzi1245/12406204

mzlz
关注
专栏目录
HTML 登陆界面
10-23
用超文本语言HTML写的前端用户登陆界面，仅限前端，不含后台逻辑。
登录注册页面html
06-15
基于html css jq的登录注册页面，含validate手机号码验证,简单易懂，仅供学习使用，路啦啦啦啦啦啦啦
HTML简单登录界面制作
最新发布
yk41000的博客
10-07 639
利用HTML、CSS、和简单JS制作一个登录界面，具备账号密码验证及跳转功能。
html登陆页面
10-07
基于bootstarp的前端登陆页面基于bootstarp的前端登陆页面
使用Html做一个简单的登陆页面
热门推荐
桑稚远方的博客
04-05 5万+
有了登录按钮后，在我们的认知下，肯定按了登录会跳到下一个页面，但是今天只是展示做一个简单的登陆界面，就不写跳转和账号密码验证了；登录页面一般就是账号和密码，另外还需要验证码验证需求，这三个常见的属性是一个项目登陆界面重要组成要素；2.账号密码有了之后，下一步就需要登录了，登录是一个按钮，按钮是一个标签。，所以就不使用验证码了，因为验证码在一个项目中是放在后端的，这次就不做演示；不好意思兄弟们，本人没有美感，尽力了，你们自己找好看的点自己修改；如下面的代码，这一步很简单；
简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】
06-13
简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】 简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。 简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】
HTML登录页面
jakelihua
10-27 4万+
本文用最通俗的语言，一步步教会大家CSS构建登录页面。首先构建。
html登录页面
无心
09-02 2349
效果图 html代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&
简单的HTML登录界面（带源码）
宝子的博客
07-05 3万+
非常的简单，第一眼看到这个界面的时候就感觉非常的喜欢，给我一种简约又美观的感觉，然后就模仿样式自己写出来了，给大家分享一下。还写了一个注册页面大部分的代码都差不多，因为它们实在太像了，我太喜欢了。
html实现登录界面
nothing
04-08 1135
html实现登录界面
html登录界面_制作一个简单的HTML登陆界面
weixin_39914499的博客
12-01 5734
每个网站都会有登录页面，那你知道如何写HTML登录页面吗？诺亚今天这篇文章就和大家分享一个HTML简单登录界面的代码，有一定的参考价值，感兴趣的朋友可以看看。实例：制作一个HTML登录页面，包含邮箱，登录密码，立即注册，忘记密码等，代码如下：HTML部分：登 录立即注册忘记密码CSS部分：* { margin: 0; padding: 0; } html { height: 100%; ...
登陆页面html代码
07-06
优美的登陆页面 含源代码。
登录页面HTML代码
05-30
登录页面代码，登录页面代码登录页面代码登录页面代码登录页面代码登录页面代码
漂亮的html登陆界面
06-14
浅蓝色漂亮的html登陆界面 PSD与HTML
HTML登陆界面
07-01
好看的蓝色HTML登陆界面，自己用的<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>用户登录</TITLE><LINK href="images/Default.css" type=text/css rel=stylesheet><LINK href="images/xtree.css" type=text/css rel=stylesheet><LINK href="images/User_Login.css" type=text/css rel=stylesheet> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <META content="MSHTML 6.00.6000.16674" name=GENERATOR></HEAD> <BODY id=userlogin_body>
html登录页面,html登录页面
01-08
html登录页面,html登录页面
vue+element简单登录界面/登陆界面
01-31
vue+element简单登录/登陆界面，在线预览地址若无法访问，可私聊作者获取最新在线预览地址 vue+element简单登录/登陆界面，在线预览地址若无法访问，可私聊作者获取最新在线预览地址 vue+element简单登录/登陆界面，...
html5简单的 登陆界面
09-06
在这个"html5简单的登录界面"示例中，我们将探讨如何利用HTML5的元素和属性构建一个既美观又易于理解和实现的登录页面。 首先，HTML5的`<form>`标签用于创建表单，是构建登录界面的基础。在登录界面中，通常包含两...
超简单的登陆界面login
05-29
这个"超简单的登录界面login"项目，对于刚开始学习HTML的人来说，是一个很好的起点。它可以帮助理解基本的网页结构，以及如何通过HTML元素来构建用户交互界面。 HTML（HyperText Markup Language）是构建网页的基础...
简单的html登陆界面
05-31
以下是一个简单的 HTML 登录界面的示例代码： ```html <!DOCTYPE html> <html> <head> <title>Login</title> </head> <body> <h2>Login</h2> <form> <label for="username">Username:</label> <input type="text" id="username" name="username"><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password"><br><br> <input type="submit" value="Submit"> </form> </body> </html> ``` 这个代码包括一个标题（Login），一个表单，以及两个输入字段（用户名和密码）和一个提交按钮。用户输入用户名和密码后，可以通过提交按钮提交表单。你可以根据自己的需求进行修改和美化。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值