• 运用<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>
  • 相关阅读:
    (1)定义一个接口Compute含有一个方法int computer(int n,int m); (2)设计四个类分别实现此接口,完成+-*/运算 (3)设计一个类UseCompute,含有方法: public void useCom(Compute com, int one, int two) (4)设计一个测试类
    定义一个“点”(Point)类用来表示三维空间中的点(有三个坐标)。要求如下: (1)可以生成具有特定坐标的点对象。 (2)提供可以设置三个坐标的方法。 (3)提供可以计算该“点”距原点距离平方的方法。 (4)编写主类程序验证。
    编写一个Java程序,计算半径为3.0的圆周长和面积并输出结果
    Java泛型详解
    面向对象
    随机数
    随机数的产生
    随机数
    matplotlib 绘图实例01:正弦余弦曲线
    第05课 Linux命令初探(一)
  • 原文地址:https://www.cnblogs.com/sutao/p/7140767.html
Copyright © 2020-2023  润新知