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

完成导航

HTML结构

<header class="site__header">

    <nav class="navbar">

      <a class="navbar__brand" href="#">Company Logo</a>

      <ul class="navbar__nav list-nostyle">

        <li><a href="#">Platform</a></li>

        <li><a href="#">About</a></li>

        <li><a class="active" href="#">Sign Up</a></li>

      </ul>

    </nav>

  </header>

运行
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>是块级元素，因此会产生换行，咱们把li设置成inline-block，在同一行显示

<a>标签咱们通常更习惯不要下划线，而是经过颜色来突出是连接，因此咱们把<a>标签的下划线统一去掉：

a{

    text-decoration: none;

}

 

如今你看到的应该是这样：