效果如图：用bootstrap 写的一个简单的登陆

一、修改样式

样式可以自己调整，例如换个背景色之类的，修改 background-color属性就可以

  1.        #from
  2.         {
  3.             background-color: #96b97d;
  4.         }

我自己调的时候只给from加了背景色，当然可以给整个页面加背景色，设置body背景色就可以

  1.         body
  2.         {
  3.             background-color: #96b97d;
  4.         }

当然也可以设置背景图片之类的

  1. body {
  2.     background:url(../img/login_bg_0.jpg) #f8f6e9;
  3. }

至于效果，可以自己去试验。

二、废话少说，上完整代码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5.     <meta charset="utf-8" />
  6.     <title>用户登录</title>
  7.     <link rel="stylesheet" href="css/style.css" />
  8.     <script src="js/bootstrap.min.js"></script>
  9.     <link href="../css/bootstrap.css" rel="stylesheet" type="text/css" />
  10.     <script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script>
  11.     <style>
  12.         #from
  13.         {
  14.             background-color: #96b97d;
  15.         }
  16.         .mycenter
  17.         {
  18.             margin-top: 100px;
  19.             margin-left: auto;
  20.             margin-right: auto;
  21.             height: 350px;
  22.             width: 500px;
  23.             padding: %;
  24.             padding-left: %;
  25.             padding-right: %;
  26.         }
  27.         .mycenter mysign
  28.         {
  29.             width: 440px;
  30.         }
  31.         .mycenter input, checkbox, button
  32.         {
  33.             margin-top: %;
  34.             margin-left: %;
  35.             margin-right: %;
  36.         }
  37.         .mycheckbox
  38.         {
  39.             margin-top: 10px;
  40.             margin-left: 40px;
  41.             margin-bottom: 10px;
  42.             height: 10px;
  43.         }
  44.     </style>
  45.     <script type="text/javascript">
  46.         $(function () {
  47.             $('#btn').click(function (e) {
  48.                 window.location.href = "main.aspx";
  49.             });
  50.         });
  51.     </script>
  52. </head>
  53. <body>
  54.     <form id="from">
  55.     <div class="mycenter">
  56.         <div class="mysign">
  57.             <div class="col-lg-11 text-center text-info">
  58.                 <h2>
  59.                     请登录</h2>
  60.             </div>
  61.             <div class="col-lg-10">
  62.                 <input type="text" class="form-control" name="username" placeholder="请输入账户名" required
  63.                     autofocus />
  64.             </div>
  65.             <div class="col-lg-10">
  66.             </div>
  67.             <div class="col-lg-10">
  68.                 <input type="password" class="form-control" name="password" placeholder="请输入密码" required
  69.                     autofocus />
  70.             </div>
  71.             <div class="col-lg-10">
  72.             </div>
  73.             <div class="col-lg-10 mycheckbox checkbox">
  74.                 <input type="checkbox" class="col-lg-1">记住密码</input>
  75.             </div>
  76.             <div class="col-lg-10">
  77.             </div>
  78.             <div class="col-lg-10">
  79.                 <button type="button" id="btn" class="btn btn-success col-lg-12">
  80.                     登录</button>
  81.             </div>
  82.         </div>
  83.     </div>
  84.     </form>
  85. </body>
  86. </html>

bootstrap 一个简单的登陆页面的更多相关文章

  1. tkinter做一个简单的登陆页面

    做一个简单的登陆页面 import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya.geometry("900x3 ...

  2. tkinter做一个简单的登陆页面（十六）

    做一个简单的登陆页面 import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya.geometry("900x3 ...

  3. vue-cli3和element做一个简单的登陆页面

    1.先用vue-cli3创建一个项目 2.安装element模块 全局安装 npm i element-ui -S 3在main.js引入模块 import ElementUI from 'eleme ...

  4. 使用QT实现一个简单的登陆对话框（纯代码实现C++）

    使用QT实现一个简单的登陆对话框(纯代码实现C++) 效果展示 使用的QT控件 控件 描述 QLable 标签 QLineEdit 行文本框 QPushButton 按扭 QHBoxLayout 水平 ...

  5. django写一个简单的登陆注册

    要写这个,前提还是需要知道三个知识: 一个是urls.py,它是写我们的路由关系的,之前我写了通过wsgiref写一个简单的服务端,也用到了路由,就是 请求过来的url和视图函数的对应关系. 二是就是 ...

  6. ASP.NET Aries 入门开发教程2：配置出一个简单的列表页面

    前言: 朋友们都期待我稳定地工作,但创业公司若要躺下,也非意念可控. 若人生注定了风雨飘摇,那就雨中前行了. 最机开始看聊新的工作机会,欢迎推荐,创业公司也可! 同时,趁着自由时间,抓紧把这系列教程给 ...

  7. android示例：一个简单的登陆程序

    最近写了个简单的登陆程序,有几点收获: 1.懂得如何在LinearLayout中嵌套LinearLayout,完善布局的行列: 2.用android:layout_weight控制控件的比重: 3.用 ...

  8. 用Html写一个简单的登陆界面

    <!DOCTYPE html> <html> <title>登陆页面</title> <head> <meta charset=&qu ...

  9. 用jQuery Mobile搭建一个简单的手机页面

    1.新增html页面. 2.声明html5Document. 3.载入jQuery Mobile Css.jQuery与jQuery Mobile链接库. 4.使用jQuery Mobile定义的ht ...

随机推荐

  1. FPGA阶段性总结及后续博文计划

    之前的博客主要记录了在培训过程中或自己设计小项目时的一些总结,主要涉及通用设计技巧,简单外设接口驱动等.因此内容比较杂,缺乏目的性.考虑设计通用性及提高学习开发效率,后续FPGA设计和博文主要是高带宽 ...

  2. WordPress怎么给分类目录排序

    WordPress默认的分类目录是按照字母的顺序排序的, 我们可以安装一款插件Category Order就可以自定义分类目录的顺序了,这款插件很小,安装后即可在后台的左侧菜单中看见Category ...

  3. 敏感词过滤，js封装class选择器：

    敏感词过滤: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  4. jQuery 3.0最终版发布，十大新特性眼前一亮

    jQuery 3.0在日前发布了最终的全新版本.从2014年10月,jQuery团队对这个主要大版本进行维护开始,web开发者社区便一直在期待着这一刻的到来,终于在2016年6月他们迎来了这一个最终板 ...

  5. 剑指Offer-平衡二叉树

    package Tree; /** * 平衡二叉树 * 输入一棵二叉树,判断该二叉树是否是平衡二叉树. * 平衡二叉树(Balanced Binary Tree)又被称为AVL树(有别于AVL算法), ...

  6. python作业02

    1.请用代码实现:利用下划线将列表的每一个元素拼接成字符串,li＝['alex', 'eric', 'rain'] li = ['alex', 'eric', 'rain'] v = "_& ...

  7. 关于Maven的配置与学习

    1. 简介 官方说法:Apache Maven is a software project management and comprehension tool. Based on the concep ...

  8. 选择排序—堆排序（Heap Sort） 没看明白，不解释

    堆排序是一种树形选择排序,是对直接选择排序的有效改进. 基本思想: 堆的定义如下:具有n个元素的序列(k1,k2,...,kn),当且仅当满足 时称之为堆.由堆的定义可以看出,堆顶元素(即第一个元素) ...

  9. Redis学习笔记（三）常用命令整理

    Redis 常用命令 1.DEL key 删除key2.EXISTS key 检查key是否存在3.KEYS * 查看所有的key4.EXPIRE key seconds 设置key的过期时间5.TT ...

  10. APP专业的开发公司都有这样一套开发流程，强烈建议收藏！

    下面让我们来剖析到底是如何开发App的呢? 1.App界面设计开发: 通过客户提出需求,需要头脑风暴得出合适的方案和设计理念; 确认页面风格,确定整个界面的布局.关键截面的设计.文字.及其他的设计 G ...