品优购 首页快捷导航

说明

网站的首页一般使用index命名
首页的头部和底部，根据模块化开发，样式要写到common.css里

快捷导航 shortcut制作

image.png

• 通栏的盒子命名为shortcut-快捷导航。注意这里的行高，可以继承给里面的子盒子。
• 里面包含版心的盒子
• 版心盒子里面包含1号左侧盒子左浮动
• 版心盒子里面包含2号右侧盒子左浮动

<section class="shortcut">
    <div class="w">
      <div class="fl">左侧</div>
      <div class="fr">右侧</div>
    </div>
  </section>

/* 公共样式 */
.w {
  width: 1200px;
  margin: 0 auto;
}
/* 左右浮动 */
.fl {
  float: left;
}
.fr {
  float: right;
}
/* 快捷导航栏 */
.shortcut {
  height: 31px;
  line-height: 31px;
  background-color: #f1f1f1;
}

左侧制作

• 使用ul li制作左侧

<div class="fl">
    <ul>
        <li>品优购欢迎您!</li>
        <li>
            <a href="#">请登录</a><a href="#" class="style_red">免费注册</a>
        </li>
    </ul>
</div>

• 使用浮动将li在一行排列

.shortcut ul li {
  float: left;
}

• 建立统一红色类供使用

.style_red {
  color: red
}

• 使用 & n b s p ; 来制造间隙

<div class="fl">
    <ul>
        <li>品优购欢迎您! &nbsp;</li>
        <li>
            <a href="#">请登录 &nbsp;</a><a href="#" class="style_red">免费注册</a>
        </li>
    </ul>
</div>

右侧制作

• 使用ul li制作

<div class="fr">
    <ul>
          <li>我的订单</li>
          <li></li>
          <li>我的品优购</li>
          <li></li>
          <li>品优购会员</li>
          <li></li>
          <li>企业采购</li>
          <li></li>
          <li>关注品优购</li>
          <li></li>
          <li>客户服务</li>
          <li></li>
          <li>网站导航</li>
    </ul>
</div>

• 虚线也是用盒子制作，偶数li加样式

.shortcut .fr ul li:nth-child(even) {
  margin: 9px 15px 0;
  width: 1px;
  height: 12px;
  background-color: #666;
}

• 向下小图标使用 伪元素 :after制作

<li class="arrow-icon">我的品优购</li>

/* 声明字体图标 */
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?uhqw22');
  src:  url('../fonts/icomoon.eot?uhqw22#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?uhqw22') format('truetype'),
    url('../fonts/icomoon.woff?uhqw22') format('woff'),
    url('../fonts/icomoon.svg?uhqw22#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.arrow-icon::after {
  margin-left: 3px;
  content: '\e900';
  font-family: icomoon;
}

注意：字体来自icomoon，注意声明时的路径