摘要：
制作logo超链接的三种方式... 制作logo超链接的三种方式
weixin_30575309
于 2016-04-23 17:45:00 发布
544
收藏版权<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> /*-------------------------------方法一：-利用行高------------------------------------------*/ h1{ width: 200px;/*设置logo图片的宽度*/ height:100px;/*设置logo图片的高度*/ background-image: url("taobao.jpg");/*logo图片的地址*/ background-size: 100% 100%;/*让logo全部显示*/ overflow: hidden;/*让超出图片的部分隐藏*/ } h1 a{ display: block; line-height: 260px;/*设置a标签的行高大于logo的高度2倍*/ } /*-----------------------------方法二：利用首行缩进---------------------------------------------*/ h2{ width: 200px;/*设置logo图片的宽度*/ height:100px;/*设置logo图片的高度*/ background-image: url("taobao.jpg");/*logo图片的地址*/ background-size: 100% 100%;/*让logo全部显示*/ text-indent: -1000px;/*设置缩进为负数让文字消失*/ } h2 a{ display: block; } /*-----------------------------方法三：利用定位---------------------------------------------*/ h3{ font-size: 10px; position: relative; } h3 span{ width: 200px;/*设置logo图片的宽度*/ height: 100px;/*设置logo图片的高度*/ background-image: url("taobao.jpg");/*logo图片的地址*/ background-size: 100% 100%;/*让logo全部显示*/ position: absolute;/*设置logo图片的位置*/ left: 0; top: 0; } </style></head><body><p> ---------方法一：-利用行高---------</p><h1> <a href="http://www.taobao.com">淘宝网</a></h1><p> --------方法二：利用首行缩进--------</p><h2> <a href="http://www.taobao.com">淘宝网</a> <a href="http://www.taobao.com">淘宝网</a> <a href="http://www.taobao.com">淘宝网</a> <!--三行超链接是为了让超链接的总高度大于logo图片高度,这样才能使得点击图片所有地方都能有超链接--></h2><p> --------方法三：利用定位---------</p><a href="http://www.taobao.com"> <h3> <span></span> <!--给span标签设置宽高，插入logo图片将‘淘宝网’遮盖住。（此方法不适用于背景透明的png图片）--> 淘宝网 </h3></a></body></html>
还没有评论，来说两句吧...