项目实战-header内部实现-导航nav

思路：用ul>li>a实现导航栏，使用软件测出设计图中单个导航的盒模型，然后批量书写，最后再修改补充细节
html部分

<ul class="nav">
<li class="current"><a href="index.html">首页</a></li>
<li><a href="company.html">公司</a></li>
<li><a href="school.html">校园招聘</a></li>
<li><a href="#">言职</a></li>
<li><a href="#">职位</a></li>
<li><a href="#">课程<span class="tips">new</span></a></li>

CSS部分

.header-c .header-left .nav {
  float: left;
}
.header-c .header-left .nav li {
  float: left;
}
.header-c .header-left .nav li a {
  display: block;
  position: relative;/*用来给tips标签定位用*/
  padding: 0 21px;
  color: #afb5c0;
}
.header-c .header-left .nav li a:hover {
  color: #fff;
}
.header-c .header-left .nav li .current a {
  background-color: #224282c;
  color: #fff;
}
.header-c .header-left .nav li a .tips {
  position: absolute;
  top: 3px;
  right: -2px;
  width: 29px;
  height: 18px;
  /* 边框圆角属性 css3*/
  border-radius: 9px;
  background-color: #ff7452;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  color: #fff;
}