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

一、修改样式

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

       #from

        {

            background-color: #96b97d;

        }

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

        body

        {

            background-color: #96b97d;

        }

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

body {

    background:url(../img/login_bg_0.jpg) #f8f6e9;

}

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <meta charset="utf-8" />

    <title>用户登录</title>

    <link rel="stylesheet" href="css/style.css" />

    <script src="js/bootstrap.min.js"></script>

    <link href="../css/bootstrap.css" rel="stylesheet" type="text/css" />

    <script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script>

    <style>

        #from

        {

            background-color: #96b97d;

        }

        .mycenter

        {

            margin-top: 100px;

            margin-left: auto;

            margin-right: auto;

            height: 350px;

            width: 500px;

            padding: %;

            padding-left: %;

            padding-right: %;

        }

        .mycenter mysign

        {

            width: 440px;

        }

        .mycenter input, checkbox, button

        {

            margin-top: %;

            margin-left: %;

            margin-right: %;

        }

        .mycheckbox

        {

            margin-top: 10px;

            margin-left: 40px;

            margin-bottom: 10px;

            height: 10px;

        }

    </style>

    <script type="text/javascript">

        $(function () {

            $('#btn').click(function (e) {

                window.location.href = "main.aspx";

            });

        });

    </script>

</head>

<body>

    <form id="from">

    <div class="mycenter">

        <div class="mysign">

            <div class="col-lg-11 text-center text-info">

                <h2>

                    请登录</h2>

            </div>

            <div class="col-lg-10">

                <input type="text" class="form-control" name="username" placeholder="请输入账户名" required

                    autofocus />

            </div>

            <div class="col-lg-10">

            </div>

            <div class="col-lg-10">

                <input type="password" class="form-control" name="password" placeholder="请输入密码" required

                    autofocus />

            </div>

            <div class="col-lg-10">

            </div>

            <div class="col-lg-10 mycheckbox checkbox">

                <input type="checkbox" class="col-lg-1">记住密码</input>

            </div>

            <div class="col-lg-10">

            </div>

            <div class="col-lg-10">

                <button type="button" id="btn" class="btn btn-success col-lg-12">

                    登录</button>

            </div>

        </div>

    </div>

    </form>

</body>

</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. BZOJ1565 植物大战僵尸 题解

    题目内容: 题目分析:有选A则必须选B这样的限制条件,可以发现这是最大权闭合子图模型,考虑环的情况,可以推测需要拓扑判环. 代码: #include<bits/stdc++.h> usin ...

  2. 深入理解Java虚拟机到底是什么

    摘自:http://blog.csdn.net/zhangjg_blog/article/details/20380971 什么是Java虚拟机 我们都知道Java程序必须在虚拟机上运行.那么虚拟机到 ...

  3. ASP.NET部分代码示例

    using System; using System.Collections.Generic; using Model; using System.Data; using System.Data.Sq ...

  4. shell中的数字

    shell中的数字 author :headsen chen date :2017-10-18  15:01:42 个人原创,转载请注明作者,出处,否则依法追究法律责任 1,生成随机数(范围:0-32 ...

  5. pyenv 安装

    sudo yum install openssl*     git clone https://github.com/yyuu/pyenv.git ~/.pyenv      echo 'export ...

  6. Django基础(二)：环境配置

    前戏 WEB框架简介 具体介绍Django之前,必须先介绍WEB框架等概念. web框架: 别人已经设定好的一个web网站模板,你学习它的规则,然后“填空”或“修改”成你自己需要的样子. 一般web框 ...

  7. Centos虚拟机克隆模板

    Centos6模板 IPTABLES/SELINUX # iptalbes -F # service iptables save 或 # /etc/init.d/iptables stop # chk ...

  8. 求第k小的元素

    用快排解决: 用快排,一趟排序后,根据基准值来缩小问题规模.基准值的下角标i 加1 表示了基准值在数组中第几小.如果k<i+1,那就在左半边找:如果k>i+1那就在右半边找.当基准值的下角 ...

  9. Javscript的函数链式调用基础篇

    我们都很熟悉jQuery了,只能jQuery中一种非常牛逼的写法叫链式操作: $('#div').css('background','#ccc').removeClass('box').stop(). ...

  10. 数据库 --> 8种NoSQL数据库对比

    8 种 NoSQL 数据库对比 NoSQL是一项全新的数据库革命性运动,NoSQL的拥护者们提倡运用非关系型的数据存储.现今的计算机体系结构在数据存储方面要求具备庞大的水平扩展性,而NoSQL致力于改 ...