基于boostrap的登录注册界面制作（html+css） |
您所在的位置：网站首页 › 前端登录注册页面模板源码 › 基于boostrap的登录注册界面制作（html+css） |
基于boostrap的登录注册界面制作（html+css）
|
这里写自定义目录标题
基于boostrap的登录界面制作1. 安装bootstrap以及fontawesome环境2. 表单设计3. CSS样式
基于boostrap的登录界面制作
1. 安装bootstrap以及fontawesome环境
有几种方法可以安装环境，我这里使用了百度的静态资源库的cdn安装环境 直接写在head里就可以了。 需要注意的是，因为bootstrap是基于jquery的，使用要在引入bootstrap的js前引入jquery。 2. 表单设计登录和注册页面都需要用户输入信息，这里采用了form表单来采集用户输入的信息。form表单主要用于用户和web之间进行数据交互。 表单中的重要组件是input，与用户输入有关的组件基本都是用input去实现的，input有一个重要属性type,用于设定组件类型,下面讲一下我这里需要用到的集中类型。 1.text：单行文本框 这里再讲一下一些常用的属性： class是类名，用于方便css定位元素。 name是在于web进行交互时的数据名，通常与id一致。 id是一个元素在一个html中的唯一标识，不能重复，通常用于css和js定位元素。 placeholder：输入提示信息，字段会在获得焦点后消失。 required：将该元素设置为必填项。 autofocus：将该元素自动设置为焦点（即打开网页自动选中）。 2.password:密码框，输入的文字会被遮挡。 3.email:邮箱，会验证输入的内容是否是邮箱格式 4.submit：提交按钮 然后进行表单的设计 Login.html Login 登录 没有账号？立即注册Register.html Register 注册 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; }下面是实际效果 |
点击立即注册可以跳转到注册界面。 
在注册页面点返回又能回到登录界面。 初学前端，希望能对和我一样的初学者有帮助【本文地址】
今日新闻 |
推荐新闻 |