Bootstrap模仿起筷首页效果


Posted in Javascript onMay 09, 2016

直接贴代码了

<!DOCTYPE html>
<html lang="en">
<head>
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>用户注册</title>
 <link href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">
 <link href="qikuai.css" rel="stylesheet">
 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
 </head>
</head>
<body>
 <header>
 <nav class="navbar">
  <div class="container">
  <div class="navbar-header">
   <div class="navbar-brand">
   <a href="javascript:void(0);" title="起筷">
    <img src="/images/logo_navbar.png" class="img-responsive" alt="Responsive image">
   </a>
   </div>
  </div>
  </div>
 </header>
 <div class="login-background">
 <div class="login-panel">
  <div class="login-title">登录到起筷</div>
  <form class="form-group">
  <div class="col-md-12 form-panel">
   <div class="input-block">
   <div class="has-feedback">
    <input id="userIdentifier" class="form-control" placeholder="手机号/用户名/邮箱"></input>
    <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
   </div>
   </div>
   <div class="input-block">
   <div class="has-feedback">
    <input id="userIdentifier" class="form-control" placeholder="登录密码"></input>
    <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
   </div>
   </div>
   <div class="check-block">
   <div class="auto-login">
    <div class="checkbox">
    <label>
     <input value="remember-me" type="checkbox"></input>
     <span>自动登录</span>
    </label>
    </div>
   </div>
   </div>
   <div class="register-user">
   <a href="javascript:void(0);">注册新用户</a>
   </div>
   <div class="row">
   <div class="login-button">
    <button class="btn">登 录</button>
   </div>
   </div>
  </div>
  </form>
 </div>
 </div>
</body>
</html>

css代码:

.navbar{
 height: 108px;
 background-repeat: no-repeat;
 box-shadow: 0 0 5px #999;
 background-color: #fff;
 border-bottom: 2px solid #e8e3dd;
}
.container{
 width: 1170px;
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}
.navbar-header{
 float: left;
}
img{
 vertical-align: middle;
 border: 0;
}
.login-background{
 background-image: url(/images/register-background.jpg);
 background-size: 100% auto;
 padding: 50px 0 15%;
 height: 633px;
}
.login-panel{
 background-color: #fff;
 opacity: .95;
 border-radius: 10px;
 position: relative;
 padding: 0 80px 20px;
 width: 350px;
}
.login-title{
 color: #333;
 font-weight: 300px;
 font-size: 24px;
 position: absolute;
 top: 40px;
 left: 35px;
}
.login-panel,.form-group{
 padding: 50px 0 5px;
 display: table;
 margin-left: auto;
 margin-right: auto;

}
.form-group{
 margin-bottom: 15px;
 width: 100%;
 float: left;
 padding-left: 15px;
 padding-right: 15px;
}
.login-panel .form-group{
 padding-top: 45px;
}
.input-block{
 padding: 11px 0;
}
.has-feedback{
 padding-right: 0;
 position: relative;
}
.form-control{
 color: #777;
 height: 37px;
 border: 1px solid #939393;
 padding-right: 42.5px;
 display: block;
 width: 100%;
 padding: 6px 12px;
 font-size: 14px;
 line-height: 1.42857143;
 background-color: #fff;
 border-radius: 4px;
}
.glyphicon{
 position: absolute;
 top: 0;
 right: 0;
 z-index: 2;
 display: block;
 width: 34px;
 height: 34px;
 line-height: 34px;
 text-align: center;
 pointer-events:none;
}
.auto-login{
 padding-left: 0;
 padding-right: 0;
 text-align: left;
 font-size: 12px;
 color: #777;
 vertical-align: middle;
 width: 50%;
 float: left;
}
label{
 display: inline-block;
 max-width: 100%;
}
.register-user{
 padding-left: 0;
 padding-right: 0;
 text-align: right;
 padding-top: 10px;
 width: 50%;
 float: left;
}
a{
 text-decoration: none;
}
.row{
 margin-right: -15px;
 margin-left: -15px;
}
.login-button{
 margin-top: 10px;
 width: 100%;
 position: relative;
 min-height: 1px;
 padding-right: 15px;
 padding-left: 15px;
}
.btn{
 background: #fa0;
 color: #fff;
 display: block;
 width: 100%;
 padding: 10px 16px;
 font-size: 18px;
 line-height: 1.33333;
 border-radius: 6px;
 font-weight: 400;
 text-align: center;
 vertical-align: middle;
}

效果图:

Bootstrap模仿起筷首页效果

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家学习Bootstrap有所帮助。

Javascript 相关文章推荐
获取DOM对象的几种扩展及简写
Oct 09 Javascript
jquery实现文字由下到上循环滚动的实例代码
Aug 09 Javascript
jQuery插件实现多级联动菜单效果
Dec 01 Javascript
详解AngularJS中的http拦截
Feb 09 Javascript
js实现异步循环实现代码
Feb 16 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
EasyUI学习之Combobox级联下拉列表(2)
Dec 29 Javascript
用JavaScript实现让浏览器停止载入页面的方法
Jan 19 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
浅谈JavaScript find 方法不支持IE的问题
Sep 28 Javascript
微信小程序实现商品属性联动选择
Feb 15 Javascript
基于jquery实现智能表单验证操作
May 09 #Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 #Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 #Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 #Javascript
JavaScript 函数的执行过程
May 09 #Javascript
jQuery绑定事件-多种实现方式总结
May 09 #Javascript
js原型链与继承解析(初体验)
May 09 #Javascript
You might like
PHP文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
js实现卡片式项目管理界面UI设计效果
2015/12/08 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
Python实现删除文件但保留指定文件
2015/06/21 Python
详解Python如何获取列表(List)的中位数
2016/08/12 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
Python函数参数类型及排序原理总结
2019/12/19 Python
python中with用法讲解
2020/02/07 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
CSS3 box-sizing属性详解
2016/11/15 HTML / CSS
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
大学生实习思想汇报
2014/01/12 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
中标通知书范本
2015/04/17 职场文书
个人原因辞职信模板
2015/05/13 职场文书