CSS 实现 系统登录界面 （二）
2024-06-05 22:18:16
登录完成之后是跳转到欢迎界面。比较常见的管理系统的欢迎界面分为导航栏区、左下侧的菜单栏区和右下侧的窗口区。
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><spanclass="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<strongclass="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<strongclass="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>-->CSS 实现 系统登录界面 （二）相关推荐
- 计算机登录界面怎么切换用户名,win10系统登录界面切换用户的方法
在使用win10系统的时候,许多用户为了方便使用会在电脑中创建多个用户,而在登录界面的时候,会显示某个用户,但是想要切换其他用户的话要怎么操作呢,下面小编就给大家讲解一下win10系统登录界面切换用户 ...
- linux 新用户 界面登录,如何在Linux系统登录界面加入个性化提示信息
如何在Linux系统登录界面加入个性化提示信息 Linux字符界面看久了容易乏味,如果在登录时加点个性化显示看着也比较舒服,下面小编就给大家介绍下如何在Linux系统登录界面加入个性化提示信息,一起来 ...
- win7系统登录界面出现“其他用户” (登录界面显示多个用户)
今天偶尔注销了下系统,突然发现系统登录界面多了一个莫名其妙的"其他用户",头像空白,点击后要求输入用户名和密码,还以为是安装office2013后的微软账户,但输入账户和密码又不对 ...
- DIY高手自制Vista系统登录界面
DIY高手自制Vista系统登录界面 1.下载 ResHacker 2.用 ResHacker 打开 Vista盘符/Windows/System32/p_w_picpathres.dll 文件,点击 ...
- html+css 实现华为登录界面
html+css 实现华为登录界面 直接放代码,是阿腾阿! html css 直接放代码,是阿腾阿! 效果图(同学们请不要完全copy) html <!DOCTYPE html> < ...
- 麒麟系统登录界面开启root用户登录
文章转自:https://blog.csdn.net/qq_33427869/article/details/123639654,全文转发,主要用于后续使用中可快速查阅. 编者目前使用的麒麟4.0.2 ...
- HTML+CSS构建移动登录界面
传统行业的商家十分重视门面的装饰,因为一个好的门面会使用户活跃度变的很高.在一个网站中,可以将用户登录视为"门面",其设计的重要性不言而喻.本项目将带领读者实现一个用户登录页面. ...
- 用HTML和CSS写注册登录界面
一.结果演示 注册界面: 登录界面: 二.主要代码展示 1.HTML部分 1.注册界面 对于注册界面,可以将其划分为三个部分,分别为左边的"新用户注册",中间的主体部分,以及右边的 ...
- 企业网站前端制作实战教程 JQuery CSS JS HTML 登录界面
盒子模型 引入重置css样式reset样式 @charset "utf-8"; html, body, div, span, applet, object, iframe, h1, ...
- 03——驾校科目一考试系统——登录界面
文章目录 需求分析 添加标签 添加输入框 添加按钮 运行项目--初始版本 问题:设计界面和生成大小不同的. 解决方案 运行,成功解决 添加功能--补充背景图 做好准备,添加标签 添加资源 运行项目-- ...
最新文章
- 数据存储方式_寻找要操作数据的存储地址的过程称为寻址，几种寻址的方式分享...
- SQL on Linux Run on Docker
- 问题集锦(43-45)
- ELK+redis搭建nginx日志分析平台
- php7与php 5.5 运行效率比较（实测篇）
- IOS关于键盘的弹出和收起
- #279. [SYZOI Round1] 滑稽♂树（树状数组套主席树）
- 美团Android自动化之旅—生成渠道包
- linux一键搭建ddns,LINUX下搭建DDNS
- setuptools Automatic Script Creation
- 10、Modules - LoadManual
- 【线性代数公开课MIT Linear Algebra】 第八课 Ax=b，我们的核心问题
- fakeroot: preload library `libfakeroot.so' not found, aborting.
- canvas图片合成模糊变清晰的方法
- 阿里云ECS建网站（建站）超详细全套完整图文教程！菜鸟必看！
- 5款优秀的文档管理系统
- python读书心得体会_Python学习心得体会
- 【Redis】Redis相关
- 意出望外的一次相遇｜利楚初探 OceanBase
- 第一数字定律识别数据作假