zoukankan      html  css  js  c++  java
  • css Tab选项卡1

     利用   锚点原理 以及overflow:hiden 结合,实现纯  css  tab 方式 兼容ie6 + 适合单个tab   不需要js          注意点  红色方框的   a 对应a  必须是 name   如果别的   必须是id  可见我下一篇   css Tab选项卡2

    //以下是源代码

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>css Tab 1</title>

    <style>
    *{margin:0;padding:0;list-style:none;font-size:12px;}

    #content{300px;margin:10px auto;position:relative;border:1px solid #666;}
    ul{20px;height:100px;position:absolute;right:5px;top:100px;}
    ul li{height:33px;}
    ul li a{display:block;20px;height:20px;line-height:20px;text-align:center;color:#000;background:#ccc;text-decoration:none;}
    ul li a:hover{color:#fff;background:#666;}
    #tabTxt{height:300px;overflow:hidden;}
    #tabTxt a{300px;height:300px; display:block;}
    </style>
    </head>
    <body>
    <div id="content">
    <ul>
    <li><a href="#a1">1</a></li>
    <li><a href="#a2">2</a></li>
    <li><a href="#a3">3</a></li>
    </ul>


    <div id="tabTxt">
    <a name="a1" style="background:#f00"></a>
    <a name="a2" style="background:#080"></a>
    <a name="a3" style="background:#009;"></a>
    </div>
    </div>


    </body>
    </html>

    本文地址:http://www.cnblogs.com/surfaces/
  • 相关阅读:
    141. Linked List Cycle
    2. Add Two Numbers
    234. Palindrome Linked List
    817. Linked List Components
    《算法图解》之快速排序
    C++-对象指针的滥用
    C++学习书籍评价
    C++-随机数的产生
    Java-重载和重写区别剖析
    Qt- 图形界面应用程序的运行模式
  • 原文地址:https://www.cnblogs.com/surfaces/p/4206360.html
Copyright © 2011-2022 走看看