css之登录界面

最新推荐文章于 2024-05-31 11:20:07 发布

澳神弱爆

最新推荐文章于 2024-05-31 11:20:07 发布

阅读量638

点赞数

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

本文链接：https://blog.csdn.net/asrbily/article/details/122287075

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- 生产环境版本，优化了尺寸和速度 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
	<style>
		body{
			 margin: 0;
			width: 100%;
			height: 100%;
			background: cadetblue;
		}
		#login{
			margin: auto;
			width: 600px;
			height: 400px;
			position: relative;
			top: 100px;
			background: burlywood;
		}
		#login h1{
			text-align: center;
			
		}
		#login input{
			width: 300px;
			height: 20px;
			
			
		}
		#login button{
			position: relative;
			left:200px
		}
		.form-control{
			margin: 20px;
		
		}
		
		
	</style>
	</head>
	<body>
		<div id="login">
			<h1>欢迎来到登录界面</h1> 
			<form method="post">  
			用户名：<input class="form-control" required="required" type="text"></br>
			密&nbsp;&nbsp;&nbsp;码：<input class="form-control" required="required" type="password"></br>
			<button class="but" type="submit">登录</button>
			<button class="but" >注册</button>
			</form>
		</div>
	</body>
</html>

运行结果
在这里插入图片描述
简简单单使用继续加油

澳神弱爆

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css之登录界面

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <style> body{ margin: 0;
复制链接

扫一扫