首页 > 代码库 > 一个可以链接的LOGO编辑

一个可以链接的LOGO编辑

在这所用的方法是:css

首先你要定义一个超链接,使用a标记如:

<h1>
<a href="http://www.mamicode.com/跳转的网页">文字</a>
</h1>

这个h1可以是其他的块级元素,也可以是行类元素,但是要用display:block转换成行类块级元素。

属性:

方法1.

h1{
width: 10px;
height: 10px;
background-image: url("图片名称");
overflow: hidden; 超出的部分隐藏
}
h1 a{
display: block; 行类转成块级
line-height: 700px; 定义了行高使内容超出父级的宽高,就看不见内容了
}
方法2.
h1{
width: 10px;
height: 10px;
background-image: url("图片名称");
}
h1 a{
color: transparent;     内容颜色定义为透明,也看不见了
}
方法3.对a 使用缩进 text-indent:-50px 也看不见


最直接的方法就是:直接a里面插入图片。但是不符合语义化。

<h1>
<a href="http://www.mamicode.com/跳转的网页">
    <img src="http://www.mamicode.com/路径" alt="图片"/>
   </a>
</h1>
 

一个可以链接的LOGO编辑