网页资讯视频图片知道文库贴吧地图采购
进入贴吧全吧搜索
mythic吧 关注：29贴子：8,092
  • 6回复贴，共1页

【备份〗一些代码资料（仅供参考）...

只看楼主收藏回复

baidu
1楼2009-11-21 02:02回复
    下拉菜单示例代码
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
    *{ margin:0; padding:0;}
    body{ font-size:12px; line-height:18px;}
    li{ list-style:none;}
    #nav{ position:relative; width:600px; margin:0 auto 10px; height:22px;}
    #nav ul{ position:absolute;}
    #nav ul li{ float:left; display:inline; width:120px; height:18px; padding-top:4px; overflow:hidden; margin:0 2px; text-align:center; background:#F5F5F5; color:#990; border:1px solid #EEE8DD; cursor:pointer; }
    #nav ul .nav-on{height:auto;}
    #nav ul li ul{ position:static;}
    #nav ul li ul li{ display:block; padding:0; margin:0; height:27px; border:none;}
    #nav ul li ul li a{ display:block; height:18px; padding:5px 0 4px; color:#666; text-decoration:none;}
    #nav ul li ul li a:hover{ background:#539D26; color:#fff;}
    .content { background:#ccc; width:600px; height:200px; margin:0 auto; }
    </style>
    </head>
    <body>
    <div id="nav">
      <ul>
        <li onmouseover="this.className='nav-on'" onmouseout="this.className=''">我的首页
          <ul>
            <li><a href="#">我爱CSS</a></li>
            <li><a href="#">我的首页</a></li>
            <li><a href="#">我的日志</a></li>
            <li><a href="#">我的日志</a></li>
            <li><a href="#">我的相册</a></li>
            <li><a href="#">我的收藏</a></li>
          </ul>
        </li>
       <li onmouseover="this.className='nav-on'" onmouseout="this.className=''">社区圈子
    
    2楼2009-11-21 02:02
    回复
      广告
      立即查看
             <ul>
              <li><a href="#">我的日志</a></li>
              <li><a href="#">我的相册</a></li>
              <li><a href="#">我的收藏</a></li>
            </ul>
          </li>
         <li onmouseover="this.className='nav-on'" onmouseout="this.className=''">我的短信
            <ul>
              <li><a href="#">我的首页</a></li>
              <li><a href="#">我的相册</a></li>
              <li><a href="#">我的收藏</a></li>
            </ul>
          </li>
         <li onmouseover="this.className='nav-on'" onmouseout="this.className=''">账户管理
            <ul>
              <li><a href="#">我爱CSS</a></li>
              <li><a href="#">我的首页</a></li>
              <li><a href="#">我的日志</a></li>
              <li><a href="#">我的日志</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="content">这个div是测试nav合适与否的关键</div>
      </body>
      </html>
      3楼2009-11-21 02:02
      回复
        javascript控制下拉菜单的另一种更好的办法
        <!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>NAV</title>
        <style type="text/css">
            body{font-size:12px;}
            ul,li{list-style-type:none;padding:0;margin:0;}
            .main_nav{padding:2px;}
            .main_nav a{display:block;line-height:28px;height:28px;padding-left:10px;overflow:hidden;}
            .main_nav .navs{width:120px;height:28px;float:left;margin-right:2px;}
            *html .main_nav .navs{overflow:hidden;} /* only for ie6 */
            .main_nav .navs .nav_a{background:#DDDDDD;color:#000000;text-decoration:none;}
            .main_nav .navs .nav_a:hover{background:#6a705e;}
            .sub_nav{display:none;width:120px;position:relative;z-index:1000;opacity:0.9;filter:Alpha(opacity=90);}
            .sub_nav li a {color:#000000;text-decoration:none;}
            .sub_nav li a:link, .sub_nav li a:visited{background:#A0BED5;}
            .sub_nav li a:hover{color:#FFFFFF;background:#0077BB;}
            .clear{clear:both;height:1px;line-height:1px;font-size:1px;}
        </style>
        </head>
        <body>
        <ul class="main_nav">
        <li class="navs" onmouseover="showSubNav('subNav_1');" onmouseout="hideSubNav('subNav_1');">
            <a href="javascript:;" class="nav_a">INTRODUCTION</a>
            <ul id="subNav_1" class="sub_nav">
                    <li><a href="#">ABOUT US</a></li>
                    <li><a href="#">ADVANTAGE</a></li>
                     <li><a href="#">ACTIVITIES</a></li>
                <li><a href="#">INFORMATION</a></li>
            </ul>
        </li>
        <li class="navs" onmouseover="showSubNav('subNav_2');" onmouseout="hideSubNav('subNav_2');">
            <a href="javascript:;" class="nav_a">CONTACT</a>
            <ul id="subNav_2" class="sub_nav">
                    <li><a href="#">EMAIL</a></li>
                    <li><a href="#">TELEPHONE</a></li>
                     <li><a href="#">MOBILE</a></li>
                <li><a href="#">MSN</a></li>
            </ul>
        </li>
        <li class="clear"></li><!-- 这个 li 标签必须有，用来清除浮动，这样下面的布局就不会被破坏 -->
        </ul>
        <div>ONLY A TEST! </div>
        <script language="javascript">
            function showSubNav(id){
                document.getElementById(id).style.display='block';
            }
            function hideSubNav(id){
                document.getElementById(id).style.display='none';
            }
        </script>
        </body>
        </html>
        4楼2009-11-21 02:48
        回复
          JavaScript控制CSS弹出登陆框办法：
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
          <HTML>
           <HEAD>
            <TITLE> New Document </TITLE>
          <script>
           var dd;
           function divstyle(){
            this.style.width="100%";
            this.style.height="100%";
            this.style.position="absolute";
            this.style.left=0;
            this.style.top=0;
            this.style.background="#000";
            this.style.filter="alpha(opacity:30)";
           }
           function showlogin(){
            divlogin.style.display="block";
            dd=document.createElement("div");
            divstyle.call(dd);
            document.body.appendChild(dd);
           }
           function hilogin(){
            divlogin.style.display="none";
            document.body.removeChild(dd);
           }
           
          </script>
           </HEAD>
           
           <BODY>
           
              <div id="divlogin" style="border:solid 10px #898989;background:#fff;padding:10px;width:780px;z-index:1001; position: absolute; display:none;top:50%; left:50%;margin:-200px 0 0 -400px;">
           <div style="padding:3px 15px 3px 15px;text-align:left;vertical-align:middle;" >
           <form id="myform"><input type="text" name="email">

           <input type="password" name="password">

           <input type="button" name="logbt" id="logbt" value="登陆">
           <input type="button" value="取消" onclick="hilogin()"></form></div>
          </div> <a href="#" onclick="showlogin()">登陆</a>
           </BODY>
          </HTML>
          5楼2009-11-28 09:28
          回复
            <style type="text/css">
            .div1{
            background-color:#000000;
            position: absolute ;
            top:0;
            left:0;
            z-index:1;
            display:none;
            filter:Alpha(opacity=30);
            } 
            .div2{
            width:300px;
            height:200px;
            position:absolute;
            z-index:2;
            display: none;
            border:3px inset blue;
            background-color:#9999CC;
            }
               </style>
            <script type="text/javascript">
            //显示的方法，说明：前缀的div1、div2、body等，均为Id值
            function show()
            {
            div1.style.display="inline";//设置层1显示
            div1.style.width=body.clientWidth;//设置层1宽度等于body宽度，width=100%也可以，不过有一些误差，所以最好用这个
            div1.style.height=body.clientHeight;//设置层1高度满屏
            div2.style.display="inline";//设置层2的显示
            div2.style.top=body.clientHeight/2-div2.clientHeight/2;//设置层2的距顶位置居中算法
            div2.style.left=body.clientWidth/2-div2.clientWidth/2;//设置层2的距左位置居中算法
            }
            //关闭显示
            function closeShow()
            {
            div1.style.display="none";
            div2.style.display="none";
            }
               </script>
            </head>
            <body bgcolor="#CCFF00" id="body">
                 <!--测试按钮点击触发show()方法-->
                 <input type="button" value="测试按钮" onClick="show()"/>
               <div id="div1" class="div1"></div><!--这是要覆盖网页的层，不必写任何东西-->
               <div id="div2" class="div2"><!--这是弹出的模式窗口层-->
                   <!--嵌套在层中的层，用来做标题栏，按个人需求定义-->
                   <div id="div3" style="width:100%;height:20px; background-color:#0099FF" align="right">
                           <label onClick="closeShow()" style="font-weight:bolder;cursor:hand">
                                 关闭  <!--用来关闭显示，在label中加了onclick事件，与鼠标悬停手的样式-->
                           </label>
                    </div>
                   <input type=text></br>
                <input type=text>
                </div>
            6楼2009-11-29 07:07
            回复
              7楼2010-09-01 16:00
              回复

                扫二维码下载贴吧客户端

                下载贴吧APP
                看高清直播、视频！
                • 6回复贴，共1页
                发表回复
                发贴请遵守贴吧协议及“七条底线”贴吧投诉
                内  容:
                  查看全部
                发 表
                保存至快速回贴

                发布成功
                去贴吧APP订阅抽奖结果通知
                扫码进入贴吧APP
                ···········
                开奖后第一时间站内信通知
                ···········
                中奖结果全员公示