如何html+css寫網站的logo部分？

網站logo，一般放在h1標籤裏，背景圖片爲Logo, 但是考慮到seo，網站名稱也要寫上的，但是網站logo一般只有一個圖片，文字部分是不會被顯示的，今天我們來看看怎麼做吧！

方法一：

首先寫好HTML結構：

html部分：
<h1>
    <a href="https://blog.csdn.net" alt="CSDN Logo" title="CSDN首頁">
        CSDN
    </a>
</h1>

然後爲a標籤設置背景圖： 

CSS部分：
a {
    display: inline-block;
    width: 90px;
    height: 44px;
    background: url(https://csdnimg.cn/cdn/content-toolbar/csdn-logo_.png?v=20190924.1) no-repeat left top/94px 44px;
    text-indent: 90px;
    overflow: hidden;
}

設置a標籤首行縮進的數值與圖片寬度數值一致，然後文字會被擠出去，再對文字設置溢出隱藏即可！

方法二：

HTML的代碼不變：

html部分：
<h1>
    <a href="https://blog.csdn.net" alt="CSDN Logo" title="CSDN首頁">
        CSDN
    </a>
</h1>

 對a標籤的高度設置爲0，然後設margin-top的高度爲圖片高度，這樣margin-top會高度撐滿盒子，把文字擠出去，然後溢出隱藏即可！

css部分：
a {
      display: inline-block;
      width: 90px;
      height: 0px;
      background: url(https://csdnimg.cn/cdn/content-toolbar/csdn-logo_.png?v=20190924.1) no-repeat left top/94px 44px;
      padding-top: 44px;
      overflow: hidden;
    }

以上兩種方法都可實現哦！當然方法有多種，可以再去嘗試其他哦！