基于boostrap的登录注册界面制作（html+css）
这里写自定义目录标题
- 基于boostrap的登录界面制作
-
- 1. 安装bootstrap以及fontawesome环境
- 2. 表单设计
- 3. CSS样式
基于boostrap的登录界面制作
1. 安装bootstrap以及fontawesome环境
有几种方法可以安装环境，我这里使用了百度的静态资源库的cdn安装环境
直接写在head里就可以了。
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js">script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js">script>
需要注意的是，因为bootstrap是基于jquery的，使用要在引入bootstrap的js前引入jquery。
2. 表单设计
登录和注册页面都需要用户输入信息，这里采用了form表单来采集用户输入的信息。form表单主要用于用户和web之间进行数据交互。
表单中的重要组件是input，与用户输入有关的组件基本都是用input去实现的，input有一个重要属性type,用于设定组件类型,下面讲一下我这里需要用到的集中类型。
1.text：单行文本框
<input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名" required autofocus>
这里再讲一下一些常用的属性：
class是类名，用于方便css定位元素。
name是在于web进行交互时的数据名，通常与id一致。
id是一个元素在一个html中的唯一标识，不能重复，通常用于css和js定位元素。
placeholder：输入提示信息，字段会在获得焦点后消失。
required：将该元素设置为必填项。
autofocus：将该元素自动设置为焦点（即打开网页自动选中）。
2.password:密码框，输入的文字会被遮挡。
<input class="form-control " type="password" name="password" id="password" placeholder="请输入密码" required>
3.email:邮箱，会验证输入的内容是否是邮箱格式
<input class="form-control required" type="email" name="email" id="email" placeholder="请输入邮箱" required>
4.submit：提交按钮
<input type="submit" value="登录" class="btn btn-success pull-right">
然后进行表单的设计
Login.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Logintitle>
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js">script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js">script>
<script type="text/javascript" src="js/jquery.validate.min.js" >script>
<link rel="stylesheet" href="css/Login.css">
<link rel="stylesheet" href="font-awesome-4\7\0\css\font-awesome.min.css">
head>
<body>
<div class="container">
<div class="form row">
<form class="form-horizontal col-sm-offset-3 col-md-offset-3">
<h3 class="form-title">登录h3>
<div class="col-sm-9 col-md-9">
<div class="form-group">
<i class="fa fa-user" aria-hidden="true">i>
<input class="form-control" type="text" name="username" id="username" placeholder="请输入用户名" required autofocus>
div>
<div class="form-group">
<i class="fa fa-key" aria-hidden="true">i>
<input class="form-control " type="password" name="password" id="password" placeholder="请输入密码" required>
div>
<div class="form-group">
<br>
<a href="register.html">没有账号？立即注册a>
div>
<div class="form-group">
<input type="submit" value="登录" class="btn btn-success pull-right">
div>
div>
form>
div>
div>
body>
html>
Register.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Registertitle>
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js">script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js">script>
<script type="text/javascript" src="js/jquery.validate.min.js" >script>
<link rel="stylesheet" href="css/Login.css">
<link rel="stylesheet" href="font-awesome-4\7\0\css\font-awesome.min.css">
head>
<body>
<div class="container">
<div class="form row">
<form class="form-horizontal col-sm-offset col-md-offset-3">
<h3 class="form-title">注册h3>
<div class="col-sm-9 col-md-9">
<div class="form-group">
<i class="fa fa-user" aria-hidden="true">i>
<input class="form-control required" type="text" name="username" id="username" placeholder="请输入用户名" required>
div>
<div class="form-group">
<i class="fa fa-key" aria-hidden="true">i>
<input class="form-control required" type="password" name="password" id="password" placeholder="请输入密码" required>
div>
<div class="form-group">
<i class="fa fa-check-circle-o" aria-hidden="true">i>
<input class="form-control required" type="password" name="resetpw" id="resetpw" placeholder="请确认密码" required>
div>
<div class="form-group">
<i class="fa fa-envelope" aria-hidden="true">i>
<input class="form-control required" type="email" name="email" id="email" placeholder="请输入邮箱" required>
div>
<div class="form-group">
div>
<div class="form-group">
<input type="submit" value="注册" class="btn btn-success pull-right">
div>
div>
form>
div>
div>
body>
html>
3. CSS样式
虽然用了bootstrap框架，但还是有一些东西需要调整。
Login.css文件
/*设置背景图片*/
body {
background: url(../img/carback.jpg) no-repeat;
background-size:cover;font-size: 15px;
}
/*给表单的边框设置大小,颜色和不透明度*/
.form {
background: rgba(255,255,255,0.9);
width:400px;margin:50px auto;
}
/*设置字体和大小*/
label {
font-family: Arial;font-size: 15px
}
/*当输入正确时,给输入框设置浅绿色*/
input.form-control:valid{
background-color: mintcream;
}
/*当输入正确时,给输入框设置浅红色*/
input.form-control:invalid{
background-color: #ffeeed;
}
/*设置图标为行内元素，并设置大小和颜色*/
.fa{
display: inline-block;
top: 27px;
left: 6px;
position: relative;
color: #575757;
}
/*为几个输入框设置padding,防止和图标重合*/
input[type="text"],input[type="password"],input[type="email"]{
padding-left:26px;
}
.form-title{
padding-top:20px;
}
#button{
padding-bottom: 50px;
}
下面是实际效果
点击立即注册可以跳转到注册界面。
在注册页面点返回又能回到登录界面。
初学前端，希望能对和我一样的初学者有帮助