制作logo超链接的三种方式

最新推荐文章于 2021-12-26 00:34:59 发布

weixin_30575309

最新推荐文章于 2021-12-26 00:34:59 发布

阅读量752

点赞数

原文链接：http://www.cnblogs.com/shengliang74/p/5425110.html

版权


<!DOCTYPE html>
<html>
<head lang="en">
    <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>