项目实战-header内部实现-logo和选择城市

119 阅读1分钟

index.html部分

<!--- logo区域 --->
<h1 class="logo">
<a href="index.html">拉勾招聘|招聘|求职|互联网|培训|JAVA|前端</a>
</h1>
<!--- 城市选择 --->
<div class="city">
<span>全国站</span>
</div>

header.css部分

/* logo * /
.header-c .header-left .logo {
  /* 改变元素加载模式 * /
  float: right;
  /* 盒模型 */
  width: 43px;
  height: 31px;
  padding-top: 9px;
  margin-right: 34px;
}
.header-c .header-left .logo a {
  display: block;
  width: 43px;
  height: 21px;
  background: url(../images/logo.png) no-repeat 0 0;
  text-indet: -999em;
  overflow: hidden;
}
.header-c .header-left .city {
  float: left;
  width: 111px;
  margin-right: 33px;
}
.header-c .header-left .city span {
  margin-right: 12px;
  color: #0dca9f;
}
.header-c .header-left .city i {
  font-size: 12px;
  color: #afb5c0;
  cursor: pointer;
}
.header-c .header-left .city:hover i {
  color: #fff;
}