网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > CSS
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
本月文章推荐
.鼠标经过背景变色之CSS+DIV方法.
.CSS规范 闭合浮动元素介绍.
.利用CSS,不通过replace替换标引.
.英文强制换行 没有横向滚动条css.
.CSS中最小高度(min-height)的妙用.
.DIV+CSS技术是否适合中国中小网站.
.如何将XHTML+CSS页面转换为打印机.
.与表格边框有关的CSS语法.
.div+css布局漫谈.
.CSS模块化设计—从空格谈起.
.5款纯div+css制作的弹出菜单(标准.
.CSS控制LI不换行.
.很立体的CSS按钮菜单效果.
.css技巧-经典中的经典.
.技巧总结:div中class与id的区别.
.CSS语法手册(一)字体属性 .
.CSS中如何正确的使用id和class.
.CSS固定定位{position:fixed}.
.CSS教程:关于网页图片的属性.
.相册的自动播放效果SlideShow.

用图片实现超级链接的个性化下划线

发表日期:2007-10-31


  实现超链接的个性化下划线其实很简单,用一些基本的语法,利用CSS中的滑动门技术(即背景图像的可层叠性),并允许他们在彼此之上进行滑动,以创造一些特殊的效果即可:

  首先,我们来说说这个彩色的下划线是怎么弄的:利用一张渐变的背景图片。

  再看看下面的css代码:

以下是引用片段:
body {
  font-size:14px;
  font-family: Helvetica, sans-serif;
  padding:10px;
  margin:0px;
}
h1{margin:0; padding:0; font-size:16px; }
p{padding:20px 0 0 0;}
a{
  *padding-bottom:1px;
  text-decoration:none;
  }
a:link{
  color:#06F;
  background: url(1.gif);
  background-repeat: repeat-x;
  background-position: 0 16px;
}
a:visited{
  color:#06f;
  background-image: url(1.gif);
  background-repeat: repeat-x;
  background-position: 0 16px;
}
a:hover{
  color:#039;
  background:url(1.gif) repeat-x 0 bottom;
}
上一篇:纯CSS制作的网页中的lightbox效果 人气:4642
下一篇:CSS:清除浮动的最优方法 人气:3721
浏览全部css的内容 Dreamweaver插件下载 网页广告代码 祝你圣诞节快乐 2009年新年快乐