案例css导航

原创 2018-12-07 17:07:46 9
摘要:<!DOCTYPE html><!--To change this license header, choose License Headers in Project Properties.To change this template file, choose Tools | Templatesand open the template in the editor.-->

<!DOCTYPE html>

<!--

To change this license header, choose License Headers in Project Properties.

To change this template file, choose Tools | Templates

and open the template in the editor.

-->

<html>

    <head>

        <title>测试页面</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style> 

 

            .index-nav {

                width: 100%;

                border-bottom: 1px solid #eeeeee;

                height: 50px;

                box-sizing: border-box;

                background: white;

            }

            .index-nav-frame {

                width: 100%;

                margin: 0 auto;

            }

            .clearfix:after {

                visibility: hidden;

                display: block;

                font-size: 0;

                content: " ";

                clear: both;

                height: 0;

            }

            .nav-line {

                height: 50px;

                width: 100%;

                position: relative;

                display: none;

                outline: none;

            }

            .nav-small {

                width: 30px;

                height: 30px;

                position: absolute;

                right: 10px;

                top: 10px;

                cursor: pointer;

                display: none;

                outline: none;

            }

            .nav-small-focus {

                position: absolute;

                width: 100%;

                height: 100%;

                display: none;

            }

            

            .index-nav-frame-line {

                color: #333333;

                background: white;

                float: left;

                position: relative;

                display: block;

                outline: none;

                cursor: pointer;

                width: 100px;

                line-height: 50px;

                text-align: center;

                font-weight: 700;

            }

            .index-nav-frame-line.active{color:#b63b4d;}

            .index-nav-frame-line-center{opacity: 0;

                                         height: 0;

                                         position: 

                                             absolute;

                                         overflow:

                                             hidden;width: 100%;

                                         transition: all 0.5s;

                                         -webkit-transition: all 0.5s;

                                         -moz-transition: all 0.5s;/* Firefox 4 */-o-transition: all 0.5s; /* Opera */}

            .index-nav-frame-line-li{width: 100%;

                                     font-weight: 500;

                                     text-align: center;

                                     background: white;

                                     color: #666666;}

            .index-nav-frame-line-li:hover{background: #444359;color: white;}

            .index-nav-frame-line-li:hover a{background: #444359;color: white;}

            .index-nav-frame-line-focus:focus{display: none;}

            .index-nav-frame-line:hover 

            .index-nav-frame-line-center{height:auto;opacity: 1;}










        </style>

    </head>

    <body>

<div class="index-nav">

<div class="index-nav-frame clearfix">

<div class="nav-line">


</div>

<div class="nav-small" tabindex="-1">

<div class="nav-small-focus" tabindex="-1">


</div>

<img src="img/icon.png">

</div>

<div class="index-nav-frame-line active" tabindex="-1">

首页

<div class="index-nav-frame-line-center">

<div class="index-nav-frame-line-li">

首页1

</div>

<div class="index-nav-frame-line-li">

首页2

</div>


</div>

<div class="index-nav-frame-line-focus" tabindex="-1"></div>

</div>

<div class="index-nav-frame-line" tabindex="-1">

第二页面

<div class="index-nav-frame-line-center">

<div class="index-nav-frame-line-li">

第二页面1

</div>


</div>

<div class="index-nav-frame-line-focus" tabindex="-1"></div>

</div>

<div class="index-nav-frame-line" tabindex="-1">

第三页面

<div class="index-nav-frame-line-center">

<div class="index-nav-frame-line-li">

第三页面1

</div>


</div>

<div class="index-nav-frame-line-focus" tabindex="-1"></div>

</div>

<div class="index-nav-frame-line" tabindex="-1">

第四页面

<div class="index-nav-frame-line-center">


<div class="index-nav-frame-line-li">

第四页面1

</div>



</div>

<div class="index-nav-frame-line-focus" tabindex="-1"></div>

</div>

</div>

</div>

    </body>

</html>


批改老师:Peter-Zhu批改时间:2018-12-07 17:17:57
老师总结:你的类名,很有特色, 是不是有点太长了,通常不要超过三个单词的组合,太长,想想是不是可以简化一下,嵌套太深了

发布手记

热门词条