简单的HTML登录界面

最新推荐文章于 2024-03-19 07:41:56 发布
最新推荐文章于 2024-03-19 07:41:56 发布
阅读量9.2w 收藏 135
点赞数 31
分类专栏： 前端 网页 文章标签： 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
关注
  • 31
    点赞
  • 踩
  • 135
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
登陆页面html代码
07-06
优美的登陆页面 含源代码。
超简单的登陆界面login
05-29
超简单的登陆界面login，适合新学html的同学们
html完美前后台登陆界面
09-26
html完美前后台登陆界面 学习时的必备资料 真的很不错 很强大
六个好看实用的html简单登录页面源码
最新发布
爱酷码的博客
03-19 1193
六个好看实用的html简单登录页面源码，用在自己的项目中再合适不过了，都是单页，可以减少不必要的开发，效果如下：
简单入门编写html登录界面
WSY444的博客
12-02 1万+
HTML登录代码 HTML 元素 HTML 元素
好看实用的六个html登录页面
热门推荐
ss810540895的博客
07-15 11万+
原文1.效果图： 代码： 2.效果图： 源码： 3.效果图：源码： 4.效果图：源码： 5.效果图： 源码： 6.效果图：源码：
简单的登陆界面
10-11
简单的HTML登陆界面，适合刚学习HTML语言的用户。
html登陆页面
10-07
基于bootstarp的前端登陆页面基于bootstarp的前端登陆页面
html登录界面_制作一个简单的HTML登陆界面
weixin_39914499的博客
12-01 5645
每个网站都会有登录页面，那你知道如何写HTML登录页面吗？诺亚今天这篇文章就和大家分享一个HTML简单登录界面的代码，有一定的参考价值，感兴趣的朋友可以看看。实例：制作一个HTML登录页面，包含邮箱，登录密码，立即注册，忘记密码等，代码如下：HTML部分：登 录立即注册忘记密码CSS部分：* { margin: 0; padding: 0; } html { height: 100%; ...
HTML登录页面
jakelihua
10-27 3万+
本文用最通俗的语言，一步步教会大家CSS构建登录页面。首先构建。
html登录页面
无心
09-02 1099
效果图 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登录界面
weixin_67655617的博客
12-06 320
login body { bac
登陆页面模板
01-30
内含一个登陆页面的html,和一个images的文件夹，页面简单适合学生下载使用。
HTML登录界面的实现
03-30
HTML登录界面的实现
登录页面HTML代码
05-30
登录页面代码，登录页面代码登录页面代码登录页面代码登录页面代码登录页面代码
漂亮的html登陆界面
06-14
浅蓝色漂亮的html登陆界面 PSD与HTML
html5简单的 登陆界面
09-06
html5 简单的登陆界面 美观可以用 易于新手学习与应用
18种后台登陆界面HTML源码
03-02
包含源码的18种后台网站模板，绝对超值的选择，还附带网站后台界面的模板，希望能给各位带来帮助！
vue+element简单登录界面/登陆界面
01-31
vue+element简单登录/登陆界面，在线预览地址若无法访问，可私聊作者获取最新在线预览地址 vue+element简单登录/登陆界面，在线预览地址若无法访问，可私聊作者获取最新在线预览地址 vue+element简单登录/登陆界面，...
简单的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），一个表单，以及两个输入字段（用户名和密码）和一个提交按钮。用户输入用户名和密码后，可以通过提交按钮提交表单。你可以根据自己的需求进行修改和美化。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值