学习CSS中background-position的使用方法

<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 728x15, 创建于 08-4-23MSDN */ google_ad_slot = "3624277373"; google_ad_width = 728; google_ad_height = 15; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 160x600, 创建于 08-4-23MSDN */ google_ad_slot = "4367022601"; google_ad_width = 160; google_ad_height = 600; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
大家用到过吗?怎么用的?用在哪里?js控制图片切换有两个缺陷:1.有时后切换缓慢,需要预载解决;2.要制作2-3套图片

  看看怎么用 background-position 解决这个问题,实现快速"切换",这里只用到一张图片

  至于代码中的font:10px/1也是不常见的用法

  可以参考这里:http://www.w3.org/Style/CSS/Test/CSS1/current/sec5526c.htm

  这种用法放在网站地图或者导航条上的效果:

CSS"> #menu a { display:block; width:150px; margin:6px; padding:10px 0 10px 32px; font:10px/1 sans-serif; color:#f90; background: url("http://nb001722.sosoo.net/btn.gif") top left no-repeat; text-decoration: none; } #menu a:hover { background-position: 0 -39px; color:red; } #menu a:active { background: url("http://nb001722.sosoo.net/btn.gif") 0 -78px no-repeat; color:black; } </style> </head> <body> <div id="menu"> <a href="###">Menu link 1</a> <a href="###">Menu link 2</a> <a href="###">Menu link 3</a> <a href="###">Menu link 4</a> <a href="###">Menu link 5</a> </div>

[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]

<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 728x15, 创建于 08-4-23MSDN */ google_ad_slot = "3624277373"; google_ad_width = 728; google_ad_height = 15; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<script type="text/javascript"><!-- google_ad_client = "pub-2947489232296736"; /* 160x600, 创建于 08-4-23MSDN */ google_ad_slot = "4367022601"; google_ad_width = 160; google_ad_height = 600; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
阅读更多
文章标签: css menu url
个人分类: css
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭