首先来看一张淘宝官网的图片
这个logo是图片,它的作用是点击跳转到一个页面
既然这样,那就是写个a链接就能做到
但是有网速不好的时候,如果网速的不好,css文件,js文件是加载不出来的,那这里怎么办
下面介绍了两种方法,可以酌情使用
<a href="http://www.taobao.com">淘宝网</a>
a{
/*超链接三件套*/
text-decoration: none;
color: #424242;
display: inline-block;
background: url(https://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png);
width: 142px;
border: 1px solid #000;
/*
方法一:将文字赶出图片框,强制不能换行,然后将溢出文字隐藏
text-indent: 142px;
white-space: nowrap;
overflow: hidden;
*/
/*
方法二:淘宝用的方法
将a标签的高度设置为0,a容器会变成一条线,文字也会被挤出容器
文字是内容,内边距不能展示内容,但是可以展示边框,通过内边距将容器撑开,展示出图片
将溢出的文字隐藏
*/
height: 0px;
padding-top:58px ;
overflow: hidden;
}
ok