• 运用<ul><li>做导航栏


    <!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>导航</title>
    <style type="text/css">
    *{ margin:0px auto; padding:0px; font-family:微软雅黑 }
    #mune{width:1308px; height:50px; margin-top:100px; background-color:#666 }
    .aa{ width:130px; height:50px; list-style:none; float:left; margin-left:15px }
    .bb{ width:130px; height:50px; text-align:center }
    .cc{ width:1308px; height:150px; background-color:#D2D2D2; opacity:0.5; position:absolute; left:29px }
    .dd{ width:115px; height:145px; float:left; margin:0px 15px; list-style:none }
    .dd:hover{ cursor:pointer }
    .img{ width: 115px; height: 115px; border: 1px solid #ffbe00; float:left }
    .text{ font-size:14px; color:red; text-align:center; line-height:30px; vertical-align:middle }
    .text:hover{ color:blue }
    .ee{ width:115px; height:115px }   
    #datu{ width:1308px; height:600px }  
    .gg{ width:1308px; height:600px }    
    </style>
    </head>
    
    <body>
        <div id="mune">
             <ul style="1308px">
                <li class="aa" onmouseover="show('one')" onmouseout="hide('one')">
                   <h3>
                           <img class="bb" src="../../重要练习题/网页练习/自己制作/img/1t-49f43.png" />
                   </h3>
                   <div class="cc" id="one" onmouseover="xianshi(this)" onmouseout="yincang(this)" style="display:none"> 
                        <ul style="1308px">
                           <li class="dd">
                               <div class="img">
                                   <img class="ee" src="../../重要练习题/网页练习/自己制作/img/111.png" />
                               </div>
                               <div class="text">111</div>
                           </li>
                           <li class="dd">
                               <div class="img">
                                   <img class="ee" src="../../重要练习题/网页练习/自己制作/img/44-714df.jpg"/>
                               </div>
                               <div class="text">222</div>
                           </li>
                           <li class="dd">
                               <div class="img">
                                   <img class="ee" src="../../重要练习题/网页练习/自己制作/img/06bOOOPIC14_1024.jpg" />
                               </div>
                               <div class="text">333</div>
                           </li>
                           <li class="dd">
                               <div class="img">
                                   <img class="ee" src="../../重要练习题/网页练习/自己制作/img/20100301110348-7849a.jpg" />
                               </div>
                               <div class="text">444</div>
                           </li>
                           <li class="dd">
                               <div class="img">
                                   <img class="ee" src="../../重要练习题/网页练习/自己制作/img/20111205144149_88361.jpg" />
                               </div>
                               <div class="text">555</div>
                           </li>
                           <li class="dd">
                               <div class="img">
                                   <img class="ee" src="../../重要练习题/网页练习/自己制作/img/201206242153515561.jpg" />
                               </div>
                               <div class="text">666</div>
                           </li>        
                        </ul>
                   </div>
                </li>
                <li class="aa" onmouseover="show('two')" onmouseout="hide('two')">
                   <h3>
                           <img class="bb" src="../../重要练习题/网页练习/自己制作/img/2t.png" />
                   </h3>
                   <div class="cc" id="two" onmouseover="xianshi(this)" onmouseout="yincang(this)" style="display:none"> 
                        <ul style="1308px">
                           <li class="dd">
                               <div class="img">
                                   <img class="ee" src="../../重要练习题/网页练习/自己制作/img/111.png" />
                               </div>
                               <div class="text">111</div>
                           </li>
                           <li class="dd">
                               <div class="img">
                                   <img class="ee" src="../../重要练习题/网页练习/自己制作/img/44-714df.jpg"/>
                               </div>
                               <div class="text">222</div>
                           </li>
                           <li class="dd">
                               <div class="img">
                                   <img class="ee" src="../../重要练习题/网页练习/自己制作/img/06bOOOPIC14_1024.jpg" />
                               </div>
                               <div class="text">333</div>
                           </li>
                           <li class="dd">
                               <div class="img">
                                   <img class="ee" src="../../重要练习题/网页练习/自己制作/img/20100301110348-7849a.jpg" />
                               </div>
                               <div class="text">444</div>
                           </li>
                           <li class="dd">
                               <div class="img">
                                   <img class="ee" src="../../重要练习题/网页练习/自己制作/img/20111205144149_88361.jpg" />
                               </div>
                               <div class="text">555</div>
                           </li>
                           <li class="dd">
                               <div class="img">
                                   <img class="ee" src="../../重要练习题/网页练习/自己制作/img/201206242153515561.jpg" />
                               </div>
                               <div class="text">666</div>
                           </li>        
                        </ul>
                   </div>
                </li>
             </ul>
        </div>
        <div id="datu">
             <img class="gg" src="../../重要练习题/网页练习/自己制作/img/zhaoshang310x80mmxiugaihoubanben20170213-17f47.jpg" />
             <img class="gg" src="../../重要练习题/网页练习/自己制作/img/jiajunwangzhanyushihuwai201606131.jpg" style="display:none" />
             <img class="gg" src="../../重要练习题/网页练习/自己制作/img/434350972744829146.jpg" style="display:none" />
        </div>
    </body>
    <script type="text/javascript">
    function show(id){
        document.getElementById(id).style.display = "block";
    }
    function hide(id){
        document.getElementById(id).style.display = "none";
    }
    function xianshi(id){
        document.getElementById(id).style.display = "block";
    }
    function yincang(id){
        document.getElementById(id).style.display = "none";
    }
    
    var sy = document.getElementsByClassName("gg");
    var a = 0;
    zhanshi();
    function zhanshi(){
        lunzhuan();
        if(a<sy.length-1){
            a++;
        }else{
            a = 0;
        }
        window.setTimeout("zhanshi()",2000);
    }
    function lunzhuan(){
        for(var i=0;i<sy.length;i++){
            sy[i].style.display = "none";
        }
        sy[a].style.display = "block";
    }
    </script>
    </html>
  • 相关阅读:
    博客园发展,我也来谈谈
    为什么说JavaScript是基于对象的语言?
    Email地址加密JS版
    Flash上传文件(结合asp.net)
    软件测试工程师面试题
    asp.net 创建文件夹时出错:未找到路径“D:\”的一部分。(asp.net 使用 FSO)
    发布一个可用在Blog上的Flash Mp3 Player (也支持flv格式)
    一直没掌握的一个简单的Update语句
    句柄的理解(选摘)
    消息的基本概念
  • 原文地址:https://www.cnblogs.com/sutao/p/7140767.html
Copyright © 2020-2023  润新知