效果如图：用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. WordPress设置圆形旋转头像的方法

    很多网站的评论者的头像都是圆形的,并且当你的鼠标移上去的时候会旋转,那么这个怎么实现呢,我在网上找了很多,但是和我的主题都不适用,现在把我修改后的代码贴出来,只要将下面的代码添加到style.css中 ...

  2. jquery ajax 返回的json对象 新增属性值（干货）

    $.ajax({ type:"GEt'; url:"你的地址", data:{"你的字段","字段值"} success:funt ...

  3. java中一个引人深思的匿名内部类

    前两天去面试javaweb问到一个问题,在你的项目中有没有用到线程,我特么的一想,这东西不是在c层面的吗,所以说我不了解线程..... 后来回去想啊想啊,我操这特么的不是再问我事物的控制,消息队列的回 ...

  4. Android proguard (混淆)

    混淆(Proguard)用法 最近项目中遇到一些混淆相关的问题,由于之前对proguard了解不多,所以每次都是面向Stackoverflow的编程.copy别人的答案内心还可以接受,但是copy了之 ...

  5. Python 中列表生成式和生成器

    列表生成式 即List Comprehensions,是Python内置的非常简单却强大的可以用来创建list的生成式. 举个例子,要生成list [1,2,3,4,5,6,7,8,9,10]可以用l ...

  6. 源码实现 --> atoi函数实现

    atoi函数实现 atoi()函数的功能是将一个字符串转换为一个整型数值. 例如“12345”,转换之后的数值为12345,“-0123”转换之后为-123. #include <stdio.h ...

  7. 安装Keras

    在cmd窗口运行代码: pip install keras -U --pre 安装Keras: 进入Python环境,运行import keras,检验是否成功安装.

  8. JSP、Servlet、JDBC学习笔记

    WEB的学习 * 服务器 * 网络的架构(面试题) * C/S client/server 客户端/服务器端 例子:QQ 快播 暴风影音 * 优点:交互性好,服务器压力小. * 缺点:客户端更新了,下 ...

  9. C#基础知识（一）自己总结的。。。

    一.变量的声明 访问修饰符  数据类型  变量名: 访问修饰符:public ,private,protected 变量的访问修饰符默认为private eg: Public  Int a: a=10 ...

  10. Beta No.4

    今天遇到的困难: 百度位置假死的问题研究发现并不是源于代码的问题,而是直接运行在主线程中会出现诸多问题 Fragment碎片刷新时总产生的固定位置的问题未果 今天完成的任务: 陈甘霖:修复了部分Bug ...