4.购物车 shopcar 模块

• shopcar div盒子里面写文字
• 用：：before 加 文字图标 来弄前面的小车子
• 用：：after 加 文字图标 来弄后面的小三角
• 在shopcar div盒子里 再弄一个 盒子，这个盒子用 position：absolute，定到右上角。

1

index.html

  <!-- 头部header start -->
  <header class="header w">
    <!-- logo 模块 -->
    <div class="logo">
      <h1>
        <a href="index.html" title="品优购商城">品优购商城</a>
      </h1>
    </div>
    <!-- search 模块 -->
    <div class="search">
      <input type="text" placeholder="语言开发">
      <button>搜索</button>
    </div>
    <!-- hotwords 模块制作 -->
    <div class="hotwords">
      <a href="#">优惠购首发</a>
      <a href="#">亿元优惠</a>
      <a href="#">9.9元团购</a>
      <a href="#">美满99减30</a>
      <a href="#">办公用品</a>
      <a href="#">电脑</a>
      <a href="#">通信</a>
    </div>
    <!-- shopcar 购物车模块 -->
    <div class="shopcar">
      我的购物车
    </div>
  </header>
  <!-- 头部header end -->

common.css

/* shopcar购物车模块 */
.shopcar {
  position: absolute;
  right: 64px;
  top: 25px;
  width: 140px;
  height: 35px;
  background-color: #f7f7f7;
  text-align: center;
  line-height: 35px;
  border: 1px solid #dfdfdf;
}

.shopcar::before {
  content: '\e93a';
  font-family: 'icomoon'; 
  color: #b1191a;
  margin-right: 5px;

}

.shopcar::after {
  content: '\e920';
  font-family: 'icomoon';
  margin-left: 15px;
}

/* 头部header制作 end */

2

• count 统计部分用绝对定位做
• count 统计部分不要给宽度，因为可能买的件数比较多，让件数撑开就好了，给一个高度，和padding
• 注意左下角不是圆角，其余三个是圆角，写法: border-radius: 7px 7px7px0;

  index.html

    <!-- shopcar 购物车模块 -->
    <div class="shopcar">
      我的购物车
      <i class="count">8</i>
    </div>
  

  common.css

  .shopcar .count {
  position: absolute;
  left: 104px;
  top: -5px;
  height: 14px;
  line-height: 14px;
  padding: 0 5px;
  color: #fefefe;
  background-color: #b1191a;
  border-radius: 7px 7px 7px 0;
  }
  

  3.扔掉之前的背景颜色

  header部分的已经做好了，把之前的颜色去掉