入门:用CSS实现网页超链接类似按钮陷下的效果

css|按钮|链接|网页

  超链接的hover状态,通常可以改变颜色,增加或去除下划线等效果来提醒访客。我们也看到过有一些文字链接,当鼠标移上去时(hover状态)产生位移,类似于按钮陷下的效果,这该如何实现呢?

  其实是应用了position属性,关于此属性,可以参考这里。

  图片的按钮陷下效果制作原理是一样的。我们看下面的代码:

position: relative; top:1px; left:1px;

  这段代码的含义为,相对定位,距上部位移1象素,距左部位移1象素。我们可以将上面的代码加入到超链接的hover状态中,就实现了类似按钮陷下的效果。

  我们看下面的实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>www.webjx.com</title><style type="text/css"><!-- img {border:none}a { text-decoration:none;color:#c00;} a:hover { position: relative; top:1px; left:1px;color:#666;}--></style></head><body><a href="http://www.webjx.com/">www.webjx.com</a><br /><br /><a href="http://www.webjx.com/"><img src="/UploadPic/2007-7/200777202523877.gif" alt="webjx_com" title="www.webjx.com"></a></p></body></html>

    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

时间: 2024-09-17 04:18:29

入门:用CSS实现网页超链接类似按钮陷下的效果的相关文章

拒绝单调 让网页超链接拥有多姿多彩的下划线

链接|网页 CSS本身没有直接提供变换HTML链接下划线的功能,但只要运用一些技巧,我们还是可以让单调的网页链接下划线变得丰富多彩. 一.基本原理 首先,自定义HTML链接下划线的第一步是创建一个图形,在水平方向重复放置这个图形即形成下划线效果.如果要显示出下划线背后的网页背景,可以使用透明的.gif图形. 其次,如果下划线图形的高度较大,则必须适当增加文本的高度,使得一行文本的底部与下一行文本的顶部之间有较大的空间,例如p { line-height: 1.5; }. 自定义链接下划线示例 第

让网页超链接拥有多姿多彩的下划线

链接|网页 CSS本身没有直接提供变换HTML链接下划线的功能,但只要运用一些技巧,我们还是可以让单调的网页链接下划线变得丰富多彩. 一.基本原理 首先,自定义HTML链接下划线的第一步是创建一个图形,在水平方向重复放置这个图形即形成下划线效果.如果要显示出下划线背后的网页背景,可以使用透明的.gif图形. 其次,如果下划线图形的高度较大,则必须适当增加文本的高度,使得一行文本的底部与下一行文本的顶部之间有较大的空间,例如p { line-height: 1.5; }. 自定义链接下划线示例 第

css 入门教程:css控制input与bottn样式

哈哈今天我们来看看,css 入门教程:css控制文本输入框与按钮的css样式,好了我们先来看看效果图. 现在看到了我的文本输入框是不是淡色的背景与边框哦.现在来看看我们下面是怎么实现的吧.  <p align="center"><input name="" type="submit" class="btn" value="提交"></p>     <p align=

《HTML CSS JavaScript 网页制作从入门到精通 第3版》—— 导读

前言 HTML CSS JavaScript 网页制作从入门到精通 第3版十多年前,Internet在国内开始流行.其中,网页作为互联网的主要媒介受到了电脑爱好者的广泛关注.由于当时网速的限制,网页主要承载文本.图片等简单数据,使用Dreamweaver或Frontpage软件即可轻松制作网页.而今天,Internet领域已经改变了太多,在软件上点几下.拖几下即可完成整个网站的方法已经完全不适用了.现在的网页制作领域综合了多种技术,新一批的初学者该怎样学习网页制作?目前大部分制作网页的方式都是运

《HTML CSS JavaScript 网页制作从入门到精通 第3版》—— 第02章 HTML基本标记

第02章 HTML基本标记 HTML CSS JavaScript 网页制作从入门到精通 第3版 一个完整的HTML文档必须包含3个部分:一个由元素定义的文档版本信息:一个由 定义各项声明的文档头部:一个由定义的文档主体部分.作为各种声明信息的包含元素出现在文档的顶端,并且要先于出现.而用来显示文档主体内容.文字是网页中最基本的信息载体,文字通过不同的排版方式.不同的设计风格排列在网页上,提供了丰富的信息.文字的控制与布局在网页设计中占了很大比例,因此掌握好文字的使用,对于网页制作来说是最基本的

CSS定义网页布局漂亮的Button按钮代码

css定义网页布局漂亮的button按钮代码 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht

CSS入门:如何在网页中插入CSS

css|插入|网页 前面我们了解了CSS的语法,但要想在浏览器中显示出效果,就要让浏览器识别并调用.当浏览器读取样式表时,要依照文本格式来读,这里介绍四种在页面中插入样式表的方法:链入外部样式表.内部样式表.导入外表样式表和内嵌样式. 1. 链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用<link>标记链接到这个样式表文件,这个<link>标记必须放到页面的<head>区内,如下: <head>--<link href=&

CSS初学者入门:使用table布局网页不明智

使用Table布局页面为什么是不明智的? 大家看到标题,不要误解认为在页面中不能使用Table,而是可以使用Table,但是尽量不要用Table去布局页面,为什么这么说呢,因为使用Table布局页面会使页面失去灵活性,怎么个灵活法呢,比如今天你好不容易做出来的页面,第二天老板说我不喜欢登录模块放到右边,还是放到左边,通知板块放到右侧去,页面风格最好一个月换一种,如果遇到这种老板,提出这种要求,并且你的页面是用Table布局的,那么你会崩溃的,工作量那是大大滴~,如果不相信的话,你们自己可以找个页

利用PHP和CSS改变网页文字大小

  用PHP和CSS改变网页文字大小--在设计网站的时候,要牢记一点:并不是所有的访问者都是神采奕奕的年轻人,而且他们也不一定完全熟悉Web浏览器的各种使用方法. 在设计网站的时候,要牢记一点:并不是所有的访问者都是神采奕奕的年轻人,而且他们也不一定完全熟悉Web浏览器的各种使用方法.聪明的设计者了解这一点,他们常常将各种特殊的可访问特性融入网站的设计中,这样,即使是年长者或是残疾人士都可以方便舒适地使用网站,而不必花费额外的力气. 文本大小调节器是最有效的可访问特性中的一个,任何网站都可能需要