1.代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>20210806exm_QQlogin</title>
<style>
/*初始化样式*/
html,body,dl,dd,p,h1,h2,h3,h4,h5,h6,form,input,textarea,button{margin:0;padding:0;}
body,button,input,textarea,select{font-size:12px;font-co:fff;}
table{border-collapse:collapse;border-spacing:0;}
ol,ul{list-style:none;}
a{text-decoration:none;}
img{border:none;vertical-align:top;}
/*最外面的大盒子*/
#mydiv{
width: 430px;
height: 332px;
margin: 10% 40%;
}
/*下部分盒子*/
#bodydiv{
background-color: #ebf2fa;
padding-bottom: 10px;
}
/*头像以及输入框*/
#touxiangdiv,#mesgdiv{
display: inline-block;
height: 10px;
}
#touxiangdiv img{
margin-top: -70px;
}
#mesgdiv{
margin-top: 30px;
}
/*登录按钮*/
#logindiv button,#logindiv input{
width: 170px;
height: 30px;
margin-left: 85px;
margin-top: -20px;
color: white;
background-color: deepskyblue;
border: 0px;
border-radius: 5px;
}
#logindiv{
margin-top: 20px;
}
/*输入框*/
#userinput,#userselect,#wordinput{
width: 170px;
height: 20px;
border: 1px lightgray solid;
}
#userinput,#userselect{
width: 172px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#wordinput{
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#autologin{
margin-left: 135px;
}
.box1{
margin-left: 50px;
}
.left{
float: left;
}
</style>
</head>
<body>
<!--大盒子-->
<div id="mydiv">
<!-- 上部分盒子-->
<div>
<img src="../img/20210806exam02.png"/>
</div>
<!-- 下部分盒子即主体盒子-->
<div id="bodydiv">
<!-- form表单-->
<form name="login" method="post" action="#">
<!-- 除开登录按钮以外的盒子-->
<div class="box1">
<!-- 头像盒子-->
<div id="touxiangdiv">
<img src="../img/20210806exam01.png"/>
</div>
<!-- 输入框盒子-->
<div id="mesgdiv">
<div>
<!-- 下方的select标签和input标签使用其中一个就行，区别为select有下拉框，但没有提示且不能输入，input有提示且可以输入，但没有下拉框，属性placeholder的值即为提示-->
<select id="userselect" type="text" name="username">
<option value="">
2365241246
</option>
<option value="0">
1729381727
</option>
</select> <a href="#">注册账号</a>
<!-- <input id="userinput" type="text" name="username" placeholder="账号"> <a href="#">注册账号</a>-->
<br>
<input id="wordinput" type="password" name="pwd" placeholder="密码"> <a href="#">找回密码</a>
</div>
<br>
<div>
<div class="left">
<input type="checkbox" name="rempwd"> 记住密码
</div>
<div id="autologin">
<input type="checkbox" name="autologin"> 自动登录
</div>
</div>
</div>
</div>
</form>
<!-- 登录按钮那一行的盒子-->
<div id="logindiv">
<img style="margin-left: 20px;" src="../img/20210806exam03.png"/>
<!-- 下方的button标签和input标签使用其中一个就行，二者在展现上没有太大区别-->
<!-- <button type="submit">登 录</button>-->
<input type="submit" value="登 录">
<img style="margin-left: 70px" src="../img/20210806exam04.png"/>
</div>
</div>
</div>
</body>
</html>2.图片资源
3.最终效果图
更多推荐
使用html+css3实现QQ登录界面
发布评论