zoukankan      html  css  js  c++  java
  • [置顶] 漂亮的 tab 样式

     <div id="tabsJ">
                            <ul>
                                <!-- CSS Tabs -->
                                <li onclick="show_it(1)"><a href="moreDisaster.aspx?categoryId=1"><span>地震</span></a></li>
                                <li onclick="show_it(2)"><a href="moreDisaster.aspx?categoryId=3"><span>火灾</span></a></li>
                                <li onclick="show_it(3)"><a href="moreDisaster.aspx?categoryId=8"><span>交通事故</span></a></li>
                                <li onclick="show_it(4)"><a href="moreDisaster.aspx?categoryId=2"><span>水灾</span></a></li>
                                <li onclick="show_it(5)"><a href="moreDisaster.aspx?categoryId=7"><span>虫灾</span></a></li>
                                <li onclick="show_it(5)"><a href="moreDisaster.aspx?categoryId=4"><span>干旱</span></a></li>
                                <li onclick="show_it(5)"><a href="moreDisaster.aspx?categoryId=5"><span>冰雪</span></a></li>
                                <li onclick="show_it(5)"><a href="moreDisaster.aspx?categoryId=6"><span>飓风</span></a></li>
                            </ul>

     </div>


    css样式:

    /*- Menu Tabs J--------------------------- */
    #tabsJ { clear:both;margin-top:5px;float:left;100%;background:#F4F4F4;font-size:93%;line-height:normal;/* border-bottom:1px solid #24618E;*/}
    #tabsJ ul{margin:0;padding:3px 10px 0 50px;list-style:none;}
    #tabsJ li {display:inline;margin:0;padding:0;}
    #tabsJ a{float:left;background:url("../images/tableftJ.gif") no-repeat left top;margin:0;padding:0 0 0 5px;text-decoration:none;}
    #tabsJ a span {float:left;display:block;background:url("../images/tabrightJ.gif") no-repeat right top;padding:5px 15px 4px 6px;color:#24618E;}
        /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsJ a span {float:none;}
        /* End IE5-Mac hack */
    #tabsJ a:hover span {color:#FFF;}
    #tabsJ a:hover {background-position:0% -42px;}
    #tabsJ a:hover span {background-position:100% -42px;}
    #tabsJ #current a {background-position:0% -42px;}
    #tabsJ #current a span {background-position:100% -42px;color:#FFF;}
    /*- Menu Tabs J-====================-END ===========*/

  • 相关阅读:
    什么是三元表达式,遇到三元表达式,你该如何去看代码执行的结果,下面的方法简单实用!!!
    遍历某一个标签中的内容;python+selenium定位到列表整体,使用for循环获取列表文本;可用于校验列表是否存在你需要的文本内容
    Selenium3+python3--如何定位鼠标悬停才显示的元素
    selenium中get_attribute的简单使用
    css层叠样式
    前端初识
    视图,触发器,事务,存储过程,内置函数,索引
    pymysql基本操作
    多态与绑定方法
    封装与组合
  • 原文地址:https://www.cnblogs.com/wsq724439564/p/3258198.html
Copyright © 2011-2022 走看看