image.png

  1. header 盒子必须要有高度
  2. 1号盒子是logo标志定位
  3. 2号盒子是search搜索模块定位
  4. 3号盒子是hotwrods热词模块
  5. 4号盒子是shopcar
  • count 统计部分用绝对定位做
  • count统计部分不要给宽度,因为可能买的件数比较多,让件数撑开就好了,给一个高度
  • 一定注意左下角不是圆角,其余三个是圆角 写法:border-radius: 7px 7px 7px 0;

logo seo优化

  1. logo里面首先放一个

    标签,目的是为了提权,告诉浏览器,这个地方很重要

  2. 里面再放一个链接,用来返回首页,把logo的背景图给链接

  3. 为了搜索引擎收录网站,链接里面要放文字(网站名称),但是文字不要显示出来
  • 方法1 ,text-indent移到盒子外面(text-indent: -99999px),然后overflow:hidden,淘宝的做法
  • 方法2 ,直接font-size: 0;缩小字体,看不到文字
  1. 最后给链接一个属性,这样鼠标放到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>