如何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;
    }

以上两种方法都可实现哦！当然方法有多种，可以再去尝试其他哦！