博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css 一张图片做导航
阅读量:4588 次
发布时间:2019-06-09

本文共 1348 字,大约阅读时间需要 4 分钟。

<html xmlns="">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
<!--
* {margin:0; padding:0; font-size:12; list-style-type:none; }
#mini_nav {width:390px; height:38px; overflow:hidden; margin:50px auto; background:url(nav.png) no-repeat 0 0;}
#mini_nav li {width:65px; height:38px; float:left;}
#mini_nav li a {display:block; width:65px; height:38px; padding-top:40px; overflow:hidden;}
#mini_nav li a:hover {background:url(nav.png) no-repeat;}

#mini_nav li.nav1 a:hover {background-position:0 -38px;}

#mini_nav li.nav2 a:hover {background-position:-65px -38px;}
#mini_nav li.nav3 a:hover {background-position:-130px -38px;}
#mini_nav li.nav4 a:hover {background-position:-195px -38px;}
#mini_nav li.nav5 a:hover {background-position:-260px -38px;}
#mini_nav li.nav6 a:hover {background-position:-325px -38px;}
</style>
</head>
 
<body>
<ul id="mini_nav">
 <li class="nav1"><a href="#" title="财经">财经</a></li>
 <li class="nav2"><a href="#" title="商业">商业</a></li>
 <li class="nav3"><a href="#" title="管理">管理</a></li>
 <li class="nav4"><a href="#" title="领袖">领袖</a></li>
 <li class="nav5"><a href="#" title="协会">协会</a></li>
 <li class="nav6"><a href="#" title="博客">博客</a></li>
</ul>
</body>
</html>

 请获取下面图片 并命名为:nav.png

转载于:https://www.cnblogs.com/chjun2000/archive/2013/03/22/2975170.html

你可能感兴趣的文章
XamarinAndroid组件教程RecylerView动画组件使用动画(3)
查看>>
linux vim 配置 go 开发环境
查看>>
week 6 CORS
查看>>
Openstack Neutron:二层技术和实现
查看>>
css样式添加错误导致烦扰
查看>>
自动化测试---测试模型
查看>>
ubuntu systemtap-sdt-dev
查看>>
InnoTop
查看>>
Linux的内存回收和交换
查看>>
追风-丁奇 MYSQL
查看>>
python基础之生成器、三元表达式、列表生成式、生成器表达式
查看>>
mybatis 思考
查看>>
不让padding影响元素的宽度
查看>>
cocos2d-x游戏开发系列教程-超级玛丽01-前言
查看>>
如何做一个快乐的人
查看>>
外网无法访问tomcat
查看>>
[LeetCode] Delete Duplicate Emails
查看>>
excel如何用公式判断单元格的值是否为数字、英文、中文,以及相应的计数
查看>>
软件协作工具Trello
查看>>
快速搭建windows服务器的可视化运维环境
查看>>