CSS产生的特殊效果

作者:佚名 时间:2024-11-19 17:04:34 

    经常有朋友问:如何使有超级连接的文字不出现下划线,如何使鼠标移动到超连上产生变色的效果?其实这些通过传统的方法是办不到的。而使用CSS的控制却可以非常轻松地作到,而且,页面的代码也不会臃肿。

    ★★先看看超连没有下划线的例子:

    例子1: 这个连接可以去页面底部,但是没有下划线。

    是如何作到这一点的呢?在和之间加上如下的CSS语法控制:

    如果要产生变色效果,就要用到另一个属性了,这就是 hover,看下面的代码。

a:hover { text-decoration: none ; color: yellow } 表示鼠标移动到连接文字上时,文字修饰风格为“无”(即没有下划线),同时显示黄色。

a:hover { text-decoration: underline; color: green } 表示鼠标移动到连接文字上时,文字修饰风格为“underline”(即下划线),同时显示绿色。

    ★★扩展一下:如果我们同时用下面2种属性,会产生什么效果呢?


a:link { text-decoration: none ; color: yelloe ; font-size: 9pt }

a:hover { text-decoration: underline; color: green ; font-size: 12pt }

    连接文字没有下划线,黄色显示,9pt大小。鼠标移动到连接上时出现下划线,颜色为绿色,字符大小12pt。是不是变色了?而且字体由于大小变化,就有动感了,似乎一下子扩大了。

    总之,所有前面讲过的方法,要综合运用才可以呀。

    ★★注意:并不是所有的浏览器都支持所有的选项属性。自己在多个浏览器上测试一下。


标签:
0
投稿

猜你喜欢

  • Python多线程爬虫实战_爬取糗事百科段子的实例

    2021-02-15 16:58:21
  • 解决杀毒软件误删asp文件的方法

    2008-10-21 21:23:00
  • 详解Python连接oracle的问题记录与解决

    2021-04-07 09:38:41
  • PyQt5每天必学之布局管理

    2022-11-19 08:14:00
  • Python 多线程爬取案例

    2022-11-17 16:02:06
  • mysql学习笔记之帮助文档

    2024-01-19 08:14:36
  • 一篇文章带你学习Python3的高级特性(2)

    2021-03-29 13:56:40
  • 对python numpy.array插入一行或一列的方法详解

    2022-12-08 15:44:07
  • 利用Python脚本生成sitemap.xml的实现方法

    2021-03-16 22:32:32
  • 解决django migrate报错ORA-02000: missing ALWAYS keyword

    2023-04-15 14:19:54
  • python正则表达式用法超详细讲解大全

    2023-09-13 03:27:07
  • MYSQL开启远程访问权限的方法

    2024-01-14 02:17:04
  • python requests模拟登陆github的实现方法

    2022-10-05 21:37:48
  • Python如何重新加载模块

    2022-09-08 21:31:56
  • 一个数组随机不重复问题

    2008-09-02 20:05:00
  • Python实现快速排序的方法详解

    2022-08-29 13:08:35
  • MySql批量插入优化Sql执行效率实例详解

    2024-01-18 07:52:06
  • 微信小程序 image组件binderror使用例子与js中的onerror区别

    2024-04-19 09:42:56
  • 微信小程序中使用wxss加载图片并实现动画效果

    2024-04-29 13:15:27
  • python 多线程死锁问题的解决方案

    2023-12-28 03:35:31
  • asp之家 网络编程 m.aspxhome.com