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

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

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


效果图：【HTML基础习题】HTML5+CSS3做问卷星登录页面_js

图片素材（放到 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;
}