`
SnailWong
  • 浏览: 183943 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

web设计中的一些小技巧

    博客分类:
  • web
阅读更多

去掉链接周围的虚线框:

当链接指向为页外目标时,我们点击该链接,其四周会出现一个虚框,文字链接和图片链接都会如此。去除虚框可以用JavaScript的this.blur()实现,然而,每一个超链语句都写上this.blur()工作量会很大,我们有必要寻求一种高效的方法。

IE从5.5版本开始支持Web行为的概念。这些行为是由后缀名为.htc的脚本文件描述的,它们定义了一套方法和属性,程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。Web行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件,而不是必须让用户下载二进制文件(例如ActiveX控件)来完成这个功能。Web行为还是推荐的扩展IE对象模型和控件集的方法。微软在它的开发者站点上的DHTML行为库栏目里提供了几个定制的Web行为:WebService行为。

我们就是利用上述.htc文件来轻而易举地实现成批去除超链虚框。以下内容保存为后缀名为.htc的文件(使用时请将全角标点符号改为小角):

<public:attach event="onfocus" onevent="quit()" />
<script language="javascript">
function quit(){
this.blur();
}
</script>

然后,在需要去除超链虚框的页面的<head>和</head>之间加入:

<style type="text/css">
a {behavior:url("htc文件")}
</style>

如果页面已经有了style标签,只需要将 a {behavior:url("htc文件")} 一句插入里面即可。

这样,该页面的超链在点击之后的虚框将不复存在,页面显得干干净净。

去掉链接时的虚框只要在你的样式表中加入以下代码,就可以去掉链接时烦的的虚框。

a,area { blr:expression(this.onFocus=this.blur()) } /* for IE */
:focus { outline: none; } /* for Firefox */ 

是不是很简单.

 

简而言之,三种方法:

1.将下列代码保存为.htc文件:

<public:attach event="onfocus" onevent="quit()" /> 
<script language="javascript"> 
function quit(){ 
this.blur(); 
} 
</script>

 然后在样式表的元素中加入:

a {behavior:url("htc文件")} 

如:

<style type="text/css"> 
a {behavior:url("htc文件")} 
</style>

 2.直接在样式表元素中加入:

a,area { blr:expression(this.onFocus=this.blur()) } /* for IE */
:focus { outline: none; } /* for Firefox */

 

 3.在每个链接和按钮中加入:(每个都要加,比较麻烦)

 

<a   href="#" onfocus="this.blur()">点击这里</a>

 

 

让链接失效:

<a href="#" onclick="window.open('somepage.htm');return false">link</a> 

 

分享到:
评论

相关推荐

    web设计小图标

    本资源“web设计小图标”包含了一千个精心设计的Web图标,旨在为开发者和设计师提供丰富的选择,满足他们在网页设计中的各种需求。 这些图标可能涵盖了一系列常见的功能类别,如导航、社交网络、文件操作、编辑工具...

    Web站点设计技巧

    在探讨“Web站点设计技巧”这一主题时,我们需要理解网页设计的重要性以及如何通过有效的策略提升用户体验和网站性能。Web设计不仅是关于美观的视觉呈现,...这些文件可以作为进一步学习和实践Web设计技巧的参考资料。

    webUI设计作业4

    设计师需考虑移动优先策略,先设计小屏幕布局,再扩展到大屏幕。同时,适应各种分辨率和屏幕比例,确保内容在任何设备上都能适配。 交互元素,如按钮、表单、滑块等,是用户与网站交互的桥梁。它们需要具有良好的...

    web界面设计原则

    在Web设计中,关键信息和行动号召应置于这一区域,以吸引用户的即时注意力并促进互动。 ##### 费茨定律 - 费茨定律阐述了使用指点设备到达目标所需时间与目标距离和大小的关系。这一原理指导设计师在布局时考虑...

    Asp web课程设计

    ### Asp Web课程设计知识点详解 #### 一、课程设计题目选择与要求 根据课程设计的要求,学生需要从以下几个选项中选择一个主题进行设计: 1. **个人网站**:适合展示个人信息、技能、经历等内容。 2. **新闻发布...

    250个HTML和Web设计的秘密(PDF)

    书中可能还会揭秘一些Web设计的实战技巧,如如何使用CSS(Cascading Style Sheets)来控制页面样式,实现复杂的布局和动画效果。CSS3的新增功能,如伪类、过渡、动画和 Flexbox 或 Grid 布局也可能被详细讲解,这些...

    普通Web设计师提高SEO技巧

    ### 普通Web设计师提高SEO技巧 随着互联网技术的发展,搜索引擎优化(SEO)已成为网站建设和维护中不可或缺的一部分。对于Web设计师而言,在关注网站外观与用户体验的同时,掌握一定的SEO技巧显得尤为重要。本文将...

    超越CSS:Web设计艺术精髓 transcending css the fine art of web design

    《超越CSS:Web设计艺术精髓 transcending css the fine art of web design》...通过阅读《超越CSS:Web设计艺术精髓》,设计师可以更深入地理解这些技术,并在实践中应用,从而创造出更具艺术性和用户体验的网页作品。

    web课程设计课件

    在本套"Web课程设计课件"中,你将深入学习到构建网页所需的基础知识与技术,主要包括HTML、CSS和JavaScript三大核心元素。这三者是网页开发的基石,它们协同工作,使得网页具备结构、样式和交互性。 1. HTML...

    常用web设计图标素材

    在Web设计领域,图标是一种...综上所述,"常用Web设计图标素材"这个资源对于网页设计师来说是宝贵的参考资料,它涵盖了日常设计中可能遇到的各种场景,通过合理的运用和设计,可以极大地提升网站的视觉效果和用户体验。

    Web网页设计实验报告.doc

    Web网页设计实验报告 一、设计目的 在Internet飞速发展的今天,互联网成为人们快速获取、发布和传递信息的重要渠道,它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位...

    web 课程设计报告

    在本Web课程设计报告中,我们将探讨HTML、CSS这两个核心Web开发技术的基本概念及其在构建网页中的应用。这份报告是针对初学者或者对Web开发有一定了解但经验不足的学生编写的,旨在帮助他们理解并完成课程任务。 **...

    WEB设计大全

    《WEB设计大全》是一部全面涵盖WEB设计领域的参考资料,旨在为初学者和专业人士提供深入的理解和实践指导。在这一领域,设计师需要掌握众多技能,包括视觉设计、交互设计、用户体验(UX)设计、前端开发以及网站优化...

    web程序设计课程作业

    【标题】:“Web程序设计课程作业” 在计算机科学与信息技术领域,Web程序设计是一门至关重要的课程,它涵盖了创建和维护交互式Web应用程序所需的技术和概念。本“Web程序设计课程作业”旨在帮助学生深入理解并实践...

    web程序设计实验报告

    需要注意的是,实验中提到的部分细节可能未完全复刻原网页,但足以展现基本的Web设计技巧。 实验源代码中展示了部分CSS样式,如`div.body1`定义了主体区域的宽高和背景色,而`a.bb`则是定义了链接的样式。其他如`#...

    Web设计实战教程资源下载

    在“Web设计实战教程”中,你可能会学到如何运用这些概念和技巧,通过实际项目来提升你的设计和开发能力。提供的资源如"codepub.com说明.txt"可能包含了教程的详细说明和使用指南,"源码网.url"可能是指向更多相关...

    响应式Web设计HTML5和CSS3实战第2版_html_

    响应式Web设计是一种现代网页开发方法,旨在创建能够适应不同设备和屏幕尺寸的网站。HTML5和CSS3是实现这一目标的关键技术。本资源——"响应式Web设计HTML5和CSS3实战第2版"——提供了深入的指导,帮助开发者理解和...

    web网页课程设计模板

    【网页课程设计模板】是针对IT教育领域,特别是Web程序设计教学的一种教学工具,旨在帮助学生深入理解Web开发的基础知识,提升他们的编程思维和问题解决技巧,并锻炼科技论文撰写技能。这一课程设计模板包含了以下几...

Global site tag (gtag.js) - Google Analytics