一、背景图的插入：

首先大家需要从网上找好背景图，这个过程比较简单，大家肯定都会，然后把它放在页面上就需要用到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

大家如果觉得有帮助的话又可以赞赏一波的话，就感谢了

用户登录界面（Bootstrap）入门教程01（适合初学者）相关推荐

Vue.js入门教程（适合初学者）
Vue.js入门教程 Vue官网网址:Vue.js 中文网 Vue.js Vue.js是渐进式JavaScript 框架,是一套构建用户界面的渐进式框架.也可以说Vue.js 是一个用来构建网页界面的 ...
React 入门教程（适合初学者）
React 入门教程 React 官网 https://reactjs.org/docs/getting-started.html React 是一个用于构建用户界面(UI)的 JAVASCRIPT ...
[C语言界面设计]EGE图形化界面简易版教程（适合初学者）
//又小小修改了一下,加了一些内容^_^ 阅读提示:使用EGE时要创建c++项目, 不是c噢话不多说直接上教程 ------------------------------------------- ...
React 全家桶入门教程 01
React 全家桶入门教程 01 前面是基础课程(难度小,略过),后面是案例目的巩固react基础知识,查漏补缺(熟悉的部分快进) 学习相关的库的使用 https://study.163.com/ ...
Bootstrap4+MySQL前后端综合实训-Day06-AM【eclipse详细配置Tomcat、开发web项目、servlet、连接MySQL8.0数据库、用户登录界面的编写与验证、分页查询】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记][附:实训所有代码] 目录 eclipse重置视图 MySQL数据库--建数据库.建数据库 s ...
idea中创建maven依赖下的web工程(一)----用户登录界面
如果你对idea中创建maven依赖下的web工程不是很了解,请参见上一篇博客--idea中创建maven依赖下的第一个web工程各路大神对于idea的基本操作已经非常的熟悉了, 嗯,我还是一只入门 ...
用户登录界面 - 记事本风格HTML代码
简介: 这是一个记事本风格的用户登录界面,非常逼真,HTML 代码已经改成了中文的,经过测试,兼容 IE6+.Firefox.Chrome 等浏览器. 优化了自适应问题. 喜欢的可以下载. 从dowe ...
php简单的登录界面,PHP实现简单用户登录界面
用PHP实现简单的用户登录界面,供大家参考,具体内容如下首先要实现用户登录界面需要一个html登录表单用户名: 密码: 重复密码: 然后开始按照流程图写PHP代码 if(trim($_POST[' ...
android studio 微信登录界面,如何使用Android Studio开发用户登录界面
满意答案 zhou9081 2016.05.21 采纳率:51% 等级:7 已帮助:411人如何使用Android Studio开发用户登录界面,具体解决方案如下: 解决方案1: <:t ...
用Java实现用户登录界面
基本步骤 1.创建一个窗体 2.给按钮加上监听 3.获取界面输入框中的值给监听 4.存储用户信息 5.实现登录注册逻辑 1.创建一个窗体 public void LE(){JFrame jf=new ...

用户登录界面（Bootstrap）入门教程01（适合初学者）

一、背景图的插入：

用户登录界面（Bootstrap）入门教程01（适合初学者）相关推荐

最新文章

热门文章