zoukankan      html  css  js  c++  java
  • 很简单的CSS黑色线条滑动门代码

    代码简介:

    简约的纤细线条型CSS滑动门,很简单,但是很实用!

    代码内容:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
    <title>很简单的CSS黑色线条滑动门代码_网页代码站(www.webdm.cn)</title>
    <style type="text/css">
    <!--
    body,div,ul,li{
     margin:0 auto;
     padding:0;
    }
    body{
     font:12px "宋体";
     text-align:center;
    }
    a:link{
     color:#00F;
     text-decoration:none;
    }
    a:visited {
     color: #00F;
     text-decoration:none;
    }
    a:hover {
     color: #c00;
     text-decoration:underline;
    }
    ul{
     list-style:none;
    }
    .main{
     clear:both;
     padding:8px;
     text-align:center;
    }
    
    #tabs1{
     text-align:left;
     400px;
    }
    .menu1box{
     position:relative;
     overflow:hidden;
     height:22px;
     400px;
     text-align:left;
    }
    #menu1{
     position:absolute;
     top:0;
     left:0;
     z-index:1;
    }
    #menu1 li{
     float:left;
     display:block;
     cursor:pointer;
     72px;
     text-align:center;
     line-height:21px;
     height:21px;
    }
    #menu1 li.hover{
     background:#fff;
     border-left:1px solid #333;
     border-top:1px solid #333;
     border-right:1px solid #333;
    }
    .main1box{
     clear:both;
     margin-top:-1px;
     border:1px solid #333;
     height:181px;
     400px;
    }
    #main1 ul{
     display: none;
    }
    #main1 ul.block{
     display: block;
    }
    -->
    </style>
    <script>
    <!--
    function setTab(m,n){
     var tli=document.getElementById("menu"+m).getElementsByTagName("li");
     var mli=document.getElementById("main"+m).getElementsByTagName("ul");
     for(i=0;i<tli.length;i++){
      tli[i].className=i==n?"hover":"";
      mli[i].style.display=i==n?"block":"none";
     }
    }
    //-->
    </script>
    </head>
    <body>
    <br>
    <div id="tabs1">
     <div class="menu1box">
      <ul id="menu1">
       <li class="hover" onmouseover="setTab(1,0)"><a href="#">新闻</a></li>
       <li onmouseover="setTab(1,1)"><a href="#">评论</a></li>
       <li onmouseover="setTab(1,2)"><a href="#">技术</a></li>
       <li onmouseover="setTab(1,3)"><a href="#">点评</a></li>
      </ul>
     </div>
     <div class="main1box">
      <div class="main" id="main1">
       <ul class="block"><li>新闻列表</li></ul>
       <ul><li>评论列表</li></ul>
       <ul><li>技术列表</li></ul>
       <ul><li>点评列表</li></ul>
      </div>
     </div>
    </div>
    </body>
    </html>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码
    
    !</p>
    

    代码来自:http://www.webdm.cn/webcode/c1c53a69-14ae-4d13-877f-6fc5a0430664.html

  • 相关阅读:
    手工卸载.Net写的win服务
    程序员素质面试题
    GridView数据导出功能
    使用EventLog类写系统日志
    HTML Response ContentType 大全
    用C#做短信CMPP2.0/3.0协议 支持扩展号支持物理网卡
    CYQ.Data 轻量数据层之路 使用篇MAction 数据查询 视频 E (二十二)
    CYQ.Data 轻量数据层之路 V2.0 震撼惊世 支持多数据库/内置Aop(二十五)
    MapXtreme 2005 GIS开发入门系列 索引
    CYQ.Data 轻量数据层之路 框架如何应对数据库变化
  • 原文地址:https://www.cnblogs.com/webdm/p/2032400.html
Copyright © 2011-2022 走看看