<!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" 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="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" 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="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>做导航栏的更多相关文章

  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. PostgreSQL 10.0 preview 功能增强

    https://yq.aliyun.com/users/1384833841157402?spm=5176.100239.blogrightarea51131.3.yI7e9d

  2. angular使用canvas操作时报错

    最近,用 angular 前端框架为应用登录新增图形验证码认证,由于没有现成的插件,于是便使用canvas+js操作,也是可以正常使用,但是在编译阶段却有个报错: ERROR in src/app/l ...

  3. SilverLight-DataConversion: 银光数据转换

    ylbtech-SilverLight-DataConversion: 银光数据转换 1.A, Silverlight字符串格式表 1.B, 价格格式转换器 1.C, 日期时间格式转换器 1.D, 图 ...

  4. 【温故知新】——HTML5重要知识点复习

    前言:本文是自己在学习课程中的课程笔记,这里用来温故知新的,并非本人原创. 一.HTML5新特性 —— 十个新特性:凌乱 (1)新的语义标签 (2)增强型表单(表单2.0) (3)音频和视频 (4)C ...

  5. 2017.2.28 activiti实战--第六章--任务表单（二）外置表单

    学习资料:<Activiti实战> 第六章 任务表单(二)外置表单 6.3 外置表单 考虑到动态表单的缺点(见上节),外置表单使用的更多. 外置表单的特点: 页面的原样显示 字段值的自动填 ...

  6. java集合类型接口和实现类个人总结

    转载:http://blog.csdn.net/qingchunbusanchang/article/details/39576749 java的集合是一个比较综合的概念,相关的知识有很多的博客里面做 ...

  7. java查看工具jstack-windows

    Prints Java thread stack traces for a Java process, core file, or remote debug server. This command ...

  8. vue2.X props 数据传递 实现组件内数据与组件外的数据的双向绑定

    vue2.0 禁止 子组件修改父组件数据 在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribute传递props给组件内,组件内只能 ...

  9. Python例子二

    例1.构造函数 #-*-coding:utf--*- import sys class Student: def __init__(self,name,age): self.__name=name s ...

  10. vue 父子通信过程

    1.概述 每个 Vue 实例都实现了事件接口,即: 使用 $on(eventName) 监听事件 使用 $emit(eventName, optionalPayload) 触发事件 2.示例一(未传递 ...