源代码下载地址：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;
}
转载自原文链接, 如需删除请联系管理员。
原文链接：【HTML基础习题】HTML5+CSS3做问卷星登录页面，转载请注明来源！