1.最初にロゴにh1タグを付けます。目的は、この場所が非常に重要であることを検索エンジンに伝える権利を高めることです。
2. h1にリンクを配置すると、ホームページに戻すことができます。リンクにロゴの背景画像を指定するだけです。
3.検索エンジンに私たちを含めるには、リンクにテキスト(Webサイト名)を含める必要がありますが、テキストは表示されません。
方法1:text-indexをボックスの外に移動し(text-index:-9999px)、オーバーフロー:非表示、Taobaoのアプローチ
方法2:font-size:0を指定します。直接、テキストは表示されません。Jingdongのアプローチ
4.最後に、リンクにtitle属性を付けて、ロゴの上にマウスを置いたときにプロンプトテキストが表示されるようにします。
例えば:
<style>
/* header 头部制作 */
.header {
position: relative;
height: 105px;
}
.logo {
position: absolute;
top: 25px;
width: 171px;
height: 61px;
}
.logo a {
display: block;
width: 171px;
height: 61px;
background: url(../images/logo.png) no-repeat;
/* font-size: 0;京东的做法*/
/* 淘宝的做法让文字隐藏 */
text-indent: -9999px;
overflow: hidden;
}
</style>
<header class="header w">
<div class="logo">
<h1>
<a href="index.html" title="品优购商城">品优购商城</a>
</h1>
</div>
</header>