简单登录页面的制作
说起登录页面,对于刚接触的来说会很麻烦,因为各种布局结构很繁琐,这种情况用框架就能很快的解决了,下面就是简单的运用bootstrap框架做一个简易的登录界面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<title>吧友快乐分享系统</title>
<style type="text/css">
.logbox{
border: 1px solid #ccc;
height: 380px;
margin-top: 170px;
border-radius: 5%;
}
.fm{
margin-top: 50px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<!--标题-->
<div class="navbar-header">
<a href="" class="navbar-brand">吧友快乐分享系统</a>
</div>
<div class="collapse navbar-collapse">
<!--按钮-->
<button class="btn btn-info navbar-btn">设置</button>
<!--登录注册列表-->
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="">登录</a></li>
<li><a href="">注册</a></li>
</ul>
<!--表单-->
<form action="" class="navbar-form navbar-right">
<div class="form-group">
<div class="input-group">
<input type="text" placeholder="输入关键字" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-primary">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</form>
<!--列表-->
<ul class="nav navbar-nav navbar-right">
<li><a href="">我的资源</a></li>
<li><a href="">上传资源</a></li>
<li><a href="">资源列表</a></li>
<li><a href="">用户<span class="caret"></span></a></li>
</ul>
</div>
</div>
</nav>
<div class="container animated bounceInLeft">
<div class="logbox col-md-6 col-md-offset-3">
<h1 class="text-center">吧友快乐分享系统</h1>
<form action="" class="fm">
<div class="form-group col-md-10 col-md-offset-1">
<div class="input-group input-group-lg">
<div class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</div>
<input type="text" class="form-control" placeholder="Username" />
</div>
</div>
<div class="form-group col-md-10 col-md-offset-1">
<div class="input-group input-group-lg">
<div class="input-group-addon">
<span class="glyphicon glyphicon-lock"></span>
</div>
<input type="password" class="form-control" placeholder="Password" />
</div>
</div>
<div class="form-group col-md-10 col-md-offset-1">
<button class="btn btn-primary btn-block btn-lg">登录</button>
</div>
<div class="form-group col-md-10 col-md-offset-1">
<div class="col-md-6">
<input type="checkbox" id="a"/>
<label for="a">记住密码,免登录</label>
</div>
<div class="col-md-6 text-right">
还没有账号?<a href="reg.html">注册</a>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
用框架之后就可以极快的减少我们布局的烦恼,加快敲代码的速度啦。而且可以进行响应式的布局,这样页面缩放不会影响效果
下面是一些表格的常用class
.table基础表格margin-bottom:20px,在thead底部2px的浅灰实线,每个单元格顶部1px的浅灰实线
.table-striped:斑马线表格,隔行有一个浅灰色的背景色
.table-bordered:带边框的表格,所有单元格有1px的边框
.table-hover:鼠标悬停在表格的行上,有高亮的背景色
.table-condensed:将单元格的内距由8px调至5px
.table-responsive:设置类名.table-responsive的容器,将置于这个容器中
表格行的类
谢谢你的阅读!