zoukankan      html  css  js  c++  java
  • 简单的css 菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <style>
    .sub-nav{
        position: relative;
        border-bottom: 1px solid #E3E6EA;
        height:42px;
        font-family:"Microsoft YaHei", simsun;    
    }

    .sub-nav ul{
        padding:14px 0px 0px 25px;
    }
    .sub-nav ul li{
        float:left;
        line-height:14px;
        color:#5f727f;
        border-right: 1px solid #dcdde0;
        curson: pointer;
    }
    ul, ol{
        list-style:outside none none;    
    }
    .sub-item-in{
        margin-left:0;
    }
    .sub-nav ul li .sub-item-in{
        padding:0 6px;
        margin: 0 5px;
        position:relative;
        font-size:14px;
    }
    .sub-nav .trans {
        position: absolute;
        height: 3px;
        background: none repeat scroll 0% 0% #5EB5F1;
        overflow: hidden;
        left: 25px;
        bottom: -1px;
        68px;
        font-size: 0px;
        line-height: 0;
    }
    .has-trans {
        transition: all 0.3s ease-out 0s;
    }
    </style>

    </head>
    <body>
    <div class="sub-nav">
        <ul>
            <li><span class="sub-item-in" data-spm-click="gostr=/tbtrip;locaid=d101">Guo Nei</span></li>
            <li><span class="sub-item-in" data-spm-click="gostr=/tbtrip;locaid=d102" data-type="iflight">HongKong</span></li>
            <li><span class="sub-item-in" data-spm-click="gostr=/tbtrip;locaid=d103" data-type="flightCheap">Special Price</span></li>
            <li><span class="sub-item-in" data-spm-click="gostr=/tbtrip;locaid=d104" data-type="iflightCheap">International Special Price</span></li>
        </ul>
         <div style="left: 25px; 40px;" class="trans has-trans J_TransBar"></div>
    </div>
    </body>
    </html>

  • 相关阅读:
    GSM和GPRS的区别
    IP规划和VLSM子网划分例题
    20190806-sed面试题
    yum.rpm一点点
    实验:基于http的yum源
    vim编辑二进制文件
    关于find的-perm
    误删tree命令如何恢复
    删除Linux的依赖库并进入救援模式恢复
    第六天、用户、组、权限、grep
  • 原文地址:https://www.cnblogs.com/BenWong/p/4196259.html
Copyright © 2011-2022 走看看