基于HTML5和CSS的登录页面

最新推荐文章于 2023-04-19 19:47:27 发布

newProxyInstance

最新推荐文章于 2023-04-19 19:47:27 发布

阅读量2.2k

点赞数 3

分类专栏：前端文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_37151886/article/details/104599037

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

简介：
初学小萌新一个，一个简单的登录页面，只用到了html和css
其中，背景图可以自行更换，在css样式下的.login background里面。
顶部text文本绝对布局position: absolute;在屏幕上方。
底部floor绝对布局position: absolute;在底部。
中间的登录框和welcome固定游览器中部，不随滚动条改变。
，只为了完成简单的登录功能，form的action默认的是百度，需要连接别的网址的小伙伴可以自行修改。利用H5的placeholder来默认提示请输入用户名和密码，输入字符就会消失。
最后，如果有什么错误和问题欢迎各位大神指导。

效果图展示：
在这里插入图片描述

整体代码如下：

在这里插入代码片
`<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>login</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.login {
				min-height: 960px;
				background: url(image/sea.jpg);
			}

			.login-tip {
				position: absolute;
				/* 相对于浏览器进行定位 */
				top: 15px;
				text-align: center;
				width: 100%;
				font-size: 28px;
				color: #FFF;
			}

			.login-welcome {
				font-size: 28px;
				color: #FFF;
				position: fixed;
				top: 37%;
				left: 46%;
				right: 0;
				margin: 0 auto;
			}

			.login-div {
				padding-top: 20px;
				position: fixed;
				top: 40%;
				left: 43%;
				right: 0;
				margin: 0 auto;
			}

			.login-input {
				/*字体大小  */
				font-size: 14px;
				text-align: center;
				border: 1px solid white;
				border-radius: 6px;
				/*	框弯曲程度  */
				background-color: rgba(255, 255, 255, 0.2);
				right: 0;
				width: 250px;
				height: 50px;
				color: #FFF;
				/*	最小宽度  */

			}

			.login-floor {
				position: absolute;
				/*定位方式 */
				bottom: 1px;
				width: 100%;
				text-align: center;
				/*文本居中  */
				font-size: 14px;
				/*字体大小  */
				color: white;
				/*字体颜色  */
				line-height: 28px;
				/*行高  */
			}
		</style>
	</head>
	<body>

		<div class="login">
			<div class="login-tip">text</div>

			<div class="login-welcome">Welcome</div>

			<div class="login-div">
				<form action="https://www.baidu.com/?tn=88093251_22_hao_pg">					
					<input type="text" name="Username" class="login-input" placeholder="请输入您的账号:"><br />
					<input type="password" name="Password" class="login-input"placeholder="请输入您的密码:"><br />
					<input type="submit" value="Login" class="login-input">
				</form>
			</div>


			<div class="login-floor">
				<div>Copyright © 2020 lzy All Rights Reserved.</div>
				<div>联系邮箱：1033649766@qq.com</div>
				<div>联系地址：XXXX</div>
				<div>联系电话：1008610010</div>
			</div>

	</body>
</html>

newProxyInstance

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
基于HTML5和CSS的登录页面

简介：初学小萌新一个，一个简单的登录页面，只用到了html和css其中，背景图可以自行更换，在css样式下的.login background里面。顶部text文本绝对布局position: absolute;在屏幕上方。底部floor绝对布局position: absolute;在底部。中间的登录框和welcome固定游览器中部，不随滚动条改变。，只为了完成简单的登录功能，form的...
复制链接

扫一扫

专栏目录