1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>导航</title>
  6. <style type="text/css">
  7. *{ margin:0px auto; padding:0px; font-family:微软雅黑 }
  8. #mune{width:1308px; height:50px; margin-top:100px; background-color:#666 }
  9. .aa{ width:130px; height:50px; list-style:none; float:left; margin-left:15px }
  10. .bb{ width:130px; height:50px; text-align:center }
  11. .cc{ width:1308px; height:150px; background-color:#D2D2D2; opacity:0.5; position:absolute; left:29px }
  12. .dd{ width:115px; height:145px; float:left; margin:0px 15px; list-style:none }
  13. .dd:hover{ cursor:pointer }
  14. .img{ width: 115px; height: 115px; border: 1px solid #ffbe00; float:left }
  15. .text{ font-size:14px; color:red; text-align:center; line-height:30px; vertical-align:middle }
  16. .text:hover{ color:blue }
  17. .ee{ width:115px; height:115px }
  18. #datu{ width:1308px; height:600px }
  19. .gg{ width:1308px; height:600px }
  20. </style>
  21. </head>
  22.  
  23. <body>
  24.     <div id="mune">
  25.          <ul style="width:1308px">
  26.             <li class="aa" onmouseover="show('one')" onmouseout="hide('one')">
  27.                <h3>
  28.                        <img class="bb" src="../../重要练习题/网页练习/自己制作/img/1t-49f43.png" />
  29.                </h3>
  30.                <div class="cc" id="one" onmouseover="xianshi(this)" onmouseout="yincang(this)" style="display:none">
  31.                     <ul style="width:1308px">
  32.                        <li class="dd">
  33.                            <div class="img">
  34.                                <img class="ee" src="../../重要练习题/网页练习/自己制作/img/111.png" />
  35.                            </div>
  36.                            <div class="text">111</div>
  37.                        </li>
  38.                        <li class="dd">
  39.                            <div class="img">
  40.                                <img class="ee" src="../../重要练习题/网页练习/自己制作/img/44-714df.jpg"/>
  41.                            </div>
  42.                            <div class="text">222</div>
  43.                        </li>
  44.                        <li class="dd">
  45.                            <div class="img">
  46.                                <img class="ee" src="../../重要练习题/网页练习/自己制作/img/06bOOOPIC14_1024.jpg" />
  47.                            </div>
  48.                            <div class="text">333</div>
  49.                        </li>
  50.                        <li class="dd">
  51.                            <div class="img">
  52.                                <img class="ee" src="../../重要练习题/网页练习/自己制作/img/20100301110348-7849a.jpg" />
  53.                            </div>
  54.                            <div class="text">444</div>
  55.                        </li>
  56.                        <li class="dd">
  57.                            <div class="img">
  58.                                <img class="ee" src="../../重要练习题/网页练习/自己制作/img/20111205144149_88361.jpg" />
  59.                            </div>
  60.                            <div class="text">555</div>
  61.                        </li>
  62.                        <li class="dd">
  63.                            <div class="img">
  64.                                <img class="ee" src="../../重要练习题/网页练习/自己制作/img/201206242153515561.jpg" />
  65.                            </div>
  66.                            <div class="text">666</div>
  67.                        </li>
  68.                     </ul>
  69.                </div>
  70.             </li>
  71.             <li class="aa" onmouseover="show('two')" onmouseout="hide('two')">
  72.                <h3>
  73.                        <img class="bb" src="../../重要练习题/网页练习/自己制作/img/2t.png" />
  74.                </h3>
  75.                <div class="cc" id="two" onmouseover="xianshi(this)" onmouseout="yincang(this)" style="display:none">
  76.                     <ul style="width:1308px">
  77.                        <li class="dd">
  78.                            <div class="img">
  79.                                <img class="ee" src="../../重要练习题/网页练习/自己制作/img/111.png" />
  80.                            </div>
  81.                            <div class="text">111</div>
  82.                        </li>
  83.                        <li class="dd">
  84.                            <div class="img">
  85.                                <img class="ee" src="../../重要练习题/网页练习/自己制作/img/44-714df.jpg"/>
  86.                            </div>
  87.                            <div class="text">222</div>
  88.                        </li>
  89.                        <li class="dd">
  90.                            <div class="img">
  91.                                <img class="ee" src="../../重要练习题/网页练习/自己制作/img/06bOOOPIC14_1024.jpg" />
  92.                            </div>
  93.                            <div class="text">333</div>
  94.                        </li>
  95.                        <li class="dd">
  96.                            <div class="img">
  97.                                <img class="ee" src="../../重要练习题/网页练习/自己制作/img/20100301110348-7849a.jpg" />
  98.                            </div>
  99.                            <div class="text">444</div>
  100.                        </li>
  101.                        <li class="dd">
  102.                            <div class="img">
  103.                                <img class="ee" src="../../重要练习题/网页练习/自己制作/img/20111205144149_88361.jpg" />
  104.                            </div>
  105.                            <div class="text">555</div>
  106.                        </li>
  107.                        <li class="dd">
  108.                            <div class="img">
  109.                                <img class="ee" src="../../重要练习题/网页练习/自己制作/img/201206242153515561.jpg" />
  110.                            </div>
  111.                            <div class="text">666</div>
  112.                        </li>
  113.                     </ul>
  114.                </div>
  115.             </li>
  116.          </ul>
  117.     </div>
  118.     <div id="datu">
  119.          <img class="gg" src="../../重要练习题/网页练习/自己制作/img/zhaoshang310x80mmxiugaihoubanben20170213-17f47.jpg" />
  120.          <img class="gg" src="../../重要练习题/网页练习/自己制作/img/jiajunwangzhanyushihuwai201606131.jpg" style="display:none" />
  121.          <img class="gg" src="../../重要练习题/网页练习/自己制作/img/434350972744829146.jpg" style="display:none" />
  122.     </div>
  123. </body>
  124. <script type="text/javascript">
  125. function show(id){
  126.     document.getElementById(id).style.display = "block";
  127. }
  128. function hide(id){
  129.     document.getElementById(id).style.display = "none";
  130. }
  131. function xianshi(id){
  132.     document.getElementById(id).style.display = "block";
  133. }
  134. function yincang(id){
  135.     document.getElementById(id).style.display = "none";
  136. }
  137.  
  138. var sy = document.getElementsByClassName("gg");
  139. var a = 0;
  140. zhanshi();
  141. function zhanshi(){
  142.     lunzhuan();
  143.     if(a<sy.length-1){
  144.         a++;
  145.     }else{
  146.         a = 0;
  147.     }
  148.     window.setTimeout("zhanshi()",2000);
  149. }
  150. function lunzhuan(){
  151.     for(var i=0;i<sy.length;i++){
  152.         sy[i].style.display = "none";
  153.     }
  154.     sy[a].style.display = "block";
  155. }
  156. </script>
  157. </html>

运用<ul><li>做导航栏的更多相关文章

  1. react-navigation 做导航栏，发现 Android 上的标题不居中

    在做 React Native 应用的时候,我们常常使用 react-navigation 做导航栏,发现 Android 上的标题不居中,IOS 上没问题. 1 如果只有标题,那就在 headerT ...

  2. ul li做横向导航栏例子

    /* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */ div.menu ul { list-style:none; /* 去掉ul前面的符号 */ margin: ...

  3. 用ul 来制作导航栏的几个要点

    1 ul 1)list-style:none; 3)设置宽度 2)清除浮动的影响,使高度自适应 2 li 1)向左浮动 2)设置margin和padding都为0 3 a 1) dsiplay :bl ...

  4. css ul li 制作导航条

    <html> <head> <style> .test ul{list-style:none;} .test li{float:left; width:100px; ...

  5. 为什么要使用ul li布局网站导航条？使用ul li布局网站网页导航必要性

    会布局的都知道网站导航条布局非常重要,可能一个导航条最终布局效果有时可以使用ul li列表标签布局,有时可以不用ul li布局,而是直接一个div盒子里直接放锚文本超链接的栏目名称,也能实现,看下图. ...

  6. [置顶] bootstrap自定义样式-bootstrap侧边导航栏的实现

    前言 bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单 ...

  7. python 全栈开发，Day49(超链接导航栏案例,background,定位,z-index,iconfont使用)

    昨日内容回顾 浮动:是css中布局最多的一个属性 有浮动,一定要清除浮动 浮动不是一个元素单独浮动,要浮动一起浮动 清除浮动四种方式: 1.给父盒子添加高度,一般导航栏 2.给浮动元素后面加一个空的块 ...

  8. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  9. 带轮播图、导航栏、商品的简单html，以及轮播图下边数字随轮播图的改变而改变

    ---恢复内容开始--- 在做这个的时候,最不会的是中间轮播图下边的数字是如何实现转变的,后来加入了jQuery就能实现了. css部分: <style type="text/css& ...

随机推荐

  1. C#中结构体与类的区别

    一.结构体和类非常相似 1,定义和使用非常相似,例子如下:public struct Student{    string Name;    int Age;}public class Questio ...

  2. 查看linux 系统 当前使用的网卡

    使用ifconfig命令查看到linux 系统有三个网卡 ,其实我只要其中一个启用就可以了,用什么命令查看或者切换网卡,或者停用掉其他两个网卡? watch cat /proc/net/dev 看下哪 ...

  3. 列表pagesize修改每页显示的数量失效

    ◇系统错误修复工具 >> 检测微表正确性 原因是删除一些数据导致记录与实际数据不符 转自:http://bbs.dedecms.com/269491.html

  4. django admin页面样式丢失问题

    wamp 配置django admin页面样式丢失问题 第一种方法:在apache配置文件httpd.conf中加入如下代码:Alias /static "E:\Python27\Lib\s ...

  5. hduoj1285确定比赛名次

     确定比赛名次 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total ...

  6. 怎样找出自己定义标签的java类

    怎样找出自己定义标签的java类 这是一个逆推的过程(建立自己定义标签能够查看下面连接:http://blog.csdn.net/antoniochan/article/details/3810990 ...

  7. 启动mongodb报错问题

    [root@zk-datanode-02 mongodb]# bin/mongod -f config/mongo.cnf &[1] 30549[root@zk-datanode-02 mon ...

  8. android listView 滑动载入数据 该数据是服务端获取的

    package com.sunway.works.applycash; import java.util.ArrayList; import java.util.Calendar; import ja ...

  9. php hex2bin 物联网设备发送十六进制数据

    hex2bin("十六进制字符") 折腾了三天 后来大神一句话搞定 : hex2bin("十六进制字符") 网上有个方向是错误的 就是 "\xAA\x ...

  10. Iptables实现公网IP DNAT/SNAT

    Iptables实现NAT是最基本的功能,大部分家用路由都是基于其SNAT方式上网,使用Iptables实现外网DNAT也很简单,不过经常会出现不能正常NAT的现象.以下命令将客户端访问1.1.1.1 ...