image.png
hotwords div盒子 里面写7个a,div 用定位来布局位置,a与a之间的距离用margin。

index.html

  1. <header class="header w">
  2. <!-- logo 模块 -->
  3. <div class="logo">
  4. <h1>
  5. <a href="index.html" title="品优购商城">品优购商城</a>
  6. </h1>
  7. </div>
  8. <!-- search 模块 -->
  9. <div class="search">
  10. <input type="text" placeholder="语言开发">
  11. <button>搜索</button>
  12. </div>
  13. <!-- hotwords 模块制作 -->
  14. <div class="hotwords">
  15. <a href="#">优惠购首发</a>
  16. <a href="#">亿元优惠</a>
  17. <a href="#">9.9元团购</a>
  18. <a href="#">美满99减30</a>
  19. <a href="#">办公用品</a>
  20. <a href="#">电脑</a>
  21. <a href="#">通信</a>
  22. </div>
  23. </header>
  24. <!-- 头部header end -->

common.css

/* hotwords 模块 */
.hotwords {
  position: absolute;
  top: 66px;
  left: 347px;
}

.hotwords a {
  margin: 0 10px;
  font-size: 12px;
}

/* 头部header制作 end */