HTML写一个登录框样式

最新推荐文章于 2024-10-07 16:38:08 发布

雕琢时光纸戆

最新推荐文章于 2024-10-07 16:38:08 发布

阅读量1.4w

点赞数 12

分类专栏： html 文章标签：登陆小框框

本文链接：https://blog.csdn.net/TISRNW/article/details/101032288

版权

html 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

以QQ空间的登陆框为例，原先的代码很复杂，还涉及了其他的知识，对于刚刚接触的人来说想写一点点样式来练练手的话可以看一下。
写好之后是这个样子
样式一样，但写法很多，只是一种而已
下面是代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body{
				background-color: gray;
			}
			.wrap{
				width: 414px;
				height: 312px;
				border: solid rgb(238,238,238) 2px;
				background-color: white;
				/*margin: 0px auto;*/
			}
			.wrap .title{
				margin-top: 6px;
				margin-bottom: 16px;
				font-size: 20px;
				color: rgb(51,51,51);
				text-align: center;/*居中*/
				
			}
			.wrap .infor{
				text-align: center;
				color: #666;
				font-size: 16px;
				margin-bottom: 36px;
				
			}
			.wrap .infor a{
				text-decoration: none;
				color:#3481cf;
			}
			.wrap #form{
				text-align: center;
				height:150px ;
				width: 272px;
				margin: 0px auto;
				
			}
			.wrap #form .input{
				height: 38px;
				width: 268px;
				box-sizing: border-box;
				padding: 10px;
				padding-right: 0px;
				margin-bottom: 17px;
				border-radius: 3px;
				border: solid rgb(214,214,21)  1px;
			}
			.wrap #form #btn{
				border-radius: 3px;
				height: 37px;
				width: 258px;
				padding: 1px 7px 2px 7px;
				box-sizing: content-box;
				border: none;
				background-color:rgb(136,210,48) ;
				color: white;
				font-size: 17px;
			}
		</style>
	</head>
	<body>
		<div class="wrap"><!--登录框的最外部的框框-->
			<div class="title"><!--账号密码字体存放的div-->
				账号密码登录
			</div>
			<div class="infor"> <!--第二行字存放的div-->
				推荐使用<a href="">快速安全登录</a>,防止盗号。
			</div>
			<form action="" method="post" id="form"> <!--账号密码登录的一个from表单-->
				<input type="text" class="input" placeholder="支持QQ号/邮箱/手机号登录"/>
				<input type="text"class="input" placeholder="密码"/>
				<button type="button" id="btn">登 录</button>
				<!--简单来讲就是一个大的方块（wrap）包含了title，infor，from三大块的信息，from中又包含了账号，密码，登录三个块块-->
				
			</form>
		</div>
		
	</body>
</html>