我在为网站下载电子名片时遇到问题

问题描述：

我正在尝试为网站创建一个可下载的电子名片（该网站目前是本地的，所以我无法向您显示前端）。我所做的是在一段关于我想要vCard显示在我的社交媒体图标旁边的部分。问题是它没有正确对齐。我点击下载打开一个新标签，它不下载。我相信问题是与我的代码是一样的href代码我在为网站下载电子名片时遇到问题

。（我正在使用我的LinkedIn图片进行测试）。我研究了这一点，我看到一些应用JS代码，但我不喜欢使用js或php。

.card { 
 
    width: 300px; 
 
    margin: 2em auto; 
 
    text-align: left; 
 
    padding: 1em; 
 
    overflow: auto; 
 
    background-image: url(../../assets/img/linkedin-icon.png); 
 
    
 

 
    a { 
 
    padding: 1em; 
 
    text-decoration: none; 
 
    color: #00ffbb; 
 
    background: #000; 
 
    font-weight: bold; 
 
    
 
    &:hover { 
 
     color: #000; 
 
     background: #00ffbb; 
 
    } 
 
    } 
 
}

<!--/ #About --> 
 
      <section id="about" name="about"></section> 
 
      <div id="colourblock">      
 
       <div class="row"> 
 
        
 
        <div class="col-md-4"> 
 
            <div class="aboutprofile"> 
 
             <img class="center" src="../../assets/img/about-section.png" alt="About" > 
 
            </div> 
 
        </div> 
 
     
 
        <div class="col-md-8"> 
 
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sitDonec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sitDonec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit. 
 
          </p> 
 
          <br> 
 
          <p> 
 
\t \t \t \t <a href="www.linkedin.com" target="_blank"><img src="../../assets/img/linkedin-icon.png" alt="About" ></a> 
 
           <a href="www.twitter.com" target="_blank"><img src="../../assets/img/twitter-icon.png" alt="Twitter" ></a> 
 
\t \t \t \t <a href="mailto:[email protected]"><img src="../../assets/img/email-profile.png" alt="Email" ></a> 
 
           <div class="card"> 
 
    
 
    <a href=" ../../assets/Imtiaz_Abbas.vcf" id="dl" target="_blank" download="Imtiaz_Abbas.vcf">Download contact</a> 
 
    </div> 
 

 

 
          </p> 
 
        </div> 
 
     
 
       </div> 
 
      </div>

答

你有2个问题。首先是CSS问题。因为你显然是一个初学者，我建议你建立链接给你VCard的方式就像你用twitter和linkedin做的一样。不要使用div，也不要使用背景，只需使用链接即可。

第二个问题是vcf文件下载。我知道你想避免复杂的解决方案。最简单的解决方案是在你的.htaccess文件中添加一个新的MIME类型（如果你没有的话，你可以在网页的根目录下创建）。你应该这样行添加到您的htacess文件：

AddType text/x-vcard .vcf

你也可以阅读本＃1线：vCard .vcf file download browser support - godaddy

我在为网站下载电子名片时遇到问题

相关推荐