CSS 实现 系统登录界面 （二）
来源：互联网 发布：淘宝冲销量网站 编辑：程序博客网 时间：2024/06/05 09:03
登录完成之后是跳转到欢迎界面。比较常见的管理系统的欢迎界面分为导航栏区、左下侧的菜单栏区和右下侧的窗口区。
1.导航栏的颜色 通过 navbar navbar-inverse 实现颜色反转。
2.导航栏的文本 通过 navbar-text 实现纯文本的显示。
3.导航栏的文本 通过
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
实现 li 标签项的横向显示。
4.各级菜单在折叠显示的展现方式下，同级菜单不可同时展开。通常采用jQuery语句实现页面的初始化和折叠框的可同步显示。
5.实现隐线的效果通常采用 hr 标签即可。
1.导航栏的颜色 通过 navbar navbar-inverse 实现颜色反转。
2.导航栏的文本 通过 navbar-text 实现纯文本的显示。
3.导航栏的文本 通过
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
实现 li 标签项的横向显示。
4.各级菜单在折叠显示的展现方式下，同级菜单不可同时展开。通常采用jQuery语句实现页面的初始化和折叠框的可同步显示。
5.实现隐线的效果通常采用 hr 标签即可。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>LoginSuccess</title> <link href="bootstrap.min.css" rel="stylesheet"> <script src="jquery.min.js"></script> <script src="bootstrap.min.js"></script></head><body><div class="row clearfix"> <div class="col-md-12 column"> <!-- Top Part --> <nav class="navbar navbar-inverse" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <img class="navbar-brand" href="#">Brand</img> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"> <h4 class="navbar-text"> 导 航 栏 </h4> </li> <li class="active"> <a href="#">常用网址 A </a> </li> <li class="active"> <a href="#">常用网址 B </a> </li> <li class="active"> <a href="#">常用网址 C </a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">常用网址 D<strong class="caret"></strong></a> <ul class="dropdown-menu"> <li> <a href="#">D 子模块 A</a> </li> <li> <a href="#">D 子模块 B</a> </li> <li class="divider"> </li> <li> <a href="#">DB 子模块 DBA</a> </li> <li class="divider"> </li> <li> <a href="#">DBA 子模块 DBAA</a> </li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input class="form-control" type="text"/> </div> <button type="submit" class="btn btn-primary">宜信搜索</button> </form> <ul class="nav navbar-nav navbar-right"> <!--Star Logo Fail Adding--> <!--<li>--> <!--<button type="button" class="btn btn-default btn-lg">--> <!--<span class="glyphicon glyphicon-star"></span> Star--> <!--</button>--> <!--</li>--> <li> <p class="navbar-text navbar-right">欢迎您,</p> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">UserName<strong class="caret"></strong></a> <ul class="dropdown-menu"> <li> <a href="#">常用功能 A</a> </li> <li> <a href="#">常用功能 B</a> </li> <li class="divider"> </li> <li> <a href="#"> 个人中心 </a> </li> <li> <a href="#"> 退出</a> </li> </ul> </li> </ul> </div> </nav> <!-- Welcome Part --> <div class="container"> <div class="row clearfix"> <center> <h2 > 欢迎使用 **** 系统 </h2> </center> </div> <hr> <!-- Left Part --> <div class="row clearfix"> <div class="col-md-3 column"> <div class="panel-group" id="Fir"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#Fir" href="#FirA"> 一级菜单 A </a> </h4> </div> <div id="FirA" class="panel-collapse collapse in"> <div class="panel-body"> <div class="panel-group" id="FirSec"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#FirSec" href="#SecAA"> 二级菜单 AA </a> </h4> </div> <div id="SecAA" class="panel-collapse collapse in"> <ul class="list-group"> <li class="list-group-item"> <a>三级菜单 AAA </a></li> <li class="list-group-item"> <a>三级菜单 AAA </a></li> <li class="list-group-item"> <a>三级菜单 AAA </a></li> </ul> <!--<div class="panel-body">--> <!--<div class="panel-group" id="FirThr">--> <!--<div class="panel panel-default">--> <!--<div class="panel-heading">--> <!--<h4 class="panel-title">--> <!--<a data-toggle="collapse" data-parent="#SecAA"--> <!--href="#">--> <!--三级菜单 AAA--> <!--</a>--> <!--</h4>--> <!--</div>--> <!--</div>--> <!--<div class="panel panel-success">--> <!--<div class="panel-heading">--> <!--<h4 class="panel-title">--> <!--<a data-toggle="collapse" data-parent="#SecAA"--> <!--href="#">--> <!--三级菜单 AAB--> <!--</a>--> <!--</h4>--> <!--</div>--> <!--</div>--> <!--<div class="panel panel-info">--> <!--<div class="panel-heading">--> <!--<h4 class="panel-title">--> <!--<a data-toggle="collapse" data-parent="#SecAA"--> <!--href="#">--> <!--三级菜单 AAC--> <!--</a>--> <!--</h4>--> <!--</div>--> <!--</div>--> <!--<div class="panel panel-warning">--> <!--<div class="panel-heading">--> <!--<h4 class="panel-title">--> <!--<a data-toggle="collapse" data-parent="#accordion"--> <!--href="#collapseFour">--> <!--点击我进行展开，再次点击我进行折叠。第 4 部分--options 方法--> <!--</a>--> <!--</h4>--> <!--</div>--> <!--<div id="collapseFour" class="panel-collapse collapse">--> <!--<div class="panel-body">--> <!--Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred--> <!--nesciunt sapiente ea proident. Ad vegan excepteur butcher vice--> <!--lomo.--> <!--</div>--> <!--</div>--> <!--</div>--> <!--</div>--> <!--</div>--> </div> </div> <div class="panel panel-success"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#FirSec" href="#SecAB"> 二级菜单 AB </a> </h4> </div> <div id="SecAB" class="panel-collapse collapse"> <div class="panel-body"> <a> 三级菜单 ABA </a> </div> </div> </div> <div class="panel panel-info"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#FirSec" href="#SecAC"> 二级菜单 AC </a> </h4> </div> </div> <div class="panel panel-warning"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#FirSec" href="#collapseFour"> 二级菜单 AD </a> </h4> </div> </div> </div> </div> </div> </div> <div class="panel panel-success"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#Fir" href="#FirB"> 一级菜单 B </a> </h4> </div> <div id="FirB" class="panel-collapse collapse"> <div class="panel-body"> 二级菜单 BA </div> </div> </div> <div class="panel panel-info"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#Fir" href="#FirC"> 一级菜单 C </a> </h4> </div> <div id="FirC" class="panel-collapse collapse"> <div class="panel-body"> 二级菜单 CA </div> </div> </div> <div class="panel panel-warning"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#Fir" href="#FirD"> 一级菜单 D </a> </h4> </div> <div id="FirD" class="panel-collapse collapse"> <div class="panel-body"> 二级菜单 DA </div> </div> </div> </div> <script type="text/javascript"> $(function () { $('#FirA').collapse('show')}); $(function () { $('#FirB').collapse({ toggle: false })}); $(function () { $('#FirC').collapse({ toggle: false })}); $(function () { $('#FirD').collapse({ toggle: false })});// $(function () { $('#SecAA').collapse('hide')}); </script> </div> <!-- Right Part --> <div class="col-md-9 column"> <div class="tabbable" id="PagePart"> <ul class="nav nav-tabs"> <li> <a href="#page01" data-toggle="tab">Page 001</a> </li> <li class="active"> <a href="#page02" data-toggle="tab">Page 002</a> </li> <li> <a href="#page03" data-toggle="tab">Page 003</a> </li> <li class="active"> <a href="#page04" data-toggle="tab">Page 004</a> </li> </ul> <div class="tab-content"> <div class="tab-pane" id="page01"> <br> <center> <p> This *** First *** Page <br> This *** First *** Page <br> This *** First *** Page <br> </p> </center> </div> <div class="tab-pane" id="page02"> <p> This Second Page </p> </div> <div class="tab-pane" id="page03"> <p> This Thrid Page </p> </div> <div class="tab-pane" id="page04"> <p> This Fourth Page </p> </div> </div> </div> </div> </div> </div> </div></div><hr><div id="footer"> <center> <p>Copyright © 2005-2015 ****.CN All Rights Reserved **** 互联网中心<br/>隐私权政策 京ICP证 ***** 号</p> </center></div><br></body></html><!-- ***************************************************************************************************************************************************** --><!--尝试 dropdown-toggle、list-group 不太合适 --><!-- ***************************************************************************************************************************************************** --><!--<nav class="navbar navbar-default" role="navigation">--><!--<div class="navbar-header">--><!--<button type="button" class="navbar-toggle" data-toggle="collapse"--><!--data-target="#example-navbar-collapse">--><!--<span class="sr-only">切换导航</span>--><!--<span class="icon-bar"></span>--><!--<span class="icon-bar"></span>--><!--<span class="icon-bar"></span>--><!--</button>--><!--</div>--><!--<div class="collapse navbar-collapse" id="example-navbar-collapse">--><!--<ul class="nav navbar-nav">--><!--<li class="dropdown">--><!--<a href="#" class="dropdown-toggle" data-toggle="dropdown">--><!--Java <b class="caret"></b>--><!--</a>--><!--<ul class="dropdown-menu">--><!--<li><a href="#">jmeter</a></li>--><!--<li><a href="#">EJB</a></li>--><!--<li><a href="#">Jasper Report</a></li>--><!--<li class="divider"></li>--><!--<li><a href="#">分离的链接</a></li>--><!--<li class="divider"></li>--><!--<li><a href="#">另一个分离的链接</a></li>--><!--</ul>--><!--</li>--><!--</ul>--><!--</div>--><!--</nav>--><!-- ***************************************************************************************************************************************************** --><!--<ul class="list-group">--><!--<li class="list-group-item">免费域名注册</li>--><!--<li class="list-group-item">免费 Window 空间托管</li>--><!--<li class="list-group-item">图像的数量</li>--><!--<li class="list-group-item">--><!--<span class="badge">新</span>--><!--24*7 支持--><!--</li>--><!--<li class="list-group-item">每年更新成本</li>--><!--<li class="list-group-item">--><!--<span class="badge">▽</span>--><!--折扣优惠--><!--</li>--><!--</ul>--><!-- ***************************************************************************************************************************************************** --><!-- 分页 --><!--<ul class="pagination">--><!--<li>--><!--<a href="#">Prev</a>--><!--</li>--><!--<li>--><!--<a href="#">1</a>--><!--</li>--><!--<li>--><!--<a href="#">2</a>--><!--</li>--><!--<li>--><!--<a href="#">3</a>--><!--</li>--><!--<li>--><!--<a href="#">4</a>--><!--</li>--><!--<li>--><!--<a href="#">5</a>--><!--</li>--><!--<li>--><!--<a href="#">Next</a>--><!--</li>--><!--</ul>--> 0 0
- CSS 实现 系统登录界面 （二）
- CSS 实现 系统登录界面 （一）
- html+css实现登录界面
- Android客户端之“微服私访”App的系统学习（二）TextInputLayout实现登录界面和LitePal初始化本地数据库
- Android实现登录系统（二）--SMS短信验证登录
- 图书管理系统之登录界面实现
- 系统登录界面代码实现--Java
- #学习笔记#(3)会员管理系统登录界面HTML+CSS
- css和js实现弹出登录居中界面
- Qt之QQ登录界面（二）
- SpringMVC之安全性（二）登录界面
- 系统登录界面
- Srtuts2实现登录界面（不连接数据库）报错（二）
- Qt（二）--- 使用Qt完成QQ登录界面的输入文本框的实现
- 客运综合管理系统项目—登录界面的实现
- 【电信计费系统项目实战】基础篇---登录界面实现
- 【电信计费系统项目实战】基础篇---登录界面实现
- 用CSS制作登录界面
- 如何使用Qt插件在Qt中进行ROS开发
- install yii2 for php 5.4 on CentOS 7
- 【stm32f103-学习笔记】测试看门狗
- 二次指数平滑法求预测值的Java代码
- 第一篇博客
- CSS 实现 系统登录界面 （二）
- CodeChef COT5 线段树
- Leetcode-combinations
- 过拟合的原因＋处理方法
- 统计
- 最少拦截系统 hd 1257
- 【NOIP2016提高A组8.11】自然数
- 虚拟机中 共享网络， 桥接网络，NAT，host-only 几种网络连接方式
- 理解DOM事件流的三个阶段
