基于boostrap的登录注册界⾯制作（html+css）
这⾥写⾃定义⽬录标题
基于boostrap的登录界⾯制作
1. 安ootstrap以及fontawesome环境
有⼏种⽅法可以安装环境，我这⾥使⽤了百度的静态资源库的cdn安装环境
直接写在head⾥就可以了。
<!--⽤百度的静态资源库的cdn安ootstrap环境-->
<!-- Bootstrap 核⼼CSS⽂件 -->
<link href="apps.bdimg/libs/bootstrap/3.3.0/css/bootstrap.min.css"rel="stylesheet">
<!--font-awesome 核⼼CSS⽂件-->
<link href="//cdn.bootcss/font-awesome/4.3.0/css/font-awesome.min.css"rel="stylesheet">
<!-- 在bootstrap.min.js 之前引⼊ jquery -->
<script src="apps.bdimg/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Bootstrap 核⼼js⽂件 -->
<script src="apps.bdimg/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
需要注意的是，因为bootstrap是基于jquery的，使⽤要在引⼊bootstrap的js前引⼊jquery。
2. 表单设计
登录和注册页⾯都需要⽤户输⼊信息，这⾥采⽤了form表单来采集⽤户输⼊的信息。form表单主要⽤于⽤户和web之间进⾏数据交互。
表单中的重要组件是input，与⽤户输⼊有关的组件基本都是⽤input去实现的，input有⼀个重要属性type,⽤于设定组件类型，下⾯讲⼀下我这⾥需要⽤到的集中类型。
<：单⾏⽂本框
<input type="text"class="form-control"name="username"id="username"placeholder="请输⼊⽤户名"r
equired 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>
<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
<!DOCTYPE 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">
cssclass属性<title>Login</title>
<!--⽤百度的静态资源库的cdn安ootstrap环境-->
<!-- Bootstrap 核⼼ CSS ⽂件 -->
<link href="apps.bdimg/libs/bootstrap/3.3.0/css/bootstrap.min.css"rel="stylesheet">
<!--font-awesome 核⼼我CSS ⽂件-->
<link href="//cdn.bootcss/font-awesome/4.3.0/css/font-awesome.min.css"rel="stylesheet">
<!-- 在bootstrap.min.js 之前引⼊ -->
<script src="apps.bdimg/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Bootstrap 核⼼ JavaScript ⽂件 -->
<script src="apps.bdimg/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!--为了保险起见，导⼊了本地的jquery和fontawesome -->
<!--jquery-->
<script type="text/javascript"src="js/jquery.validate.min.js"></script>
<link rel="stylesheet"href="css/Login.css">
<!--font-awesome -->
<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
<!DOCTYPE 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>Register</title>
<!--⽤百度的静态资源库的cdn安ootstrap环境-->
<!-- Bootstrap 核⼼ CSS ⽂件 -->
<link href="apps.bdimg/libs/bootstrap/3.3.0/css/bootstrap.min.css"rel="stylesheet">
<!--font-awesome 核⼼我CSS ⽂件-->
<link href="//cdn.bootcss/font-awesome/4.3.0/css/font-awesome.min.css"rel="stylesheet">
<!-- 在bootstrap.min.js 之前引⼊ -->
<script src="apps.bdimg/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Bootstrap 核⼼ JavaScript ⽂件 -->
<script src="apps.bdimg/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!--为了保险起见，导⼊了本地的jquery和fontawesome -->
<!--jquery-->
<script type="text/javascript"src="js/jquery.validate.min.js"></script>
<link rel="stylesheet"href="css/Login.css">
<!--font-awesome -->
<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">
<input type="button" οnclick="javascrtpt:window.location.href='./Login.html'"class="btn btn-info pull-left" id="back_btn" value="返回"/> </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;
}
下⾯是实际效果
点击⽴即注册可以跳转到注册界⾯。
在注册页⾯点返回⼜能回到登录界⾯。
初学前端，希望能对和我⼀样的初学者有帮助
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论