前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >H5实现之登录模版的实现 原

H5实现之登录模版的实现 原

作者头像
用户2603479
发布2018-08-15 16:41:40
2670
发布2018-08-15 16:41:40
举报
文章被收录于专栏:JAVA技术站

html代码

代码语言:javascript
复制
<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="css/login.css">
</head>
<body>
 <div class="login_box">
     <div class="login_title">
	      <a href="#">忘记密码?</a>
	 </div>
	 <ul class="input_group">
	  <li>
	    <span class="input_group_icon">
		   <img src="images/user.png">
		</span>
		<div class="input_fgline">
		<input name="user-name" placeholder="用户名" type="text">
		</div>
	  </li>
	    <li>
		<span class="input_group_icon">
		   <img src="images/password.png">
		</span>
		<div class="input_fgline">
		<input name="user-name" placeholder="密码" type="text">
		</div>
	  
	  </li>
	 </ul>
	 <div class="login_btn">
	     <input type="button" value="登录">
		 </div>
	 </div>
 </div>

css代码

代码语言:javascript
复制
body{
background-image:url(../images/login_bgi.jpg);
}

.login_box{
 position: absolute;
  top: 50%;
  left: 50%;
  width: 520px;
  height: 326px;
  margin-top: -163px;
  margin-left: -260px;
  background-color: #fff;
}

.login_title{
background-color:#2a4b7f;
height:40px;
padding-top:20px;
background-image:url(../images/logo_login.png);
background-repeat: no-repeat;
background-position: 15px center;
text-align: right;
line-height: 40px;
}

.login_title a{
margin-right:10px;
color: #6988b7;
font-size: 14px;
text-decoration:none;
}

.login_box ul{
 padding: 43px 118px 0;
}

.login_box ul li{
    border-bottom: 1px solid #d4d4d4;
    overflow: hidden;
    padding-top: 20px;
}

.input_group_icon{
float:left;
margin-top:4px;
}

.input_fgline{
padding-left:20px;
border:none;
}
input {
    border: 0 none;
    color: #666;
    font-size: 13px;
    height: 30px;
    line-height: 30px;
    width: 100%;
}
.login_btn{
padding: 0 148px;
}
.login_btn input{
background-color: #85c034;
border-radius:20px;
height:40px;
font-size:18px;
color:#FFFFFF;
}

效果图

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016/12/19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档