界面组件之导航菜单备案

界面组件一、分页导航菜单

　　

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>分页导航</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .pagination {
                margin: 10px;
                /*取消项目列表*/
                list-style-type: none;
                /*包裹浮动元素*/
                overflow: hidden;
                display: inline-block;
            }
            /*内联元素包裹性*/
            .pagination li {
                display: inline;
            }
            .pagination a {
                /*带有方向的display: inline-block元素*/
                float: left;
                /*消除文本修饰*/
                text-decoration: none;
                padding: .5em;
                border: 1px solid #ddd;
                font-size: 12px;
                color: #428bca;
                line-height: 1.42857143;
                padding: 6px 12px;
            }
            /*非首子元素取消左边框*/
            .pagination li + li a {
                border-left: none;
            }
            /*第一个与最后一个子元素添加圆角效果*/
            .pagination li:first-child a {
                border-top-left-radius: 4px;
                border-bottom-left-radius: 4px;
            }
            .pagination li:last-child a  {
                border-top-right-radius: 4px;
                border-bottom-right-radius: 4px;
            }
            /*鼠标移上效果*/
            .pagination a:hover {
                
            }
             
            /*伪类 prev箭头*/
            .pagination a[rel="prev"]:before {
                content: "\00AB";
                padding-right: .5em;
            }
             /*伪类 next箭头*/
            .pagination a[rel="next"]:after {
                content: "\00BB";
                padding-left: 0.5em;
            }
        </style>
    </head>
    <body>
        <ul class="pagination">
            <li><a href="#" rel="prev">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="#" rel="next">next</a></li>
        </ul>
    </body>
</html>

界面组件二、纵向导航菜单

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>界面组件二、纵向导航菜单</title>
        <style>
            ul.nav {
                margin: 0;
                padding: 0;
                list-style-type: none;
                width: 10em;
                
                border: 1px solid #486B02;
            }
            /*非首子元素*/
            .nav li + li a {
                border-top: 1px solid #E4FFD3;
            }
            .nav a {
                display: block;
                color: #2B3F00;
                text-decoration: none;
                background: url(img/icon.png) no-repeat 5px 50%;
                padding: 0.3em 2em;
            }
            .nav a:hover, .nav a:focus, .nav li.active a {
                color: #3F51B5;
                background: url(img/iconH.png) no-repeat 5px 50%;
            }
        </style>
    </head>
    <body>
        <ul class="nav">
            <li><a href="#">Home</a></li>
            <li class="active"><a href="#">About</a></li>
            <li><a href="#">Our Service</a></li>
            <li><a href="#">Our work</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </body>
</html>
 
界面组件四、三级菜单

<!DOCTYPE html>

<html>
    <head>
    <meta charset="utf-8" />
    <title>界面组件四、三级菜单</title>
        <style>
            body {
                
            }
            /*添加视觉样式*/
            .multi_drop_menu {font:1em helvetica, arial, sans-serif;}
            .multi_drop_menu a {
                /*让链接充满列表项*/
                display:block;
                /*文本颜色*/
                color:#555;
                /*背景颜色*/
                
                /*链接的内边距*/
                padding:.2em 1em;
                /*分隔线宽度*/
                border-width:3px;
                /*可以有颜色，也可以透明*/
                border-color:transparent;
            }
            .multi_drop_menu a:hover {
                /*悬停时文本颜色*/
                color:#fff;
                /*悬停时背景色*/
                
                }
                .multi_drop_menu a:active {
                /*点击时背景变色*/
                background:#fff;
                /*点击时文本变色*/
                color:#ccc;
                }
                /*添加功能样式*/
                .multi_drop_menu * {margin:0; padding:0;}
                /*强制 ul 包围 li*/
                .multi_drop_menu ul {float:left;}
                .multi_drop_menu li {
                /*水平排列菜单项*/
                float:left;
                /*去掉默认的项目符号*/
                list-style-type:none;
                /*为子菜单提供定位上下文*/
                position:relative;
                         }
                         .multi_drop_menu li a {
                /*让链接填充列表项*/
                display:block;
                /*给每个链接添加一个右边框*/
                border-right-style:solid;
                /*背景只出现在内边距区域后面*/
                background-clip:padding-box;
                /*去掉链接的下划线*/
                text-decoration:none;
            }
            .multi_drop_menu li:last-child a {border-right-style:none;}
            /*临时隐藏低级菜单*/
            .multi_drop_menu li ul {display:none;}
             
            /* 添加的视觉样式 */
            /*二级菜单宽度*/
            .multi_drop_menu li ul {width:9em;}
            .multi_drop_menu li li a {
                /*去掉继承的右边框*/
                border-right-style:none;
                /*添加上边框*/
                border-top-style:solid;
            }
            /* 添加的功能样式 */
            .multi_drop_menu li ul {/*临时显示二级下拉菜单*/
                display:block;
                /*相对于父菜单项定位*/
                position:absolute;
                /*左边与父菜单项对齐*/
                left:0;
                /*顶边与父菜单项底边对齐*/
                top:100%;
            }
            .multi_drop_menu li li {
                /*停止浮动，恢复堆叠*/
                float:none;
            }
            .multi_drop_menu li li ul {
                /*继续隐藏三级下拉菜单*/
                display:none;
            }
            .multi_drop_menu li ul {
                /*隐藏二级下拉菜单*/
                display:none;/*相对于父菜单项定位*/
                position:absolute;
                /*左边与父菜单项对齐*/
                left:0;
                /*顶边与父菜单项底边对齐*/
                top:100%;
            }
            .multi_drop_menu li:hover > ul {
                /*父元素悬停时显示*/
                display:block;
            }
            .multi_drop_menu li li ul {
                /*相对于父菜单定位*/
                position:absolute;
                /*与父菜单右侧对齐*/
                left:100%;
                /*与父菜单项顶边对齐*/
                top:0;
            }
            /*顶级垂直菜单宽度*/
            .multi_drop_menu.vertical {width:8em;}
            .multi_drop_menu.vertical li a {
                border-right-style:none;
                border-top-style:solid;
            }
            .multi_drop_menu.vertical li li a {border-left-style:solid;}
            .multi_drop_menu.vertical ul,
            .multi_drop_menu.vertical li {
                /*让顶级菜单垂直显示*/
                float:none;
            }
            .multi_drop_menu.vertical li ul {
                /*子菜单左边与上一级菜单右边对齐*/
                left:100%;
                /*子菜单顶边与上一级菜单项顶边对齐*/
                top:0;
            }
        </style>
    </head>
    <body>
<nav class="multi_drop_menu vertical">
<!-- 一级开始 -->
<ul>
    <li><a href="#">Power</a></li>
    <li><a href="#">Money</a></li>
    <li><a href="#">Love</a></li>
    <li><a href="#">Fame</a>
    <!-- 二级开始 -->
    <ul>
        <li><a href="#">Sports Star</a></li>
        <li><a href="#">Movie Star</a></li>
        <li><a href="#">Rock Star</a>
        <!-- 三级开始 -->
        <ul>
            <li><a href="#">Bruce Springsteen</a></li>
            <li><a href="#">Bono</a></li>
            <li><a href="#">Mick Jagger</a></li>
            <li><a href="#">Bob Dylan</a></li>
        </ul>
        <!-- 三级结束 -->
        </li>
        <li><a href="#">Web Designer</a></li>
    </ul>
    <!-- 二级结束 -->
    </li>
</ul>
<!-- 一级结束 -->
</nav>
    </body>
</html>

 

posted @ 2017-11-15 10:58  蔚京霖  阅读(302)  评论(0)    收藏  举报