会飞的鱼

關 於 藝 術 丨 源 於 生 活
關 於 理 想 丨 始 於 我 們
首页 » 电脑网络 » 怎么去掉HTML图片链接蓝色边框?

怎么去掉HTML图片链接蓝色边框?

HTML标签

把图片属性中的边框设为0,或者直接在img标签中加入border="0"
<a href="链接地址"><img src="图片地址" border="0"></a>

如果是文字链接底部的下划线就加个样式:
<style>a{ text-decoration:none}</style>

 

CSS
<HTML>
<head>
<style type="text/css">
img {border-width: 0px 0px 0px 0px} <!--就是这行 代码起作用-->
</style>
</head>

 <BODY>
  <A HREF="http://www.w3schools.com/images/w3default80.jpg">
  <img src="http://www.w3schools.com/images/w3default80.jpg">
  </A>
 </BODY>
</HTML>

CSS解决思路
一般的办法是给img标签加上border="0",虽然能解决问题,但如果这样的图片有N个,那就要手工加N次border="0",效率太低,其实如果注意到CSS的Selector(选择符)中有一类是针对HTML的标签元素,那就方便多了。
具体步骤
     代码示例:
    
<style>
     img{border:0px}
     </style>
     <a href="http://www.flash8.net"><img src="demo.gif"></a>

技巧:技巧:如果需要定义border为0的不止img对象,可以都写在一起,各对象间用逗号隔开,如

input,img,body,textarea{border:0px}

     象这样的写法叫选择符分组(Grouping)。
提示:以class方式定义的CSS称为类选择符(Class Selector),只对设置了class属性的对象应用样式。如:

<style>
.demo{color:green;text-decoration:underline}
.class1{color:red;font:bold 12px Tahoma;}
</style>
<span class="demo">demo DEMO</span>
<div class="class1">demo DEMO</div>
<span class="demo class1">demo DEMO</span>

代码运行效果如图2.2.1所示,请读者自行体会用法。

图2.2.1 类选择符的应用演示
       
        另外,还有一个与类选择符类似的ID选择符 (ID Selector),它以文档对象模型(DOM)中作为对象的唯一标识符的ID作为选择符,代码示例:

<style>
#demo{border:1px solid #666;background:#eeeeee}
</style>
<input id="demo">
<input id="demo">
<input id="demo">

特别提示
代码运行效果如图2.2.2所示,可以看到,带链接的图片的蓝色边框已经在CSS中去掉了。

图2.2.2 去除带链接的图片边框

特别说明


本例主要是类型选择符(Type Selector)的应用。类型选择符以DHTML语言对象类型作为选择符,选择符中所设置的样式将对所有同类型对象生效,比如本例定义的img类型选择符,就对所有标签为<img>的对象产生作用。

文章如无特别注明均为原创! 作者: 璀璨, 转载或复制请以 超链接形式 并注明出处 璀璨's Blog
原文地址《 怎么去掉HTML图片链接蓝色边框?》发布于2011-6-9

分享到:
打赏

评论

游客

看不清楚?点图切换
切换注册

登录

您也可以使用第三方帐号快捷登录

Q Q 登 录
切换登录

注册

sitemap