运用<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="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>做导航栏的更多相关文章
- react-navigation 做导航栏,发现 Android 上的标题不居中
在做 React Native 应用的时候,我们常常使用 react-navigation 做导航栏,发现 Android 上的标题不居中,IOS 上没问题. 1 如果只有标题,那就在 headerT ...
- ul li做横向导航栏例子
/* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */ div.menu ul { list-style:none; /* 去掉ul前面的符号 */ margin: ...
- 用ul 来制作导航栏的几个要点
1 ul 1)list-style:none; 3)设置宽度 2)清除浮动的影响,使高度自适应 2 li 1)向左浮动 2)设置margin和padding都为0 3 a 1) dsiplay :bl ...
- css ul li 制作导航条
<html> <head> <style> .test ul{list-style:none;} .test li{float:left; width:100px; ...
- 为什么要使用ul li布局网站导航条?使用ul li布局网站网页导航必要性
会布局的都知道网站导航条布局非常重要,可能一个导航条最终布局效果有时可以使用ul li列表标签布局,有时可以不用ul li布局,而是直接一个div盒子里直接放锚文本超链接的栏目名称,也能实现,看下图. ...
- [置顶]
bootstrap自定义样式-bootstrap侧边导航栏的实现
前言 bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单 ...
- python 全栈开发,Day49(超链接导航栏案例,background,定位,z-index,iconfont使用)
昨日内容回顾 浮动:是css中布局最多的一个属性 有浮动,一定要清除浮动 浮动不是一个元素单独浮动,要浮动一起浮动 清除浮动四种方式: 1.给父盒子添加高度,一般导航栏 2.给浮动元素后面加一个空的块 ...
- {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index
03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...
- 带轮播图、导航栏、商品的简单html,以及轮播图下边数字随轮播图的改变而改变
---恢复内容开始--- 在做这个的时候,最不会的是中间轮播图下边的数字是如何实现转变的,后来加入了jQuery就能实现了. css部分: <style type="text/css& ...
随机推荐
- Tiny4412 支持 adb reboot-bootloader
硬件版本: Tiny4412ADK + S700 4GB u-boot 版本: u-boot-2010-12 linux版本: Linux-3.0.8 版本一 支持 adb re ...
- 在红米note4上实现自动安装软件
因为要做自动化测试,需要对已发布的包进行回归手测,这个时候需要手动安装APK,但是红米会弹出继续安装的按钮,手点一次比较烦,想自动点"继续安装"按钮! 感谢先行者们的分享 本文参考 ...
- spring Multiple MongoTemplate
<!-- 数据环境配置 --> <mongo:repositories base-package="com.my9yu.manager.module.server.repo ...
- Java设计模式博客全文件夹
转载请注明出处:http://blog.csdn.net/lhy_ycu/article/details/40031567 今天来对这23种设计模式做个总结.咱使用设计模式的目的是为了可重用代码.让代 ...
- mysql使用mysqldump 与 mysqlimport进行数据库迁移
1.导入数据库 1)source source /home/platvt/product/pc2_create_tables.sql 2)mysqlimport 使用mysqlimport导入数据: ...
- linux设备驱动程序之并发和竞态(二)
事实上这blog都是阅读ldd3时的一些总结,巩固自己的学习.也方便后期的使用.大家也能够直接阅读ldd3原文. 锁陷阱 所谓的锁陷阱就是防止死锁. 不明白的规则: ...
- 怎样推断server为虚拟机还是物理真机?
dmidecode |grep -A20 "Memory Device$"|sed -n -e'/Locator/p' -e '/Size/p'|grep -v "Ban ...
- mysql主从只同步部分库或表
同步部分数据有两个思路,1.master只发送需要的:2.slave只接收想要的. master端: binlog-do-db 二进制日志记录的数据库(多数据库用逗号,隔开)binlog-i ...
- Redis学习手册(List数据类型)(转)
一.概述: 在Redis中,List类型是按照插入顺序排序的字符串链表.和数据结构中的普通链表一样,我们可以在其头部(left)和尾部(right)添加新的 元素.在插入时,如果该键并不存在,Redi ...
- XSS前置课程--同源策略
什么是同源策略: 在用户浏览互联网中的网页的过程中,身份和权限的思想是贯穿始终的 同源策略(Same-Origin Policy),就是为了保证互联网之中,各类资源的安全性而诞生的产物,它实际上是一个 ...