您现在的位置：首页 >> 前端 >> 内容

CSS实现系统登录界面（二）

时间：2016/8/20 9:32:31 点击：

　　核心提示：登录完成之后是跳转到欢迎界面。比较常见的管理系统的欢迎界面分为导航栏区、左下侧的菜单栏区和右下侧的窗口区。1.导航栏的颜色 通过 navbar navbar-inverse 实现颜色反转。2.导航栏的...
登录完成之后是跳转到欢迎界面。比较常见的管理系统的欢迎界面分为导航栏区、左下侧的菜单栏区和右下侧的窗口区。

1.导航栏的颜色 通过 navbar navbar-inverse 实现颜色反转。

2.导航栏的文本 通过 navbar-text 实现纯文本的显示。

3.导航栏的文本 通过

<p 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>
 
 
<p class="row clearfix">
    <p class="col-md-12 column">
        <!-- Top Part -->
        <nav class="navbar navbar-inverse" role="navigation">
            <p 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>
            </p>
            <p 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="pider">
                            </li>
                            <li>
                                <a href="#">DB 子模块 DBA</a>
                            </li>
                            <li class="pider">
                            </li>
                            <li>
                                <a href="#">DBA 子模块 DBAA</a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left" role="search">
                    <p class="form-group">
                        <input class="form-control" type="text"/>
                    </p>
                    <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="pider">
                            </li>
                            <li>
                                <a href="#"> 个人中心 </a>
                            </li>
                            <li>
                                <a href="#"> 退出</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </p>
        </nav>
        <!-- Welcome Part -->
        <p class="container">
            <p class="row clearfix">
                <center>
                    <h2 >
                        欢迎使用 **** 系统
                    </h2>
                </center>
            </p>
            <hr>
            <!-- Left Part -->
            <p class="row clearfix">
                <p class="col-md-3 column">
                    <p class="panel-group" id="Fir">
                        <p class="panel panel-default">
                            <p class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#Fir"
                                       href="#FirA">
                                        一级菜单 A
                                    </a>
                                </h4>
                            </p>
                            <p id="FirA" class="panel-collapse collapse in">
                                <p class="panel-body">
                                    <p class="panel-group" id="FirSec">
                                        <p class="panel panel-default">
                                            <p class="panel-heading">
                                                <h4 class="panel-title">
                                                    <a data-toggle="collapse" data-parent="#FirSec"
                                                       href="#SecAA">
                                                        二级菜单 AA
                                                    </a>
                                                </h4>
                                            </p>
                                            <p 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>
                                                <!--<p class="panel-body">-->
                                                    <!--<p class="panel-group" id="FirThr">-->
                                                    <!--<p class="panel panel-default">-->
                                                        <!--<p class="panel-heading">-->
                                                            <!--<h4 class="panel-title">-->
                                                                <!--<a data-toggle="collapse" data-parent="#SecAA"-->
                                                                   <!--href="#">-->
                                                                    <!--三级菜单 AAA-->
                                                                <!--</a>-->
                                                            <!--</h4>-->
                                                        <!--</p>-->
                                                    <!--</p>-->
                                                    <!--<p class="panel panel-success">-->
                                                        <!--<p class="panel-heading">-->
                                                            <!--<h4 class="panel-title">-->
                                                                <!--<a data-toggle="collapse" data-parent="#SecAA"-->
                                                                   <!--href="#">-->
                                                                    <!--三级菜单 AAB-->
                                                                <!--</a>-->
                                                            <!--</h4>-->
                                                        <!--</p>-->
                                                    <!--</p>-->
                                                    <!--<p class="panel panel-info">-->
                                                        <!--<p class="panel-heading">-->
                                                            <!--<h4 class="panel-title">-->
                                                                <!--<a data-toggle="collapse" data-parent="#SecAA"-->
                                                                   <!--href="#">-->
                                                                    <!--三级菜单 AAC-->
                                                                <!--</a>-->
                                                            <!--</h4>-->
                                                        <!--</p>-->
                                                    <!--</p>-->
                                                    <!--<p class="panel panel-warning">-->
                                                        <!--<p class="panel-heading">-->
                                                            <!--<h4 class="panel-title">-->
                                                                <!--<a data-toggle="collapse" data-parent="#accordion"-->
                                                                   <!--href="#collapseFour">-->
                                                                    <!--点击我进行展开，再次点击我进行折叠。第 4 部分--options 方法-->
                                                                <!--</a>-->
                                                            <!--</h4>-->
                                                        <!--</p>-->
                                                        <!--<p id="collapseFour" class="panel-collapse collapse">-->
                                                            <!--<p class="panel-body">-->
                                                                <!--Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred-->
                                                                <!--nesciunt sapiente ea proident. Ad vegan excepteur butcher vice-->
                                                                <!--lomo.-->
                                                            <!--</p>-->
                                                        <!--</p>-->
                                                    <!--</p>-->
                                                <!--</p>-->
                                                <!--</p>-->
                                            </p>
                                        </p>
                                        <p class="panel panel-success">
                                            <p class="panel-heading">
                                                <h4 class="panel-title">
                                                    <a data-toggle="collapse" data-parent="#FirSec"
                                                       href="#SecAB">
                                                        二级菜单 AB
                                                    </a>
                                                </h4>
                                            </p>
                                            <p id="SecAB" class="panel-collapse collapse">
                                                <p class="panel-body">
                                                    <a> 三级菜单 ABA </a>
                                                </p>
                                            </p>
                                        </p>
                                        <p class="panel panel-info">
                                            <p class="panel-heading">
                                                <h4 class="panel-title">
                                                    <a data-toggle="collapse" data-parent="#FirSec"
                                                       href="#SecAC">
                                                        二级菜单 AC
                                                    </a>
                                                </h4>
                                            </p>
                                        </p>
                                        <p class="panel panel-warning">
                                            <p class="panel-heading">
                                                <h4 class="panel-title">
                                                    <a data-toggle="collapse" data-parent="#FirSec"
                                                       href="#collapseFour">
                                                        二级菜单 AD
                                                    </a>
                                                </h4>
                                            </p>
                                        </p>
                                    </p>
                                </p>
                            </p>
                        </p>
                        <p class="panel panel-success">
                            <p class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#Fir"
                                       href="#FirB">
                                        一级菜单 B
                                    </a>
                                </h4>
                            </p>
                            <p id="FirB" class="panel-collapse collapse">
                                <p class="panel-body">
                                    二级菜单 BA
                                </p>
                            </p>
                        </p>
                        <p class="panel panel-info">
                            <p class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#Fir"
                                       href="#FirC">
                                        一级菜单 C
                                    </a>
                                </h4>
                            </p>
                            <p id="FirC" class="panel-collapse collapse">
                                <p class="panel-body">
                                   二级菜单 CA
                                </p>
                            </p>
                        </p>
                        <p class="panel panel-warning">
                            <p class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#Fir"
                                       href="#FirD">
                                        一级菜单 D
                                    </a>
                                </h4>
                            </p>
                            <p id="FirD" class="panel-collapse collapse">
                                <p class="panel-body">
                                    二级菜单 DA
                                </p>
                            </p>
                        </p>
                    </p>
 
                    <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>
                </p>
                <!-- Right Part -->
                <p class="col-md-9 column">
                    <p 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>
                        <p class="tab-content">
                            <p class="tab-pane" id="page01">
                                <br>
                                <center>
                                    <p>
                                        This *** First *** Page <br>
                                        This *** First *** Page <br>
                                        This *** First *** Page <br>
                                    </p>
                                </center>
                            </p>
                            <p class="tab-pane" id="page02">
                                <p>
                                    This Second Page
                                </p>
                            </p>
                            <p class="tab-pane" id="page03">
                                <p>
                                    This Thrid Page
                                </p>
                            </p>
                            <p class="tab-pane" id="page04">
                                <p>
                                    This Fourth Page
                                </p>
                            </p>
                        </p>
                    </p>
                </p>
            </p>
        </p>
    </p>
</p>
<hr>
<p id="footer">
    <center>
        <p>Copyright © 2005-2015 ****.CN All Rights Reserved **** 互联网中心<br/>隐私权政策  京ICP证 ***** 号</p>
    </center>
</p>
<br>
</body>
</html>
 
<!-- ***************************************************************************************************************************************************** -->
<!--尝试 dropdown-toggle、list-group 不太合适 -->
<!-- ***************************************************************************************************************************************************** -->
<!--<nav class="navbar navbar-default" role="navigation">-->
<!--<p 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>-->
<!--</p>-->
<!--<p 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="pider"></li>-->
<!--<li><a href="#">分离的链接</a></li>-->
<!--<li class="pider"></li>-->
<!--<li><a href="#">另一个分离的链接</a></li>-->
<!--</ul>-->
<!--</li>-->
<!--</ul>-->
<!--</p>-->
<!--</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>-->

Tags:CS SS S实 实现 
作者：网络　来源：不详
  • 上一篇：前端性能优化总结
  • 下一篇：WEB性能权威指南学习笔记Item03

    • 您可能感兴趣的文章

    相关评论

    发表我的评论

    • 大名：
    • 内容：