导航条 side-bar

原创 2015年07月09日 11:19:56

html

<div class="sidebar-menu">
        <ul class="main-menu ">
            <li class="active">
                <a href="/student/" target=""><i class="fa fa-home icon-setting"></i>li1</a>
            </li>
            <li class="second-menu" id="second-menu1">
                <a href="javascript:void(0)">
                    <i class="fa fa-info  icon-setting"></i>li2
                    <i class="fa fa-caret-down icon-more"></i>
                </a>
                <ul>
                    <li><a href="#" target=""><i class="fa icon-setting">-</i>li2-1</a></li>
                    <li><a href="/student/change-password/" target=""><i class="fa icon-setting">-</i>li2-</a></li>
                </ul>
            </li>

        </ul>
</div>

CSS

body {
    font-family: "Microsoft YaHei";
    color: black;
    min-width: 1000px;
}

.highlight {
    background: #8ECB8D;
}

.sidebar-menu {
    position: absolute;
    width: 256px;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: #66afe9;
}

.header {
    color: white;
    padding-top: 20px;
    height: 60px;

}

.logo {
    padding-left: 40px;
    float: left;
}

.sidebar-hide {
    padding-right: 40px;
    float: right;
}

.main-menu {
    padding: 0;
    margin-top: 20px;

}

.main-menu ul {
    padding-left: 0;
    list-style-type: none;
}

.main-menu li {
    text-align: center;
    padding: 0;
    margin: 0;
    line-height: 56px;
    list-style-type: none;
    position: relative;
    border-bottom: 1px solid #669ed8;
}

.second-menu ul {
    display: none;
}

.second-menu li {
    line-height: 56px;
    border-bottom: 1px solid #669ed8;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    background-color: #669ed8;
}

li a, .header a {
    color: white;
    width: 256px;
}

li:hover {
    color: blue;
    cursor: pointer;
    text-decoration: none;
    /*font-weight: bold;*/
}

li a:hover i {
    color: blue;
    text-decoration: none;
}

.icon-setting {
    padding-right: 20px;
    text-align: center;
    width: 40px;
    color: white;
}

.icon-more {
    position: absolute;
    right: 10px;
    color: white;
    padding-top: 24px;
}

.main-content {
    margin-left: 286px;
    margin-right: 30px;
    margin-top: 0;
}

.main-show {
    /*width: 100%;*/
    min-height: 540px;
    padding-top: 20px;

}

.form-control {
    border-radius: 0;
}

.btn {
    border-radius: 0;
}

option {
}
.footer {
    position: fixed;
    text-align: center;
    left: 286px;
    right: 0;
    bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    color: gray;
}


效果图如下
这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

HTML5 经量级框架 jQuery Mobile Bar(后退,多按钮,controlgroup,horizontal,导航条定义fixed,全屏模式) - 7.5

1.后退 后退   data-add-back-btn="true" 2.多按钮的footer工具栏             ...

Android自定义控件实现导航条IndicatorView

先上效果图 这个控件其实算是比较轻量级的,相信不少小伙伴都能做出来。因为项目中遇到了一些特殊的定制要求,所以就自己写了一个,这里放出来。 首先来分析下这个控件的功能: 能够响应左右滑动,并...

Bootstrap CSS——导航条

http://v3.bootcss.com/components/#navbar mark

导航条的使用 UINavigationBar

导航条继承与UIView,且通常只是作为多个UINavigationItem的容器,而且他以Stack的形式来管理多个UINavigationItem的控件,这意味着导航条上每次只能看到一个UINav...

各种一级导航条

导航条 /*全局属性*/ *{ margin: 0; padding: 0; font-size: 14px; font-weight: bold; }

购物app学习笔记-tab导航条

Xutils:https://github.com/wyouflf/xUtils xUtils简介 · xUtils 包含了很多实用的android工具。 · xUtils 支持大文件上传,更全...

一个可扩展的下方是导航条,上方是Fragment的UI框架

现在市面上很多下方是导航条,上方是Fragment的App,这样布局的好处是让MainActivity从复杂的逻辑中抽取出来,在Fragment中做切换 实现这种UI效果,可以使用G...

Qt-QML-给我的导航条写一个动画-State-Transition

上篇中,我已经写出一个导航条的,虽然太丑了,不过功能是有了,这次我将要给我的导航条加一个动画,先看下演示效果 这次我是用的是一个状态动画,大致原理就是写出一个空间的几...

Android 导航条效果实现(六) TabLayout+ViewPager+Fragment

TabLayout一、继承结构public class TabLayout extends HorizontalScrollView 二、TabLayout的使用 1、TabLayout简单使用 T...

水平导航条实现总结

首先最终实现的图如下: html代码如下:   Home Blog About Who we are What ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)