论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

CSS基础实例:CSS实现带背景图片的文字链接的方法

文章类别:div+css布局 | 发表日期:2008-10-5 15:32:57


  在论坛闲逛,碰到一个朋友提出了一个关于“CSS实现带背景图片的文字链接”的问题。

经典论坛贴子原文如下:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
  我想做成第一种图片的效果。可是按我自己的代码写下来就成了第二种效果,字有多大背景就是多大,不会完全显示出来。晕。
  有什么办法解决么。
  a{text-decoration:none;}
  a.left:link{color:#353535;}
  a.left:visited{color:#353535;font-size: 11pt;font-weight: bolder;
  text-align:center;background-image: url(images/0014.gif);}
  a.left:hover,a:active,a:focus{color:#353535;}

其实这个问题的主要思路是这样的:
  将A设置为块元素,图片是此元素的背景。
  在悬停状态,不仅可以设置文字的效果,还可以设置背景图片是不是变化。
  我们首先预备一张背景图片:

我们看下面的效果:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

关于代码的依秩序说明如下:
  * {……}
  整体布局声明,12px的文字大小,并居中对齐;
  a {……}
  将A元素设置为块元素,宽度与高度分别定义为100px、30px;
  设置文字颜色,设置行高为30px,实现文字在A区域内垂直居中对齐。
  设置文字的装饰线为无,即去掉了链接的下划线。
  背景的设置,指定图片所在URL,设置背景图片不重复,定位在0 0的位置。
  a:hover {……}
  设置文字颜色,背景图片除了Y方向的坐标改为-30px其它与上面一样。
  链接的背景图片为100*60px,在链接状态,显示上半部分,即坐标为0 0。在鼠标悬停状态,我们希望看到的是图片的下半部分,所以坐标为0 -30px。
  
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058