小滴课堂首页头部

一.思路及布局

头部分为logo区、横向导航区、搜索区、用户区

logo区就放图片，然后放在左边

横向导航区放一个列表，列表左浮动

搜索区一个搜索输入框，上面有示例方案，有一个搜索图标

用户区有可点击文案及头像，向右浮动

header左右设置间隙(padding)

padding: 0 20px;

二.logo区

1.html编写

<div class="logo fl">
  <img src="./img/logo.png" alt="小滴课堂">
</div>

2.css编写

/* 左浮动 */
.fl {
  float: left;
}

div 装img图片时，div会被撑大了,使用font-size:0

.logo {
    font-size: 0;
}

三、横向导航区

1.html编写

<ul class="nav fl">
  <li><a href="javascript:void(0)">首页</a></li>
  <li><a href="javascript:void(0)">视频学习</a></li>
  <li><a href="javascript:void(0)">超级会员</a></li>
  <li><a href="javascript:void(0)">学习路线</a></li>
  <li><a href="javascript:void(0)">工具</a></li>
</ul>

2.css编写

ul已左浮动，但是ul下的li没有左浮动

.nav li {
  float: left;
}

文字在顶部显示，居中显示,给header添加

line-height: 60px;

文字挤在一起，给li添加盒子与盒子的间隙

margin-right: 20px;

“首页”与logo区紧挨在一起，给logo区添加盒子与盒子的间隙

margin-right: 30px;

a标签的默认样式有点丑

a {
  text-decoration: none;
  color: inherit;
}

四、搜索区

1.html编写

这里使用了阿里云的图标库

<link rel="stylesheet" href="http://at.alicdn.com/t/font_883438_djybibku2l.css">    
		<div class="search fl">
      <input type="text">
      <div class="keyword">
        <span>Java</span>
        <span>Html</span>
      </div>
      <i class="iconfont icon-icon-test"></i>
    </div>

2.css编写

布局：关键字在输入框上，搜索图标在输入框里右边

.search {
  position: relative;
}
.keyword {
  position: absolute;
  left: 50%;
  width: 120px;
  margin-left: -70px;
  bottom: 10px;
  text-align: center;
}
.icon-icon-test {
  position: absolute;
  right: 15px;
  bottom: 10px;
}

默认输入框有点丑：

input {
	outline: 0;
	background-color: transparent;
	border-width: 1px;
	box-shadow: none;
}

输入框：去掉边框(border)

.search input {
  border: none;
  width: 180px;
}

输入框：下边框，横线

border-bottom: 1px solid #000;

关键字：设置字体、背景色、内部间隙(padding)、边框设为圆角(border-radius)

.keyword span {
  font-size: 12px;
  background-color: #ccc;
  padding: 5px 10px;
  border-radius: 15px;
}

搜索区居中，距离左边太近，不太好看

.search {
  position: relative;
  padding-top: 10px;
  margin-left: 20px;
}

五、用户区

1.html编写

<div class="r-btn fr">
  <span>兑换优惠券</span>
  <span>注册</span>
  /
  <span>登录</span>
  <img src="./img/avatar.png">
</div>

2.css编写

用户区要整体向右浮动

.fr {
  float: right;
}

用户默认头像把用户区撑大了

.r-btn img {
    height: 40px;
}

头像居中

vertical-align: middle;

头像与左边按钮距离太近

margin: 0 20px;

按钮设置字体与间距

.r-btn span {
  margin: 0 10px;
  font-size: 14px;
}