html 汇入图片

今天来说如何汇入图片，我想要在标题栏的左侧加一个logo，避免版权问题我自己画了一个Logo的示意图

注意必须是png档否则可能会有图片没有去背的问题
将这个图片储存在跟html档同一个资料夹，并取名为logo.png，接着在标题栏的div里新增以下程序码

<img src="logo.png" class="logo">

并且在css中将logo的高度设定为40px

        .logo{
            height:40px;
        }

此时网页的画面如下图

我们会发现两个问题，首先是那四个按钮往下位移了，再来就是logo的图片并没有垂直置中
先来解决按钮位移的问题，为了不让按钮的位子被logo的高度影响，所以要在logo的css中加入float

        .logo{
            height:40px;
            float:left;
        }

他的意思是让这张图片靠左漂浮，所以它的参数不会影响到标题栏内的其他物件
接下来在加入margin=5px的程序码，为了让高度40px的图片在高度50px的标题栏里垂直置中

        .logo{
            height:40px;
            float:left;
            margin:5px;
        }

如此一来我们就汇入了一张图片并且解决它造成的bug了