【HTML基础习题】HTML5+CSS3做问卷星登录页面

源代码下载地址：https://download.csdn.net/download/weixin_44893902/12839539

码云仓库地址： https://gitee.com/ynavc/WJX

演示地址：http://ynavc.gitee.io/wjx

演示连接：https://www.wulihub.com.cn/go/QowRNQ/index.html

 

效果图：

图片素材（放到 img文件夹下）：img.zip

 

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>问卷星_登录页面</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<div id="wrap">
			<!--头部-->
			<div id="header">
				<div id="top_l">
					<a href="#"><img src="img/logo.png"/></a>
				</div>
				<div id="top_f">
					<a id="text_zc" href="#">注册</a>
					<a id="text_fhsy" href="#">返回首页</a>					
				</div>
			</div>
			<!--中间内容部分-->
			<div id="content">
				<h1>问卷星登录</h1>
				<form action="login" method="post">
					<input id="input_1" type="text" value="" placeholder="用户名/Email/手机" />
					<br />
					<input id="input_2" type="text" value="" placeholder="请输入登录密码"/>
					<br />
					<input id="input_3" type="checkbox" value="" /> 
					<a id="a_1" >下次自动登录</a> 
					<a id="a_2" href="#">忘记用户名/密码？</a> 
					<br />
					<input type="submit" id="input_4" value="登录" />
				</form>
				<a id="a_3" href="#">立即注册</a>
				<div id="content_foot_1">第三方登录</div>
				<hr id="content_foot_2"></hr>
				<div id="content_foot_3_1"><div class="img50"><img src="img/qq_hover.jpg"/></div>QQ登录</div>
				<div id="content_foot_3_2"><div class="img50"><img src="img/weix_hover.jpg"/></div>微信登录</div>
				<div id="content_foot_3_3"><div class="img50"><img src="img/qiye_hover.jpg"/></div>企业微信</div>
			</div>
			<!--脚部-->
			<div id="footer">
				<div style="margin-bottom:12px;font-size:20px;color: #a4a4a5;">
					《登顶武功山》
				</div>
				<div style="padding-left:10px;font-size:16px;color: #a4a4a5;">
					拍摄于问卷星团队二月徒步之旅
				</div>
			</div>
		</div>
	</body>
</html>

CSS代码（放到 CSS文件夹下）：

*{
	margin: 0;
	padding: 0;
}
#wrap{
	margin: 0 auto;
	width: 1920px;
	height: 926px;
	background-image: url(../img/bacg.jpg);
}
#header{
	float: left;
	width: 100%;
	height: 10%;
}
#top_l{
	float: left;
	padding-left: 50px;
	padding-top: 40px;
	height: 100%;
}
#top_f{
	float: right;
	padding-top: 50px;
	padding-right: 50px;
	height: 100%;
	float: right;
}
#top_f a{
	margin-left: 20px;
	padding: 10px 30px;
	text-decoration: none;
	color: #FFF;
	width: 90px;
	height: 48px;
	border-radius: 100px;
	font-size: 20px;
	border: 1px solid #fff;
}
#top_f a:hover{
	border: 3px solid #fff;
}
#content{
	float: left;
	margin: 0 auto;
	margin-top: 90px;
	margin-left: 700px;
	border-radius: 14px;
	background-color: white;
	width: 490px;
	height: 530px;
}

#content h1{
	padding: 30px;
	text-align: left;
	color: #fa911e;
	font-weight: bold;
	font-size: 24px;
}
#input_1,#input_2{
	margin-left: 50px;
	font-size: 15px;
	border: 1px solid #e6e6e6;
	border-radius: 100px;
	width: 70%;
	height: 48px;
	padding: 1px 0 1px 46px;
	outline: none;
}
#input_1{
	background-repeat: no-repeat;
	background-position: left;
	background-position: 15px;
	background-image: url(../img/user.png);
}
#input_1:hover{
	border: 1px solid #fa911e;
}
#input_2{
	margin-top: 15px;
	background-repeat: no-repeat;
	background-position: left;
	background-position: 15px;
	background-image: url(../img/password.png)
}
#input_2:hover{
	border: 1px solid #fa911e;
}
#input_3,#input_4{
	margin-left: 60px;
	margin-top: 35px;
}
#content a_1{
	font-size: 16px;
}
#a_2{
	font-size: 15px;
	margin-left: 130px;
	color: black;
}
#a_2:hover{
	color: #f08200;
}
#input_4{
	background-color: #fa911e;
	width: 76%;
	height: 48px;
	font-size: 23px;
	color: white;
	border: none;
	border-radius: 100px;
	letter-spacing: 10px;
}
#input_4:hover{
	background-color: #f08200;
}
#a_3{
	line-height: 50px;
	margin-left: 205px;
	text-decoration: none;
	color: #FA911E;
	font-size: 18px;
}
#a_3:hover{
	color: #f08200;
}
#content_foot_1{
	width: 100px;
	height: 20px;
	margin-left: 200px;
	margin-bottom: 20px;
	color: #888888;
	text-align: center;
}

#content_foot_2{
	margin-left: 50px;
	width: 80%;
	float: left;
	border-top: 2px solid #e6e6e6;
	margin-top: -30px;
}

#content_foot_3_1,#content_foot_3_2,#content_foot_3_3{
	font-size: 10px;
	margin-left: 140px;
	float: left;
	width: 50px;
	height: 50px;
}
#content_foot_3_1{
	background-image: url(../img/qq.png);
}
#content_foot_3_2{
	margin-left: 30px;
	background-image: url(../img/weixin-nor.png);
}
#content_foot_3_3{
	margin-left: 30px;
	background-image: url(../img/qiye-nor.png);
}
#content img:hover{
	display: none;
}
.img50{
	width: 50px;
	height: 50px;
}
#footer{
	float: right;
	padding-top: 700px;
	padding-right: 100px;
}

 

posted @ 2020-04-28 10:22  明金同学  阅读(105)  评论(0)  编辑  收藏  举报