html+css登录界面

html+css制作登录界面

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>用户登录</title>
		<link href="css/css1.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div class="log_in">
			<div class="p1">登录</div>
			<div class="p2">log_in</div>
			<div>
				<input type="text" value="请输入账号" class="input1">
				<input type="text" value="请输入密码" class="input1">
				<input type="submit" value="log_in" class="button1" />
			</div>
		</div>
	</body>
</html>

css代码

*{
	margin: 0;
	padding: 0;
	list-style-type: none;
}
html{
	height: 100%;
}
body{
	height: 100%;
	background-image: url(../img/iTab1.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: 100% 100%;
	font-family: "微软雅黑";
}
.log_in{
	width: 558px;
    height: 358px;
	margin: 350px auto;
	/*border: 1px solid #ccc;*/
	background-color: rgba(255,255,255,0.4);
	border: 1px ;
	/*opacity: 0.1;*/
	box-shadow: 0px 0px 95px 1px rgba(255,255,255,0.5);
	border-radius: 25px;
}
.p1{
	padding-top: 25px;
	font-family: "微软雅黑";
	font-size: 38px;
	color: #FFFFFF;
	text-align: center;
	font-weight: bold;
}
.p2{
	padding-top: 1px;
	font-family: "微软雅黑";
	color: #FFFFFF;
	text-align: center;
	padding-bottom: 20px;
}
.input1{
	display: block;
	padding-top: 15px;
	padding-bottom: 10px;
	font-weight: bold;
	color: #FFFFFF;
	width: 400px;
	margin: 10px auto;
	background-color: rgba(255,255,255,0);
	border: none;
	border-bottom: 2px solid #FFFFFF;
}
.button1{
	display: block;
	width: 358px;
	height: 35px;
	margin: 25px auto;
	border-radius: 20px;
	background-color: rgba(255,255,255,0.3);
	color: #FFFFFF;
}
.button1:hover{
	background-color: rgba(33,119,184,0.4);
	border: none;
}