- header 盒子必须要有高度
- 1号盒子是logo标志定位
- 2号盒子是search搜索模块定位
- 3号盒子是hotwrods热词模块
- 4号盒子是shopcar
- count 统计部分用绝对定位做
- count统计部分不要给宽度,因为可能买的件数比较多,让件数撑开就好了,给一个高度
- 一定注意左下角不是圆角,其余三个是圆角 写法:
border-radius: 7px 7px 7px 0;
logo seo优化
- logo里面首先放一个
标签,目的是为了提权,告诉浏览器,这个地方很重要
里面再放一个链接,用来返回首页,把logo的背景图给链接
- 为了搜索引擎收录网站,链接里面要放文字(网站名称),但是文字不要显示出来
- 方法1 ,
text-indent
移到盒子外面(text-indent: -99999px
),然后overflow:hidden
,淘宝的做法 - 方法2 ,直接
font-size: 0
;缩小字体,看不到文字
- 最后给链接一个
属性,这样鼠标放到logo上就可以看到提示文字了</li></ol> <hr> <p><a name="EamdO"></a></p> <h2 id="4qvcyw"><a name="4qvcyw" class="reference-link"></a><span class="header-link octicon octicon-link"></span>search搜索模块</h2><p><img src="https://cdn.nlark.com/yuque/0/2021/png/25426471/1640323131126-c327df5a-3987-4e09-9e3e-a7a687b5f10f.png#clientId=u83e6f6ec-c55b-4&from=paste&height=102&id=ud259e0f1&margin=%5Bobject%20Object%5D&name=image.png&originHeight=204&originWidth=1611&originalType=binary&ratio=1&size=104511&status=done&style=none&taskId=u5a9a6245-c029-415f-91b3-58ca5d303f1&width=805.5" alt="image.png"></p>