头部主题导航
xtx-main-nav
盒子区域
logo:
logo
导航:
nav
搜索框:
search
购物车:
cart
以上4个盒子都要浮动
结构:
<div class="xtx-main-nav container">
<div class="logo fl">logo</div>
<div class="nav fl">nav</div>
<div class="search fl">search</div>
<div class="cart fl">cart</div>
</div>
样式:
/* xtx-main-nav */
.xtx-main-nav {
height: 130px;
padding-top: 30px;
background-color: pink;
}
主体导航LOGO
logo注意点:
-
logo 里面首先放一个
h1
标签,目的是为了提权,告诉搜索引擎,这个地方很重要。 -
h1
里面再放一个链接,可以返回首页的,把 logo 的背景图片给链接即可。 -
为了搜索引擎收录我们,我们链接里面要放文字(网站名称),但是文字不要显示出来。
方法1:text-indent 移到盒子外面(text-indent: -9999px) ,然后 overflow:hidden ,淘宝的做法。
方法2:直接给 font-size: 0; 就看不到文字了,京东的做法。
4.最后给链接一个 title 属性,这样鼠标放到 logo 上就可以看到提示文字了。
结构:
<div class="logo fl">
<h1>
<a href="#">小兔鲜</a>
</h1>
</div>
样式:
.logo {
width: 207px;
height: 70px;
margin-left: 25px;
/* background-color: blue; */
}
.logo h1 {
width: 100%;
height: 100%;
}
.logo a {
display: block;
height: 70px;
background: url(../images/logo.png) no-repeat 0 0/100% 100%;
font-size: 0;
}