学习CSS中background-position的使用方法
css2.0 中的 background-position 大家用到过吗？怎么用的？用在哪里？js控制图片切换有两个缺陷：1.有时后切换缓慢,需要预载解决；2.要制作2-3套图片 看看怎么用 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="###">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 全部选择 提示：你可先修改部分代码，再按运行]
看看怎么用 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="###">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 全部选择 提示：你可先修改部分代码，再按运行]
- 上一篇：浅议网页制作中的表单设计
- 下一篇：用css编写的适合标准浏览器的无限分级弹出菜单
精彩图集
精彩文章