精彩专题推荐:建站之入门课建站之必修课建站之关键课网站价值所在流量提高专题 css+div 标准个人网站打造全过程

导航:

建站首页 | 网站设计 | 网站开发 | 网站运营 | 网页软件 | 建站指南 | 搜索优化 | 图像处理 | 视频教程 | 书籍教程 | 建站专题

让你的网站产生收益赚钱,有博客和网站的绝对不能错过

将指定的流量带到你的网站,为你站增加有效的访客,为你提升业绩

当前位置:首页>网站设计>网页特效>正文

CSS：background-position的妙用

来源: 时间:06-09-11 点击: 点击这里收藏本文

　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/<a href=http://www.jzxue.com/html/css/ target=_blank>css</a>">
#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><script language="Javascript"> 
var now = new Date(); 
document.write("<img src='http://counter.yesky.com/counter.<a href=http://www.jzxue.com/Html/shtml/ target=_blank>shtml</a>?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime()  + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>"); 
</script> 
<noscript> 
<img src="http://counter.yesky.com/counter.<a href=http://www.jzxue.com/Html/shtml/ target=_blank>shtml</a>?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/> 
</noscript>

把此文章收藏到：　　　　　

相关教程

·可以收缩和和伸展的表格（符合

·符合标准的对联广告网页特效代

·类似于Flash的超酷网页特效代码

·怎么让别人看不到我的网页代码

·JS实现浏览器菜单命令

·又一个做网站比较流行的图片幻

·网页特效图片加载进度实时显示

·网页特效之用css样式表实现首字

·在DIV+CSS排版中新闻列表的制作

·CSS+DIV:让文本字符环绕在你的

·用DIV做不规则形状的环绕文字

·避免表格table被撑开变形的CSS

·相册的自动播放效果SlideShow

·CSS应用实例：水平线变成虚线

·如何利用PHP和CSS改变网页文字

广而告之

文章搜索

Google JZxue.Com

最新文章

网站推广—网站建设的关键课

吸引访客,做内容有价值的网

关于Photoshop直方图的详细

网站策划,B2B网站策划者应

Web标准网站开发人员配备

便宜/廉价的网站推广方式

写给做BBS的新站长

行为经济学在网站运营中的

漫谈网站改版的必要性

网站策划需要具备的知识

外贸网站建设全攻略

CSS让网页更容易设计与维护

和马云学习如何做网站推广

推荐导读

优秀个人网站打造全过程

热门排行

如何制作网页（网页制作实

如何选择网页制作工具

下载安装Dreamweaver8

制作主页前的准备

垃圾站全教程--之一(新手上

怎样个人网页制作,制作个人

制作模板

在Dreamweaver设置站点

制作首页

网站设计65条原则

规划站点

中国所有银行的BIC code(即

个人主页制作完全手册

关于我们 | 联系我们 | 友情链接 | 网站地图

Copyright © 2005 - 2006 建站学 All rights reserved.