在我们设计网站时,对logo的处理有很多方法,这里介绍一种我学到的可以优化搜索引擎的做法。要将如图所示的logo放到我们的盒子模型当中,在企业中都是先将其放到一个div标签当中,
然后为了凸显其重要性,我们再用一个h1标签对其进行包裹,又因为网站当中的logo一般都是可以点击跳转的,因此我们此处再用了一个a标签进行包裹,需要注意的是,我们在a标签当中设置了内容,这正是为了优化搜索引擎的一种做法,但为了不将该内容显示出来(为了美化),我们将字体大小设置为0。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>Document</title>
<style>
a{
text-decoration: none;
color: #333;
}
ul,
ol{
list-style: none;
}
*{
margin: 0;
padding: 0;
}
.logo{
float: left;
width: 289px;
height: 214px;
background-color: pink;
}
.logo h1{
width: 289px;
height: 214px;
}
.logo h1 a{
width: 289px;
height: 214px;
background-image: url(京东.jpeg);
background-size: cover;
display: block;
font-size: 0;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="logo">
<!-- 在实际企业中,为了放logo都是用h1标签包裹着a标签 -->
<h1>
<a href="">京东官网</a>
</h1>
</div>
</body>
</html>