登录 | 注册 | FAQ
Anonymous

Remove border around image link

+ 发表回复

3 篇帖子 分页: 1 / 1


Remove border around image link

lisaja » 周二 9月 21, 2010 1:34 pm

I am on lesson 7 in the HTML tutorial and have learned to turn a image into a link (example 4). But how do I remove the blue border around the image? It doesn't look nice!

Thank you,

Lisa
头像

lisaja

  • 帖子: 6
  • 注册: 周二 9月 21, 2010 2:24 pm

Re: Remove border around image link

HTML.net » 周二 9月 21, 2010 3:23 pm

lisaja 写道:..how do I remove the blue border around the image?


Hi Lisa,

This is best done with CSS which is next step after HTML. But here is a hint:

<a href="http://www.html.net"><img src="logo.png" style="border-style: none" /></a>

- Andreas, HTML.net
头像

HTML.net
Site Admin

  • 帖子: 1194
  • 注册: 周六 9月 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.

Re: Remove border around image link

Maujor » 周二 9月 21, 2010 3:29 pm

To get rid of the blue border you can use the border attribute for the img element like so:
HTML:
代码: 全选
<a href="#"><img src="path to image"  alt="" border="none"></a>

This isn't a good solution since it mixed up presentation with markup. So a better solution is using style rule. (Have you already read the HTML.net CSS tutorial at:http://html.net/tutorials/css/?
CSS:
代码: 全选
<style type="text/css">
a img {border:none;}
</style>

HTML:
代码: 全选
<a href="#"><img src="path to image"  alt=""></a>
头像

Maujor

  • 帖子: 3
  • 注册: 周二 9月 21, 2010 3:05 pm
--
Maurício "Maujor" Samy Silva
http://maujor.com


+ 发表回复

分页: 1 / 1