導覽列

在這個範例中要練習導覽列區塊的切版

整理幾個重點:
1.將section_kv設為滿版，添加屬性position: fixed (固定定位)，將導覽列的區塊獨立一層，使用後即便頁面捲動，它還是會固定在相同的位置
2.添加一個container，做為固定欄寬1200px的區塊
3.設定display: flex讓導覽列資料橫排顯示
4.使用align-items: center讓資料可以置中對齊
5.在此範例的設計的是當導覽列的li被觸碰的話會跑出按鈕的顏色，因此寫成li:hover a
6.外觀是設定在超連結a上面，a是inline物件，寬度大小是由內容撐開去決定的，設定尺寸會沒有效果，因此這邊需要添加black的設定，這樣尺寸的設定才會有效果，超連結所覆蓋的範圍才是正確的
7.通常一個網頁的h1標籤大多會用在logo上，但因為LOGO是圖片，為了讓他符合語意會添加span標籤寫上文字
8.span標籤的文字如何在頁面中不顯示，這邊我們將span的寬高都設為1px(width: 1px; height: 1px;)，再將超出的地方消失(overflow: hidden;)，最後使用絕對定位(position: absolute;)即可完成

提供格線圖如下方所示:

可參考程式碼如下方:

HTML

<header class="header_content">
    <nav class="navbar">
        <h1 class="title_logo">
            <img src="https://i.ibb.co/86SKRmY/mini-logo.png">
            <span>小小白人的生活</span>
        </h1>
        <ul class="nav_item">
            <li><a href="#">小白人的誕生</a></li>
            <li><a href="#">角色介紹</a></li>
            <li><a href="#">立即購買</a></li>
        </ul>
    </nav>
</header>

CSS

.header_content{
    width: 100%;
    margin: auto;
    background-color: #ffffff;
    box-shadow: 5px 3px 3px #f2f2f2;
    position: fixed;
    z-index: 9999;
}
.header_content .navbar{
    width: 1200px;
    display: flex;
    margin: auto;
    align-items: center;
    padding: 20px 0;
}
.navbar .nav_item{
    margin-left: auto;
}
.navbar .title_logo span{
    width: 1px;
    height: 1px;
    overflow: hidden;
    position: absolute;
}
.navbar .nav_item{
    display: flex;
}
.navbar .nav_item img{
    vertical-align: bottom;
    width: 100%;
}
.navbar .nav_item a{
    color: #464646;
    font-size: 16px;
    margin: 0 20px;
    display: block;
    padding: 5px 10px;
    border-radius: 30px;
    
}
.navbar .nav_item li:hover a{
    background-color: #f7b1b1;
    color: #ffffff;
    transition: .3s;
}