zoukankan      html  css  js  c++  java
  • 类似雅虎站的CSS滑动门切换_网页代码站(www.webdm.cn)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>类似雅虎站的CSS滑动门切换_网页代码站(www.webdm.cn)</title>
    <style type="text/css">
    <!--
    *
    { margin:0; padding:0 }
    div, dl, dt, dd
    { display:inline-block; }
    div, dl, dt, dd
    { display:block }
    h2
    { font: 800 12px/20px "宋体"; }
    #tabs
    { border:1px solid #ccc; margin:40px; width:382px; padding:4px 0 }
    #tabs div
    { padding:69px 4px 0px; position:relative; }
    #tabs dt
    { text-align:center; font: 12px/60px "宋体"; }
    #tabs dd
    { font: 12px/20px "宋体"; padding:10px; }
    #tab1 dt
    { left: 4px; top: 4px }
    #tab2 dt
    { left:130px; top:4px }
    #tab3 dt
    { left:256px; top:4px }
    #tab4 dt
    { left: 4px; top: 4px }
    #tab5 dt
    { left:130px; top:4px }
    #tab6 dt
    { left:256px; top:4px }
    .close dt
    { height:60px; width:120px; background:#FAFAFA; position:absolute; border:1px solid #ccc }
    .close dd
    { display:none }
    .open dt
    { height:65px; width:120px; background:#EBEBEB; position:absolute; border:1px solid #ccc; border-bottom:none; }
    .open dd
    { background:#EBEBEB; border:1px solid #ccc; }
    -->
    </style>
    <script type="text/javascript">
    window.onload
    =
    function(){
    alltabs
    = document.getElementById('tabs').getElementsByTagName('dl')
    for(i = 0; i < alltabs.length; i++){
    alltabs[i].className
    = "close"
    alltabs[i].onmouseover
    = function(){
    for(j = 0; j < alltabs.length; j++){
    alltabs[j].className
    = "close"
    }
    this.className = "open"
    }
    }
    }
    </script>
    </head>
    <body>
    <div id="tabs">
    <h2>·欢迎来到网页代码站</h2>
    <div>
    <dl id="tab1">
    <dt>今日更新</dt>
    <dd>1、今日更新的内容</dd>
    </dl>
    <dl id="tab2">
    <dt>今日排行</dt>
    <dd>2、今日排行的内容</dd>
    </dl>
    <dl id="tab3">
    <dt>今日推荐</dt>
    <dd>3、今日推荐的内容</dd>
    </dl>
    </div>
    <div>
    <dl id="tab4">
    <dt>最近下载</dt>
    <dd>4、最近下载的东西</dd>
    </dl>
    <dl id="tab5">
    <dt>源码总排行</dt>
    <dd>5、源码总排行的内容</dd>
    </dl>
    <dl id="tab6">
    <dt>网页特效</dt>
    <dd>6、精品网页特效的内容</dd>
    </dl>
    </div>
    </div>
    </body>
    </html>
    <br>
    <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!


    文章来自:http://www.webdm.cn/webcode/e9cb72b2-9c62-44fd-833d-bda94674aa23.html

  • 相关阅读:
    python,生产环境安装
    neo4j 图数据库
    RNN系列
    机器学习关于AUC的理解整理
    fensorflow 安装报错 DEPENDENCY ERROR
    dubbo Failed to check the status of the service com.user.service.UserService. No provider available for the service
    使用hbase遇到的问题
    MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist on disk
    gradle 安装
    jenkins 安装遇到的坑
  • 原文地址:https://www.cnblogs.com/webdm/p/1925147.html
Copyright © 2011-2022 走看看