博主开始做前端开发，对html5和css都不熟悉。应老师的要求硬着头皮做了这个手机端的登录页面，代码写的很烂，不喜勿喷。

手机上运行的效果图：

下面是HTML代码：

登录

登录要做适应手机屏的大小要在标签里加

css代码：

.content{

width: 100%;

margin-top: 40%;

text-align: center;

}

.longin-boder{

width: 80%;

height: 40px;

margin-top: 10px;

margin-left: 10%;

line-height: 40px;

text-align: center;

border: 1px solid #dddddd;

border-radius: 5px;

background-color: #efefef;

}

.image{

width: 10%;

margin-top: 5px;

float: left;

text-align: right;

}

.input{

width: 80%;

float: left;

margin-left: 5%;

height: 37px;

line-height: 37px;

border:0px;

color: #333333;

font-size: 16px;

background-color: #efefef;

}

.button{

height: 40px;

width: 80%;

margin-top: 20px;

margin-left: 10%;

font-size: 16px;

font-family: "微软雅黑";

font-weight: bold;

line-height: 38px;

border-radius: 5px;

color: #ffffff;

background-color: #37B4CA;

}

.button:active {

background-color:#37a3b9;

}