首页 > 代码库 > 运用<ul><li>做导航栏

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

2024-10-20 00:26:39   213人阅读

<!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="width:1308px">
            <li class="aa" onm ouseover="show(‘one‘)" onm ouseout="hide(‘one‘)">
               <h3>
                       <img class="bb" src="../../重要练习题/网页练习/自己制作/img/1t-49f43.png" />
               </h3>
               <div class="cc" id="one" onm ouseover="xianshi(this)" onm ouseout="yincang(this)" style="display:none"> 
                    <ul style="width: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" onm ouseover="show(‘two‘)" onm ouseout="hide(‘two‘)">
               <h3>
                       <img class="bb" src="../../重要练习题/网页练习/自己制作/img/2t.png" />
               </h3>
               <div class="cc" id="two" onm ouseover="xianshi(this)" onm ouseout="yincang(this)" style="display:none"> 
                    <ul style="width: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>

 

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


联系
我们