互联网观察网站建设网站运营网上创业电子商务建站软件建站软件教程网站开发网页制作收藏本站

建站常识 | 域名 | 主机 | 网上开店 | 搜索引擎优化 | 网站推广 | 网络赚钱 | 站长经验 | 个人建站 | 网站设计 | 网页特效 | wap网站

首页 → 网页制作 → css教程

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

　　css2.0 中的 background-position 大家用到过吗？怎么用的？用在哪里？js控制图片切换有两个缺陷：1.有时后切换缓慢,需要预载解决；2.要制作2-3套图片

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

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

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

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

<style type="text/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=http://www.webjx.com/htmldata/2006-05-25/"###">Menu link 1</a> <a href=http://www.webjx.com/htmldata/2006-05-25/"###">Menu link 2</a> <a href=http://www.webjx.com/htmldata/2006-05-25/"###">Menu link 3</a> <a href=http://www.webjx.com/htmldata/2006-05-25/"###">Menu link 4</a> <a href=http://www.webjx.com/htmldata/2006-05-25/"###">Menu link 5</a> </div>

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

上一篇：用css编写的适合标准浏览器的无限分级弹出菜单
下一篇：浅议网页制作中的表单设计

相关分类

网页制作 (4121)

html教程 (591)

css教程 (546)

Dreamweaver教程 (1006)

JavaScript教程 (834)

网页制作技巧 (378)

网页特效 (766)

版权所有 Copyright© 2006 黑马建站宝典联系方式：heima123#gmail.com