bootstrap 一个简单的登陆页面
效果如图:用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 一个简单的登陆页面的更多相关文章
- tkinter做一个简单的登陆页面
做一个简单的登陆页面 import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya.geometry("900x3 ...
- tkinter做一个简单的登陆页面(十六)
做一个简单的登陆页面 import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya.geometry("900x3 ...
- vue-cli3和element做一个简单的登陆页面
1.先用vue-cli3创建一个项目 2.安装element模块 全局安装 npm i element-ui -S 3在main.js引入模块 import ElementUI from 'eleme ...
- 使用QT实现一个简单的登陆对话框(纯代码实现C++)
使用QT实现一个简单的登陆对话框(纯代码实现C++) 效果展示 使用的QT控件 控件 描述 QLable 标签 QLineEdit 行文本框 QPushButton 按扭 QHBoxLayout 水平 ...
- django写一个简单的登陆注册
要写这个,前提还是需要知道三个知识: 一个是urls.py,它是写我们的路由关系的,之前我写了通过wsgiref写一个简单的服务端,也用到了路由,就是 请求过来的url和视图函数的对应关系. 二是就是 ...
- ASP.NET Aries 入门开发教程2:配置出一个简单的列表页面
前言: 朋友们都期待我稳定地工作,但创业公司若要躺下,也非意念可控. 若人生注定了风雨飘摇,那就雨中前行了. 最机开始看聊新的工作机会,欢迎推荐,创业公司也可! 同时,趁着自由时间,抓紧把这系列教程给 ...
- android示例:一个简单的登陆程序
最近写了个简单的登陆程序,有几点收获: 1.懂得如何在LinearLayout中嵌套LinearLayout,完善布局的行列: 2.用android:layout_weight控制控件的比重: 3.用 ...
- 用Html写一个简单的登陆界面
<!DOCTYPE html> <html> <title>登陆页面</title> <head> <meta charset=&qu ...
- 用jQuery Mobile搭建一个简单的手机页面
1.新增html页面. 2.声明html5Document. 3.载入jQuery Mobile Css.jQuery与jQuery Mobile链接库. 4.使用jQuery Mobile定义的ht ...
随机推荐
- 利用XAMPP本地搭建WordPress博客
现在越来越多的人利用WordPress搭建了自己的博客网站,我也是一样,但是还有一些人不知道怎么搭建WordPress网站的方法,因为怕弄 不好,所以也就没有花钱去做,所以这里我就讲讲怎么样利用XAM ...
- Pandas与Matplotlib基础
pandas是Python中开源的,高性能的用于数据分析的库.其中包含了很多可用的数据结构及功能,各种结构支持相互转换,并且支持读取.保存数据.结合matplotlib库,可以将数据已图表的形式可视化 ...
- 写了个批量查询qs的软件
因为需要,自己写了个批量查询qs的小软件.从网站中抓出需要的数据,格式化显示: 对字符串进行检测处理,先用Replace函数去掉字符串的空格,再用正则表达式匹配,返回匹配的字符串,如果没有匹配,则返回 ...
- python全栈开发-Day7 字符编码总结
python全栈开发-Day7 字符编码总结 一.字符编码总结 1.什么是字符编码 人类的字符--------->翻译--------->数字 翻译的过程遵循的标准即字符编码(就是一个字符 ...
- java报错排解
1.eclipse新安装第一次启动报错: Javawas started but returned exit code=13-- 这是由于JDK和eclipse和电脑的位数不一致所致,要么都为32位, ...
- javascript数组Array强大的splice()方法
javascript的Array数组提供了强大的splice()方法, 用于对数组元素的增删改 1.删除-用于删除元素,两个参数,第一个参数(要删除第一项的位置),第二个参数(要删除的项数) 删除: ...
- JQ 判断 浏览器打开的设备类型
<script> $(document).ready(function(){ var ua = navigator.userAgent; var ipad = ua.match(/(iPa ...
- 【基础】这15种CSS居中的方式,你都用过哪几种?
简言 CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是 ...
- linux下安装Sublime Text3并将它的快捷方式放进启动器中
Sublime Text是一个代码编辑器,我主要是用它来编辑python.下面就来简单说明下它在linux的安装过程吧! 1.添加sublime text3的仓库 首先按下快捷键ctrl+alt+t打 ...
- sql模糊查询效率
在数据库量比较大的时候通常有一些查询,例如查询文本类型的数据,存储量大,用like进行模糊查询效率实在太低 select * from stdcontent where content like ' ...