<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>问卷星</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.bigbox{
width: 1455px;
height: 750px;
border: 1px solid black;
background-image: url(img/bj.jpg);
}
.box1{
width: 1300px;
height: 53px;
position: relative;
border: 1px solid transparent;
}
.box2{
width: 300px;
height: 30px;
font-size: 20px;
margin-right: 0px;
margin-top: 1%;
float: right;
text-decoration: none;/* 去掉下划线 */
border: 1px solid transparent;
}
.zcbox{
width: 89px;
height: 30px;
float: left;
margin-top: 0%;
margin-left: 0%;
color: white;
border: 1px solid white;
border-radius: 100px;
text-decoration: none;
}
.zcbox:hover{
border: 4px solid white;
color: white;
}
.cbox1{
width: 89px;
height: 30px;
float: left;
margin-top: 10%;
margin-left: 0%;
color: white;
text-align: center;
border-radius: 100px;
line-height:12px;
font-size: 20px;
text-decoration: none;
}
.cbox1:hover{
font-size: 24px;
}
.fhbox{
width: 120px;
height: 30px;
float: left;
margin-top: -11%;
margin-left: 70%;
color: white;
border: 1px solid white;
border-radius: 100px;
text-decoration: none;
}
.fhbox:hover{
border: 4px solid white;
color: white;
}
.cbox2{
width: 120px;
height: 30px;
float: left;
margin-top: 0%;
margin-left: 0%;
color: white;
text-align: center;
border-radius: 100px;
line-height:29px;
font-size: 20px;
text-decoration: none;
}
.cbox2:hover{
font-size: 24px;
}
.zbox{
width: 450px;
height: 550px;
position: fixed;
top: 15%;
left: 50%;
margin-left: -240px;
z-index: 2px;
border-radius: 12px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;
background-color:#FFF;
}
.boxw1{
width: 390px;
height: 70px;
text-decoration: none;
font-size: 20px;
top:15%;
padding: 15px;
padding-top: 40px;
box-sizing: border-box;
color: black;
}.boxww{
width: 89px;
height: 21px;
float: left;
margin-top: 0%;
margin-left: 4%;
color: grey;
text-align: center;
line-height:18px;
font-size: 20px;
text-decoration: none;
border-bottom: transparent 2px solid;
}
.boxww:hover{
color: black;
font-size: 20px;
border-bottom:orange 2px solid;
}
.boxwe{
width: 103px;
height: 21px;
float: left;
margin-top: 0%;
margin-left: 4%;
color: grey;
text-align: center;
line-height:18px;
font-size: 20px;
text-decoration: none;
border-bottom: transparent 2px solid;
}
.boxwe:hover{
color: black;
font-size: 20px;
border-bottom:orange 2px solid;
}
input:focus{
outline: none;
}
.boxw2{
width: 350px;
height: 25px;
padding: 1%;
border: 1px solid gainsboro;
margin-left: 28px;
}
.boxw3{
width: 350px;
height: 25px;
padding: 1%;
border: 1px solid gainsboro;
margin-left: 28px;
margin-top: 15px;
}
.boxw4{
width: 350px;
height: 25px;
padding: 1%;
margin-left: 28px;
margin-top: 15px;
display: flex;
}
.cbox{
width: 150px;
height: 50px;
float: left;
margin-top: 0%;
margin-left: 26%;
color: #000;
}
.cbox:hover{
color: orange;
}
.box5{
width: 350px;
height: 25px;
padding: 1%;
margin-left: 28px;
margin-top: 15px;
background-color: orange;
line-height: 25px;
text-decoration: none;
float: none;
display: flex;
}
.box55{
width: 50px;
height: 20px;
background-color: orange;
margin: auto;
text-decoration: none;
color: white;
}
.box6{
width: 70px;
height: 25px;
padding-top: 18px;/* 间距 */
margin: auto;
color: dodgerblue;
}.box66{
width: 70px;
height: 25px;
padding-top: 18px;/* 间距 */
margin: auto;
color: dodgerblue;
}
.box66:hover{
color: mediumblue;
}
.dbox{
width: 150px;
height: 35px;
margin: auto;
color: #888888;
text-align: center;
float:left;
line-height: 20px;
margin-top: 6%;
margin-left: 34%;
}
.dbox7{
width: 126px;
height:20px;
float: left;
margin-top: 9%;
margin-left: -59%;
}
.dbox8{
width: 118px;
height:20px;
float: right;
margin-top: -5.5%;
margin-right:10%;
}
.dbox1{
position: relative;
width: 360px;
height: 68px;
margin: auto;
margin-top: 90px;
display: flex;
}
.dbox2{
width: 70px;
height: 68px;
float: left;
}
.dbox3{
width: 70px;
height: 68px;
margin: auto;
float: none;
}
.dbox4{
width: 70px;
height: 68px;
float: right;
}
</style>
</head>
<body>
<div class="bigbox">
<div class="box1">
<a href="log" class="#">
<img src="img/wjx-logo@2x.png" width="130px" height="49px" alt="问卷星不止问卷调查/在线考试"
</a>
<div class="box2">
<div class="zcbox">
<a href="#" class="cbox1">注册</a></div>
<div class="fhbox">
<a href="#" class="cbox2">返回首页</a></div>
</div>
</div>
<div class="zbox">
<div class="boxw1">
<a href="#" id="#" class="boxww">账号登录
</a>
<a href="#" id="#" class="boxwe">验证码登录 </a>
</div>
<div class="boxw2">
<p><font color="gray">用户名/Email/手机</font></p>
</div>
<div class="boxw3"><p><font color="gray">请输入登录密码</font></p></div>
<div id="#" class="boxw4">
<input type="checkbox" name="gxh" /><p><font color="gray">下次自动登录</p></font>
<a href="#" class="cbox" > 忘记用户名/密码？</a>
</div>
<div class="box5">
<div class="box55"><a href="#" class="box55">登录</a></div>
</div>
<div class="box6"><a href="#" class="box66">立即注册</a></div>
<div class="dbox">更多登录方式</div>
<div class="dbox7"/><hr /></div>
<div class="dbox8"><hr /></div>
<div class="dbox1">
<div class="dbox2"><img src="img/kk.png"/>QQ登录</div>
<div class="dbox3"><img src="img/wx.png"/>微信登录</div>
<div class="dbox4"><img src="img/qy.png"/>企业微信</div>
</div>
</div>
</body>
</html>
问卷星代码前端
最新推荐文章于 2024-07-18 13:52:01 发布
1108
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
