繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > css利用A标签的背景可能作出很有意思的效果
- CSS样式表
- css 块状元素和内联元素
- CSS 盒模型、块状元素与内联元素、CSS选择器
- css 浮动 理解Float的含义
- CSS 清除浮动Clear
- CSS 制作网页导航条(上)
- CSS 制作网页导航条(下)
- css 浮动(float)页面布局
- css 浮动(float)页面布局(下)
- css position 定位
- css 定位应用实例
- CSS Hack 有关浏览器兼容方面
- css 单图片按钮实例(css 图片变换)
- 使用X-UA-Compatible来设置IE浏览器兼容模式
- div overflow 超出隐藏属性使用说明
- CSS 使用规则总结
- div+CSS 兼容小摘
- CSS的inherit与auto使用分析
- 如何组织和注释CSS文件
- CSS样式按整洁易懂的结构组织
- CSS Prism 查看和编辑CSS中用到的颜色
CSS样式表 中的 css利用A标签的背景可能作出很有意思的效果
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 208 ::
收藏到网摘: n/a
这个效果是今天有人写邮件给我问的一个效果，记前以前利用A标签的背景写过一个类似的效果。于是刚刚回来就写了一下他要求的效果！顺便贴出来和大家分享一下，如果你很有创意，那么你一定能作出更有意思的效果。
他提出来的效果，是九天音乐首页一个FLASH的作的效果，要用CSS模仿同样的效果，可能是因为不想用FLASH或是SEO之类的目地。于是用FW作了两张GIF的图片，来模仿这样的效果，由于是是测试用，所以图片等很多方面没有考虑的特别细。有些粗糙，但看上去还是有那么点意思的，呵呵……
首先说一下：a:link、a:visited、a:hover、a : active：可能有人说我这是废话，但如果是新手看到了这个，会很有用的，别人告诉你的东西，总比自已悟上半天的快。
复制代码 代码如下:
a:link{}
a:visited {}
a:hover {}
a:active {}
以上语句分别定义了“正常链接”“已访问过的链接”“鼠标停在上方时”“点下鼠标时”的样式。
对于新手，这里千万要注意，在书写的过程中，这四行的顺序千万要按上边的次序来写，否则显示出来的效果会和预想的不一样。简单的记忆方面就是“LVHA”。love ha.
以下是制用这个效果要用到的两张图片：
以下是CSS部分：
复制代码 代码如下:
<style>
*{ margin:0; padding:0; list-style:none; }
body{ font-size:12px; line-height:1.8; padding:50px; background: #333; font-family:Verdana;}
#test{ border:1px solid #000; padding:20px; float:left; background:#666666}
#test li{float:left;margin-left:20px;}
#test a{display:block;width:83px; line-height:79px;text-decoration:none; border:1px solid #000; text-align:center;}
#test a:link,#test a:visited{color:#000;background:url(/upload/tech/20091012/20091012141432_67e103b0761e60683e83c559be18d40c.gif);}
#test a:hover,#test a:active{color:#000;background:url(/upload/tech/20091012/20091012141432_3c7781a36bcd6cf08c11a970fbe0e2a6.gif); border:1px solid #FF6600;}
</style>
以下是布局部分：
程序代码
复制代码 代码如下:
<div id="test">
<ul>
<li><a href="http://www.ruanchen.com">test1</a></li>
<li><a href="http://www.ruanchen.com">test2</a></li>
<li><a href="http://www.ruanchen.com">test3</a></li>
<li><a href="http://www.ruanchen.com">test4</a></li>
</ul>
</div>
以下是效果：
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
看完了，其实这东西一点技术含量也没有，就是用了两张图片。但是，如果你能让这两张图片有更多的变化，而且能组合得非常好，那一定可能用这样简单的代码来作出很有意思的效果，那时就不是模仿FLASH了，而是FLASH来模仿CSS了。
另然用A标签加宽度或高度不是一个很好的主意，但如果能用简单的代码来实现同样的效果，而且利于维护，我们不用去计较这些东西。就像前段时间听同事说：“技术只是手段”。对，用技术提供好的服务才是最好的，不用特别计较一些东西。就像家里的椅子是用来坐的，而我却用它来当饭桌吃饭，因为在我家这样是最合适的。如果用FLASH来作这样的显示，我想FLASH里边的文字在百度中一定搜不到，而且可不是百分百的用户都有FLASH插件的。
类例的效果应该用客齐集首页的地图上，如果感兴趣可以看一下：http://www.kijiji.cn/index.html
好了，晚安。
应要求，CSS部分我解释一下！
程序代码
<style>l
//*代表全部的标签，这里我把所有的标签的marging和padding处理掉；list-style对一些标签不起作用，主要处理掉ul前的序列标记的；
*{ margin:0; padding:0; list-style:none; }
//这个定义网页的文字大小为12px; 行高是正常的1.8倍，和180%是一个意思；还在文字字体和背景色
body{ font-size:12px; line-height:1.8; padding:50px; background: #333; font-family:Verdana;}
//定义ID为test的标签：边框为一个像素的黑色边；左浮动；
#test{ border:1px solid #000; padding:20px; float:left; background:#666666}
//ID用test下边的li标签全部左浮动，并距左边为20个像素
#test li{float:left;margin-left:20px;}
//定义ID为test下边的a标签为block（块）；又定义了宽和高，还有边框等；
#test a{display:block;width:83px; line-height:79px;text-decoration:none; border:1px solid #000; text-align:center;}
//这里就是本文最上边写的两种状态的简写详细见下边的注解1，这里定义了两种状态下的背景图片和文字色；
#test a:link,#test a:visited{color:#000;background:url(/upload/tech/20091012/20091012141432_67e103b0761e60683e83c559be18d40c.gif);}
//见下边注解1；这里定义了文字色和背景图片还有边框色；
#test a:hover,#test a:active{color:#000;background:url(/upload/tech/20091012/20091012141432_3c7781a36bcd6cf08c11a970fbe0e2a6.gif); border:1px solid #FF6600;}
</style>
注解1：
程序代码
#test a:link,#test a:visited{color:#000;background:url(/upload/tech/20091012/20091012141432_67e103b0761e60683e83c559be18d40c.gif);}
这行是简写的形式，不简写应该是这样的：
程序代码
#test a:link{color:#000;background:url(/upload/tech/20091012/20091012141432_67e103b0761e60683e83c559be18d40c.gif);}
#test a:visited{color:#000;background:url(/upload/tech/20091012/20091012141432_67e103b0761e60683e83c559be18d40c.gif);}
前边加了一个#test是这些设置只有在ID为test标签下才会有效，这样不会影响其它地方的设置！
程序代码
//这样写会对全网页的a标签生效；
a:link{color:#000;background:url(/upload/tech/20091012/20091012141432_67e103b0761e60683e83c559be18d40c.gif);}
//这样写会覆盖上一行中重复的属性
#test a:visited{color:#000;background:url(/upload/tech/20091012/20091012141432_67e103b0761e60683e83c559be18d40c.gif);}
这里一定要注意的是：覆盖上一行中重复的属性 是“覆盖”，并且是“重复的”标签；
例如以下测试代码：
程序代码
<style>
/*这里我定义了文字没有下划线，和文字是加粗的，还有文字的色*/
a:link,a:visited{color:#000099;text-decoration:none; font-weight:bold}
a:hover,a:active{color:#000;}
/*看这里，只有文字的色变了，而其它的属性都是继承下来的*/
#test a:link,#test a:visited{color:#0000FF;}
#test a:hover,#test a:active{color:#339900;}
</style>
看效果：
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
评论 (0) All
