学习CSS你必须踩得那些坑（四）

完成导航

HTML结构

Company Logo

Platform

About

Sign Up

运行

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左对齐，导航右对齐

因为

是块级元素，所以会产生换行，我们把li设置成inline-block，在同一行显示

标签我们一般更习惯不要下划线，而是通过颜色来突出是链接，所以我们把标签的下划线统一去掉：

a{

text-decoration: none;

}

现在你看到的应该是这样：