向链接添加其他形式

请把鼠标指针移动到下面的链接上，看看它们的样式变化。

<!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:‘微软雅黑‘;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>

<body>
<p>请把鼠标指针移动到下面的链接上，看看它们的样式变化。</p>

<p><b><a class="one" href="http://home.cnblogs.com/penger/" target="_blank">这个链接改变颜色</a></b></p>
<p><b><a class="two" href="http://home.cnblogs.com/penger/" target="_blank">这个链接改变字体尺寸</a></b></p>
<p><b><a class="three" href="http://home.cnblogs.com/penger/" target="_blank">这个链接改变背景色</a></b></p>
<p><b><a class="four" href="http://home.cnblogs.com/penger/" target="_blank">这个链接改变字体</a></b></p>
<p><b><a class="five" href="http://home.cnblogs.com/penger/" target="_blank">这个链接改变文本的装饰</a></b></p>
</body>

</html>

向链接添加其他形式,布布扣,bubuko.com

时间： 2024-08-06 07:46:14

向链接添加其他形式的相关文章

JavaScript网站设计实践（三）设计有特色的主页，给主页链接添加JavaScript动画脚本

原文:JavaScript网站设计实践(三)设计有特色的主页,给主页链接添加JavaScript动画脚本一.主页一般都会比较有特色,现在在网站设计(二)实现的基础上,来给主页添加一点动画效果. 1.这里实现的动画效果是:当鼠标悬停在其中某个超链接时,会显示出属于该页面的背景缩略图,让用户知道这个链接的页面大概内容是什么. 效果图: 2.实现这个效果的思路 (1)把主页的几个链接的背景图片缩放到150px*150px,拼成一张750*150的图片,并保存为slideshow.png,存放到ima

导航链接添加背景图片替换样式

HTMl代码: <div class="welcome_button"> <ul> <li><a href="#">signup</a></li> <li><a href="#">login</a></li> </ul> </div> CSS样式: <style type="text/cs

HTML5 css链接添加不同的样式

可以用css的选择器来为不同链接添加不同的样式,但经过测试,不知道为什么用id选择器并未成功,经过测试发现用class选择器是可行的,相关案例如下: 本案例是为了实现链接的文本跳转(由页面底部调到首部)和为不同链接添加不同样式,其中,底端链接单独添加了样式,代码如下: HTML5代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <

吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet

变形PE头添加节形式感染学习笔记

原文:http://www.pediy.com/kssd/index.html -- 病毒技术 -- 病毒知识 -- Anti Virus专题 1> 变形PE头的原理: 这里的变形PE头的思路是用的比较方便的方法,就是将IMAGE_DOS_HEADER 和 IMAGE_NT_HEADER 结构融合到一起.因为我们都知IMAGE_DOS_HEADER和IMAGE_NT_HEADER的结构成员很多我们是用不到的,所以我们可以按照相应的结构排列,把这些无用的结构成员,融合到一起后,替换成一些有用的成员

使用python实现将截图上传到七牛服务器，并将七牛生成的外部链接添加的剪切板的功能

目的:在使用markdown来记录文档时,不必每次都将截图存到文档中,只需将图片链接存放到文档中,此时就想到了需要使用云服务器和自动上传文件的功能 OS: Ubuntu 15.10 version 0.1: 工具:截图工具shutter, 剪切板操作工具: xsel 源代码: 1 #!/usr/bin/python 2 import time ##时间模块,使用时间戳生成唯一的文件名 3 import commands ##python中的执行shell命令的模块 4 import os ##同

解决虚拟机正在决定eht0 的ip信息失败无链接-- 添加虚拟网卡

添加步骤:1.进入设备管理器 2.点下一步3.继续下一步 4.继续往下走

a标签链接添加颜色

定义链接样式 CSS为一些特殊效果准备了特定的工具,我们称之为"伪类". 其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类, 它们分别是: 1.a:link,定义正常链接的样式: a:link { color:#FF0000; text-decoration:underline; 2.a:visited,定义已访问过链接的样式: a:visited { color:#00FF00; text-decoration:none; } 3.a:hover,定

Swift简单实现一个常规条款、免责声明文字+带有链接的展示形式

效果: IMG_F08DABE063A6-1.jpeg class DisclamerView: UIView { //@objc weak var vc:UIViewController? //自定义协议 @IBInspectable var diy_protocol:String = "diyprotocol" //超链接地址 @IBInspectable var disclamerURLStr:String = " " //条款.免责声明描述文字 @IBIns