效果如图：用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. 在CentOS7中安装.Net Core2.0 SDK

    1.sudo yum install libunwind libicu(安装libicu依赖) 2.curl -sSL -o dotnet.tar.gz https://go.microsoft.co ...

  2. CI框架传递数组到view层问题记录

    给大家分享一下在做页面显示天气预报功能中遇到的问题和解决方法!! 项目开发中,我用的天气预报API是心知天气的免费接口.关于天气预报接口,可用的有很多,看需求怎么要求了!有兴趣的小伙伴可以链接到这个地 ...

  3. maven项目与普通项目的区别

    maven项目 1:创建方式不同 (web项目举例) 第一种: 第二种: 2:目录结构  稍有不同 3:Pom文件 添加依赖信息,需要那个jar包的时候  加入哪个jar包的依赖,要不然无法使用这个j ...

  4. 巧用linux版powershell，管理linux下的docker

    大家好,我把用powershell的docker马甲命令的好处,放在了页面下方,从第五章开始. powershell 传教士 原创文章 始于 2017-09-07 允许转载,但必须保留名字和出处,否则 ...

  5. Spring Boot入门教程1、使用Spring Boot构建第一个Web应用程序

    一.前言 什么是Spring Boot?Spring Boot就是一个让你使用Spring构建应用时减少配置的一个框架.约定优于配置,一定程度上提高了开发效率.https://zhuanlan.zhi ...

  6. [poj3461]Oulipo_KMP

    Oulipo poj-3461 题目大意:给你两个字符串s和p,问s中有多少个等于p的子串. 注释:$1\le strlen(p)\le 10^4\qquad1\le strlen(s)\le 10^ ...

  7. Java 并发编程实践基础 读书笔记： 第一章 JAVA并发编程实践基础

    1.创建线程的方式: /** * StudySjms * <p> * Created by haozb on 2018/2/28. */ public class ThreadDemo e ...

  8. CSS3 box-shadow 属性

    定义和用法box-shadow 属性向框添加一个或多个阴影. 默认值: none继承性: no版本: CSS3JavaScript 语法: object.style.boxShadow="1 ...

  9. android 与 服务器通信

    android 与 服务器通信 服务端代码: (1)control 层 /** * 用户登录 * @return */ @RequestMapping(value = "/login&quo ...

  10. Beta 集合

    Beta冲刺序列: Beta凡事预则立 :Beta No.0 Beta冲刺Day1:Beta No.1 Beta冲刺Day2:Beta No.2 Beta冲刺Day3:Beta No.3 Beta冲刺 ...