CSS实现导航条图片的翻转菜单
更新时间:2023-05-23 15:35:01 阅读量: 实用文档 文档下载
- css平行四边形导航条推荐度:
- 相关推荐
#imgmenu{
width: 450px;
height: 25px; /*高度是背景图片的一半*/
background: url(/imagelist/06/43/473648jpj0j1.gif);
list-style-type: none;
padding: 0px;
margin: 0px;
}
#imgmenu li{
float: left;
}
#imgmenu li a{
display: block;
width: 90px;
height: 25px;
}
#imgmenu li#home a:hover,#activeh{
background: url(/imagelist/06/43/473648jpj0j1.gif) 0 -25px;
/*翻转时背景图的位置,左边0px,顶部-25px,
背景图的下半部分,下同*/
}
#imgmenu li#about a:hover,#activea{
background: url(/imagelist/06/43/473648jpj0j1.gif) -90px -25px;
/*第二个菜单的位置距左边90px,
每个菜单的宽度是90px*/
}
#imgmenu li#pro a:hover,#activep{
background: url(/imagelist/06/43/473648jpj0j1.gif) -180px -25px;
}
#imgmenu li#faq a:hover,#activef{
background: url(/imagelist/06/43/473648jpj0j1.gif) -270px -25px;
}
#imgmenu li#contact a:hover,#activec{
background: url(/imagelist/06/43/473648jpj0j1.gif) -360px -25px;
}
<ul id="imgmenu">
<li id="activeh"><a href="#"></a></li>
<li id="about"><a href="#"></a></li>
<li id="pro"><a href="#"></a></li><li id="faq"><a href="#"></a></li>
<li id="contact"><a href="#"></a></li></ul>
设计的更体贴,照顾纯文本浏览的朋友:
可以在LI内套入SPAN元素,加入文本链接,在风格中设SPAN不可见。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="/urchin.js" type="text/<a href="/article.asp?typeid=36">javascript</a>">
</script>
<script type="text/javascript">
_uacct = "UA-152060-1";
urchinTracker();
</script>
<style type="text/css">
<!--
body{
background: #666666;
margin: 20px;
}
a{
color:#EEEEEE;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
a:hover{
color: #FFCC00;
}
#imgmenu{
width: 450px;
height: 25px;
background: url(/imagelist/06/43/473648jpj0j1.gif);
list-style-type: none;
padding: 0px;
margin: 0px;
}
#imgmenu li{
float: left;
}
#imgmenu li a{
display: block;
width: 90px;
height: 25px;
}
#imgmenu li#home a:hover,#activeh{
background: url(/imagelist/06/43/473648jpj0j1.gif) 0 -25px;
}
#imgmenu li#about a:hover,#activea{
background: url(/imagelist/06/4
3/473648jpj0j1.gif) -90px -25px;
}
#imgmenu li#pro a:hover,#activep{
background: url(/imagelist/06/43/473648jpj0j1.gif) -180px -25px;
}
#imgmenu li#faq a:hover,#activef{
background: url(/imagelist/06/43/473648jpj0j1.gif) -270px -25px;
}
#imgmenu li#contact a:hover,#activec{
background: url(/imagelist/06/43/473648jpj0j1.gif) -360px -25px;
}
-->
</style>
</head>
<body>
<ul id="imgmenu"><li id="activeh"><a href="#"></a></li><li id="about"><a href="#"></a></li>
<li id="pro"><a href="#"></a></li><li id="faq"><a href="#"></a></li>
<li id="contact"><a href="#"></a></li></ul>
<p>
Back to<a href=""></a></p>
</body>
</html>
含也容易。
正在阅读:
CSS实现导航条图片的翻转菜单05-23
传帮带发言稿02-29
浅析形体训练课对提高空乘专业学生职业素质的积极作用08-18
如何挽回前任的心:分手后对方完全否定你,该怎么办?12-17
8学年上学期高二期中考试政治试题(B卷)(附答案) - 图文10-25
预拌混凝土质量监督管理实施细则11-23
管理学原理自学考试试题及答案 - 图文03-25
桩基造价影响因素及工程造价管控分析05-29
商务分册(设备)10-28
- 教学能力大赛决赛获奖-教学实施报告-(完整图文版)
- 互联网+数据中心行业分析报告
- 2017上海杨浦区高三一模数学试题及答案
- 招商部差旅接待管理制度(4-25)
- 学生游玩安全注意事项
- 学生信息管理系统(文档模板供参考)
- 叉车门架有限元分析及系统设计
- 2014帮助残疾人志愿者服务情况记录
- 叶绿体中色素的提取和分离实验
- 中国食物成分表2020年最新权威完整改进版
- 推动国土资源领域生态文明建设
- 给水管道冲洗和消毒记录
- 计算机软件专业自我评价
- 高中数学必修1-5知识点归纳
- 2018-2022年中国第五代移动通信技术(5G)产业深度分析及发展前景研究报告发展趋势(目录)
- 生产车间巡查制度
- 2018版中国光热发电行业深度研究报告目录
- (通用)2019年中考数学总复习 第一章 第四节 数的开方与二次根式课件
- 2017_2018学年高中语文第二单元第4课说数课件粤教版
- 上市新药Lumateperone(卢美哌隆)合成检索总结报告
- 翻转
- 菜单
- 实现
- 导航
- 图片
- CSS
- 实验一MATLAB程序设计入门
- 当代外国学前教育(2015年奥鹏)期末答案
- 教师远程培训试题及答案
- 轻钢龙骨石膏板隔墙施工方案及工艺
- 家庭暴力的民事责任
- 初二八年级物理教师教学工作总结
- 阿鲁科尔沁旗公共体育场
- 立家网-华耐立家微博营销七大利器
- 英语难句分析及翻译
- 三亚婚纱摄影价格实惠套餐-飘视觉
- 让安全来呵护生命
- 如何参加美国教师资格证考试(CBEST、CSET)
- 解读【上海市住宅物业管理规定】
- 选煤厂个人工作总结
- 湖南国际汽车城总策划书
- 化工厂生产记录管理规定
- 第二章 弘扬中国精神 共筑精神家园
- 15年7月考试《无机及分析化学》作业考核试题答案
- 2016-2022年中国辐照加速器行业发展趋势及前景战略研究分析报告
- 五年级语文下册古诗词三首第二课时导学案