您好!欢迎您光临本站! 体育 I 论坛 I 交友 I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>建站知识>>>建站与网页制作知识>>>CSS实验室
CSS实验室
发表日期:2007/7/19 1:44:00 出处:中国教程网 作者:未知 发布人:gxlan88 已被访问 2129

 

CSS技巧加上巧妙的思路,尽在CSS实验室

   动态的a标签(一)——改变常见的CSS属性和背景图片

    CSS中对于链接的样式定义在各种网页中都十分常见,其中又以去掉链接的下划线最为常用。然而搭配上一点点创意,和一些“非常规”的用法,CSS中对于a标签的样式定义是可以发挥许多奇妙的作用的。

    a标签最常用的CSS定义——去掉下划线

    我们在网页中加入下面的CSS定义,就可以让页面内class为cai的容器内的链接在平时不显示下划线。只有鼠标经过的时候才改变成红色并且显示下划线。

<style type="text/css">
.cai a{ text-decoration:none; color:orange;}
.cai a:hover{ text-decoration:underline; color:red;}
</style>

    实例:  超级链接 超级链接 超级链接 超级链接

    其实我们还可以利用对于链接的样式定义来改变许多其他的CSS属性,从而起到提示的作用。

   a标签的其他玩法

    以前在蓝色理想看到过一个大概叫“CSS做的放大镜效果的”帖子。那时候根本不知道什么叫CSS,只是感觉看起来很有意思,后来才明白那就是利用CSS中对a的样式定义实现的。 后来又看了许多例子,才知道我们还可以在<a>和</a>之间插入一个span来实现一些隐藏/显示的效果。当然了,有我们自己的创意,还有更多的玩法等待开发哦。

    当然了,无论如何,我们都要遵循一些基本的原则,比如我们不能让自己链接与普通文字好看起来一样或者十分接近。好了,下面我们就来看看我们究竟可以让a标签看起来像什么样子。

    动态的a标签(一)——改变常见的CSS属性

    同时改变a的几种基本属性

    我们同时改变a的“盒子”大小、背景颜色、字体大小、粗细等等。

<style type="text/css">
.abox a { height:20px; text-decoration:none; text-align:center}
.abox a:hover { height:30px; padding:5px; margin:-6px; border:1px solid; font-size:16px; font-weight:bold;color:red; background-color:#CCCCCC;}
</style>

    实例:一段文本之中的超级链接,当鼠标划过的时候会有明显的提示。

    利用这个思路的更多例子

    当我们把连续的超级链接放在一起,并且应用上面的简单思路,就可以做出一些比较不错的效果。比如下面这个放大镜和链接列表。

  1. 动态的a标签(一)——改变常见的CSS属性
  2. 动态的a标签(一)——改变常见的CSS属性
  3. 动态的a标签(一)——改变常见的CSS属性
  4. 动态的a标签(一)——改变常见的CSS属性
  5. 动态的a标签(一)——改变常见的CSS属性

    改变背景图片

   变换a标签的背景图片

    变换背景图片对于提示也是一种很好的办法。可以是两长不太一样的图片,也可以是从没有背景图片到有背景图片的过度。

<style type="text/css">
.aback a{ background:url(02.gif) no-repeat left;text-align:center; text-decoration:none; padding-left:12px;}
.aback a:hover{ background:url(02-2.gif) no-repeat left;}
</style>

    实例:  超级链接 超级链接 超级链接 超级链接

    利用这个思路的更多例子

使用GIF图片会得到更好的效果,比如下面这个例子就使用了闪烁的图片。看起来更漂亮一些。

    娱乐性质的背景图片

    看看下面这个用链接做的小动画片,虽然娱乐性质多一些,但是相信还是有一定的实际意义的。比如说在广告,或者是娱乐网站中应用。

   动态的a标签(二)——玩"捉迷藏"的a标签

    制作当鼠标划过时候的小提示况不再是JavaScript的专利了,单纯的依靠对a标签的样式定义我们就可以制作一些简单的小提示效果。原理基本上都是在a标签内在嵌一个<span>,利用它的隐藏与显示的替换来实现提示效果。进入内容(实验中)

 

    上篇: CSS入门教程——总结与应用

    下篇:CSS技巧——XHTML+CSS兼容性解决方案小集

 

 

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:

没有相关评论

 发表评论:

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

山里人网站 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话:QQ:313538590 752398505 联系人:山里人