學習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;

}

 

如今你看到的應該是這樣：