首先博主也是小白，之前没学过前端，花了一晚上做了个登录界面，想分享给大家，比较适合初学者来快速学习，博主以后也好好学基础的前端。
首先先上我做的登录界面的图：
因为博主水平有限，对前端认识太少，只能做出这样的效果，接下来讲解一下做法（重点）。
一、背景图的插入：
首先大家需要从网上找好背景图，这个过程比较简单，大家肯定都会，然后把它放在页面上就需要用到css.大家最好对html.css.js是什么需要了解一下，这个可以谷歌或者百度一下。
背景图插入用到了css 里面的background-image这个方法。
首先在页面外，新建一个css文件，html对其进行引入
这个引入js/css代码如下： 相信大家会懂
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link href="/static/css/login.css" rel="stylesheet">
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/login.js"></script>
然后引入之后就是调用css的这个方法
body{
background-image:url("/static/img/bg.jpg"); /*设置背景图片*/
}意思是在body部分设置背景图。
界面代码在这
<!-- UserLogin html file -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<!--引入css/js文件-->
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link href="/static/css/login.css" rel="stylesheet">
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/login.js"></script>
</head>
<body>
<!--login登陆框-->
<div class="container login" align="center">
<div class="control-group" class="title_div">
<h class="login-title">用户登录</h>
<br/>
</div>
<br/>
<br/>
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<img src="/static/img/login_user.png"/>
<input type="text" placeholder="username" class="input-xlarge input_username">
</div>
<br/>
<div class="control-group" >
<img src="/static/img/login_password.png"/>
<input type="text" placeholder="password" class="input-xlarge input_password">
</div>
<br/>
<div class="control-group">
<img src="/static/img/login_verify.png"/>
<input type="text" placeholder="verifycode" class="input-xlarge input_verify" >
</div>
<div class="control-group">
<label class="control-label"></label>
<div class="controls">
<input type="submit" value="登录" class="btn btn-success btn_login">
</div>
</div>
</fieldset>
</form>
</div>
</body>
</html>
因为今晚有点迟了，先更新到这。
我写的源码在这，希望对大家能有一定的帮助
百度网盘链接：https://pan.baidu.com/s/1GqP4foWj4UO_8FzS1KX_kg
提取码：z3tb