项目实战-header内部实现-导航右边部分

思路：分析设计图元素，选择a标签实现，选择浮动方法，补充细节。
html部分

<div class="header-right">
  <a href="#" class="upload">上传简历</a>
  <a href="#" class="position">职位订阅</a>
  <a href="#" class="login">登录<i></i></a>
  <span>|</span>
  <a href="#" class="register">注册</a>
  <a href="#" class="app">拉勾APP<i></i></a>
  <a href="#" class="enter">进入企业版</a>
</div>

css部分

.header-c .header-right {
  float: right;
}
.header-c .header-right a {
  float: left;
  color: #afb5c0;
}
.header-c .header-right a:hover {
  color: #fff;
}
.header-c .header-right a {
  float: left;
  color: #afb5c0;
}
.header-c .header-right .upload {
  margin-right: 23px;
}
.header-c .header-right .position {
  margin-right: 66px;
}
.header-c .header-right .login {
  position: relative;
}
.header-c .header-right .login i {
  position: absolute;
  left: -26px;
  top: 11px;
  width: 18px;
  height: 18px;
  background: url(../image/sprite.01.png) no-repeat -76px -136px;/* 元素在精灵图上的坐标加负号，代表移动到坐标原点 */
}
.header-c .header-right .login:hover i {
  background: url(../image/sprite.01.png) no-repeat -76px -174px;
}
.header-c .header-right span {
  float: left;
  padding: 0 8px;
  color: #5e5a50;
}
.header-c .header-right .register {
  margin-right: 52px;
}
.header-c .header-right .app {
  position: relative;
  margin-right: 20px;
  color: #00c295;
}
.header-c .header-right .app i {
  position: absolute;
  left: -20px;
  top: 11px;
  width: 12px;
  height: 18px;
  background: url(../image/sprite.01.png) no-repeat -64px -212px;/* 元素在精灵图上的坐标加负号，代表移动到坐标原点 */
}
.header-c .header-right .app:hover i {
  background: url(../image/sprite.01.png) no-repeat -96px -212px;
}
.header-c .header-right .app:hover {
  margin-right: 20px;
  color: #00c295;
}