登录页面
一、HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head lang="en">
<meta charset="UTF-8">
<title>登录 </title>
<link rel="stylesheet" href="../css/dienglu.css"/>
</head>
<body>
<!--顶部-->
<header class="buy">
<div><img src="../img/456.png" alt=""/></div>
</header>
<!--导航下的第一个图片 -->
<div class="num">
<img src="../img/123.png" alt=""/>
</div>
<!-- 右边部分-->
<form class="tx" action="#" method="get">
<div class="baidu">
<div>
<div>
<input class="trap" type="button" value="账号登录"/>
<input class="yun" type="submit" value="手机动态吗登录"/>
<img src="../img/shojixitu1.jpg" alt=""/>
</div>
<p><input class="hang" type="text" name="usename" placeholder="手机号/用户名/邮箱"/></p>
<div class=pen>
<img src="../img/TY.jpg" alt=""/>
</div>
<p> <input class=muc type="password" name="usenam"placeholder="密码"/></p>
<div class="bn">
<img src="../img/qy.jpg" alt=""/>
</div>
</div>
<div class="web">
<input class="tra" type="checkbox" value=""/>
<!--<p>7天登录页面<a href="">忘记密码?</a></p>-->
<ingut class="ni" type="cherobox name=aihao">7天登录页面</ingut>
<ingut class="trapq" type="cherobox name=aihao">忘记密码?</ingut>
</div>
<div class="num1">
<div>
<div>
<input class="thtng" type="submit" value="登录"/>
</div>
<div class="mingtia">
<p>还没有账号?<a href="">免费注册</a></p>
<!--<ingut class="ta" type="cherobox name=aihao">还没有账号</ingut>-->
<!--<ingut class="meng" type="cherobox name=aihao">?免费注册</ingut>-->
</div>
</div>
</div>
</div>
</form>
<div class="cl"></div>
<!-- 底部-->
<footer>
©2016美团团购 mei tuan. com 京ICP证070791号 京官网安备11010502025545 电子公告服务规则
</footer>
</body>
</html>
二、CSS:
.tx{
margin-left: 50px;
}
.buy{
/*margin-left:275px;*/
}
.yun{
color: #6a6a6a;
margin-top: 50px;
margin-left: 75px;
}
.num{
float: left;
margin-left:200px;
margin-right: 150px;
}
.post{
float: right;
}
.hang{
width:230px;
height: 37px;
padding-left: 30px;
padding-right: 10px;
}
.muc{
width: 230px;
height: 37px;
padding-left: 30px;
padding-right: 10px;
}
.thtng{
width: 272px;
height: 37px;
color: #fdfdfd;
background-color: #e31926;
text-align: center;
margin-top: 10px;
}
.pen{
position: absolute;
left:500px;
top: 100px;
padding-right: 8px;
}
.bn{
position: absolute;
left: 500px;
top: 210px;
padding-right:10px;
}
.tra{
width: 13px;
height: 14px;
}
.trapq{
color: #e32e33;
margin-top: 10px;
margin-left: 87px;
}
.meng{
color: #e32e33;
}
.trap{
color: #6a6a6a;
}
.ni{
color: #6a6a6a;
}
.ta{
color: #6a6a6a;
}
footer{
width: 100%;
}
.bandu{
width: 115px;
height: 335px;
}
.mingtia{
margin-top: 10px;
}
.mingtia a{
text-decoration: none;
color: red;
}
.cl{
clear:both;
}
footer {
clear:both;
width:100%;
height:117px;
text-align: center;
padding-top:100px;
box-sizing: border-box;
color: #6a6a6a;
}