完成导航
HTML结构
运行
browser-sync start --server --files 'index.html' --files "css/*.css"
好了，改点样式让它看来好看点
1.给导航设置一个固定高度
2.去掉li默认的样式
3.左右布局
/* list with no style
========================================================================== */
/**
* 1. remove the margin and padding
* 2. remove list style
*/
.list-nostyle{
margin: 0;
padding: 0;
}
.list-nostyle li{
list-style: none;
}
/* site header
========================================================================== */
.site__header{
height: 70px;
}
.navbar{
padding: 15px 20px;
}
.navbar__brand{
float: left;
}
.navbar__nav{
float: right;
}
.navbar__nav li{
display: inline-block;
}
首先，我们为页眉设置了一个70px的高度
通过浮动来实现Logo左对齐，导航右对齐
因为
标签我们一般更习惯不要下划线，而是通过颜色来突出是链接，所以我们把标签的下划线统一去掉：
a{
text-decoration: none;
}
现在你看到的应该是这样：
