zoukankan      html  css  js  c++  java
  • 制作logo超链接的三种方式


    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    /*-------------------------------方法一:-利用行高------------------------------------------*/
    h1{
    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{
    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{
    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>
  • 相关阅读:
    团队作业3-需求分析设计
    团队作业2
    Gakki赛高-团队介绍
    201521123002 《Java程序设计》第2周学习总结
    201521123002 《Java程序设计》第1周学习总结
    201521123067《Java程序设计》第1周学习总结
    团队作业4--第一次项目冲刺(Alpha版本)7
    团队作业4--第一次项目冲刺(Alpha版本)6
    团队作业4--第一次项目冲刺(Alpha版本) 5
    团队作业4--第一次项目冲刺(Alpha版本) 4
  • 原文地址:https://www.cnblogs.com/shengliang74/p/5425110.html
Copyright © 2011-2022 走看看