效果如图：用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. c++ 指针总结 函数参数指针调用和堆栈内存的分配原理

    c++中的char指针 这个char指针很有意思,char指针通常有两种初始化形式.一个是使用char数组初始化,一个是使用char变量初始化. c++当中使用双引号括起来的字符串起始已经被编译器初始 ...

  2. jemeter 实现接口自动化回归测试

    jemeter做接口自动化测试的优点: 1.首先我认为最重要的是不需要编程基础,很多一直想做接口测试但一直徘徊在门边的原因可能就是不想写代码 2.可以更快的上手,能让测试人员更好的理解什么是接口测试, ...

  3. shell中的数字

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

  4. AVL树(Java实现)

    AVL树基本介绍 AVL树是一种自平衡的二叉查找树,在AVL树中任何节点的两个子树的高度差不能超过1.就是相当于在二叉搜索树的基础上,在插入和删除时进行了平衡处理. 不平衡的四种情况 LL:结构介绍 ...

  5. Python 中的登陆获取数据跳转页面(不含数据库)

    简单表单和模板: import os.path import tornado.httpserver import tornado.ioloop import tornado.options impor ...

  6. 关于VS2017+Qt5.6.3(msvc2015_64)联合编程Qt project settings界面没有ok，cancel选项的问题

    如题,我在项目开发的过程中,需要添加数据库模块SQL,然后发现VS上QT project settings选项中不能修改添加的模块,也就是对应QT creator中的在.pro文件中添加一句:QT + ...

  7. Java集合：HashMap源码剖析

    一.HashMap概述 HashMap基于哈希表的 Map 接口的实现.此实现提供所有可选的映射操作,并允许使用 null 值和 null 键.(除了不同步和允许使用 null 之外,HashMap  ...

  8. wipefs进程

    wipefs进程是啥,占用了百分之90多的cpu wipefs进程是啥,占用了百分之90多的cpu,把这个进程干掉了,过了一天又自动启动了,很多朋友应该遇到过类似的问题. wipefs是linux自带 ...

  9. echarts地图的引用

    最近是跟echarts杠上了 所在公司是搞数据的 所以身为前端的我 就必须使用echarts将数据展示出来 ,进公司一周 ,前前后后大概用了八九种echarts图,我举得最难的就是引用的地图,因为刚开 ...

  10. http的CA证书安装（也就是https）

    近几年随着安全意识的提高,https流行起来,很多小伙伴不太了解https是什么,其实http和https并没有区别,简单的来说,https就是将http通信进行了加密和解密的一个过程.加上谷歌浏览器 ...