Question

我正在尝试为网站创建一个可下载的vcard（该网站目前是本地的，因此我无法向您展示前端）。我所做的是在一个关于我希望vcard显示在我的社交媒体图标旁边的部分。问题是它没有正确对齐。我点击下载打开一个新标签，它没有下载。我认为问题在于href代码

我的代码和以前一样。（我正在使用我的LinkedIn图像进行测试）。我对此进行了研究，我看到一些应用JS代码，但我不想使用js或php。

＆＃13;

.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;
    }
  }
}

＆＃13;

<!--/ #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>
				<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>
				<a href="mailto:imtiazabbas02@gmail.com"><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>

＆＃13;

Answer 1

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

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

AddType text/x-vcard .vcf

您还可以在Stackoverflow上阅读此主题：vCard .vcf file download browser support - godaddy

我有一个网站下载vcard的问题

1 个答案: