源代码下载地址：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; }
