学习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;

    }

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

    学习CSS你必须踩得那些坑(四)_第1张图片

    你可能感兴趣的:(学习CSS你必须踩得那些坑(四))