网页制作小技巧:还网页链接“清白”

仅此一人house

仅此一人house

2016-02-19 19:17

今天天气好晴朗处处好风光,好天气好开始,图老师又来和大家分享啦。下面给大家推荐网页制作小技巧:还网页链接“清白”,希望大家看完后也有个好心情,快快行动吧!

网页离不开链接,而默认链接的表现形式总是千篇一律的蓝色文字加底线,每当我们点击它时,周围会出现虚线框,表示该链接是当前的焦点,影响了美观。不过一些五彩缤纷的链接所付出的代价是添加了大量的代码。我们可以在源文件的链接标签中添加一小段代码屏蔽一些默认属性,图个新鲜。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

首先只要在链接标签中添加onFocus="if(this.blur)this.blur()"这句代码即可屏蔽点击时四周出现的虚线框,如: A href="http://www.cce.com.cn"onFocus="if(this.blur)this.blur()"中国电脑教育报/a 网页刷新后再点击这个链接,是不是不显示虚线框了!OK,我们继续改造,再一步的工作是删除链接上的底线。在源代码的head标签后添加以下三句代码,即可使本页的链接的底线不显示:

  style type="text/css"A {text-decoration:none}/style

保存后再打开网页,链接的表现形式是不是只是蓝色文字了!如果还不够,你还可以改变它的颜色,这个很容易实现:在链接文字前添加font color="#aa0000"这句代码即可使链接文字变成红色。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

网页制作小技巧:还网页链接“清白”

Web开发
网页制作小技巧:还网页链接“清白”

Dreamweaver制作网页小技巧汇集

Web开发
Dreamweaver制作网页小技巧汇集

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

photoshop教程制作简单网页小技巧

PS教程 PS基础
photoshop教程制作简单网页小技巧

CSS定义网页局部链接的技巧

Web开发
CSS定义网页局部链接的技巧

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Dreamweaver网页制作技巧

Web开发
Dreamweaver网页制作技巧

网页小技巧:如何去除超链接的下划线

Web开发
网页小技巧:如何去除超链接的下划线

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Dreamweaver MX 初探 - 第五天(3)

Dreamweaver MX 初探 - 第五天(3)

妙用SQL Server聚合函数和子查询迭代求和

妙用SQL Server聚合函数和子查询迭代求和
下拉加载更多内容 ↓