ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

html+css登录界面

2022-06-07 20:01:40  阅读:124  来源: 互联网

标签:界面 color padding html background font border css 255


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;
}

完成图

标签:界面,color,padding,html,background,font,border,css,255
来源: https://www.cnblogs.com/loveyxj/p/16353149.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有