zoukankan      html  css  js  c++  java
  • 淘宝网以图换字

    网络不好的情况下优先加载html,不加载css,做到网站也能正常使用
     
    方法一:a标签高度设为0,将图片加在padding中把a标签撑开
     
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style>
    
        h1 a{
        display: block;
        width: 180px;
        height: 0px;
        padding-top: 70px;
        text-indent: -9999px;
        background: url("../1-html+css/图片/tb.png") 0 0 no-repeat;
        overflow: hidden;
        border: 10px solid blue;
    }
      </style>
    </head>
    <body>
    
      <div>
        <h1><a href="#">淘宝网</a></h1>
      </div>
    
    </body>
    </html>
    View Code

     方法二:用text-indent进行首行缩进,white-space:nowrap;强制文本不换行,然后进行溢出部分隐藏

    <!-- 
    
        网络不好的情况下优先加载html
        不加载css,做到网站也能正常使用
    
     -->
    
     <html>
    
         <head>
            <meta charset="utf-8">
            <title>图片</title>
            <link rel="stylesheet" href="">
            <style type="text/css">
               a{
                   display: inline-block;
                   text-decoration: none;
                   color: #424242;
                   width: 160px;
                   height: 70px;
                   border: 1px solid black;
                   background-image: url(../图片/tb.png);
                   background-size: 160px 70px;
    
                   text-indent: 160px;
                   white-space: nowrap;
                   overflow: hidden;
               }
            </style>
         </head>
    
         <body>
             
            <a href="http://taobao.com" target="_blank">淘宝网</a>
    
         </body>
    
     </html>
    View Code
  • 相关阅读:
    yum源的制作
    债券到期收益率计算公式
    IMP同库Type对象导入报错ORA-02304
    oracle自动挂掉问题分析
    CPP读取dbf文件
    oracle忘记system密码
    沪C转浙A
    业务词汇
    VS2017使用Resharp开发CPP程序
    CPP调用webservice
  • 原文地址:https://www.cnblogs.com/Rooney10/p/12985686.html
Copyright © 2011-2022 走看看