上一篇我們做完了導覽列，今天我們就要建立導覽列下面會有的一張大圖片，以及搜尋框，一步一步完成我們的網頁!

我們先在html body裡建立我們要的東西，會有一張圖片，跟一個段落。

<div class="banner">
        <img src="https://picsum.photos/1600/300?random=1">
        <div class="title">
            <p>MY WEBSITE</p>
        </div>
</div>

建立完了後，開始設定我們要的CSS屬性!先把圖片設成滿版。
先在style裡加入圖片的寬度與高度。

.banner img{
            width: 100%;
            height: 300px;
        }

這樣圖片就滿版了!接下來要將MY WEBSITE放在圖片上面並置中在想要的位置上。
這邊就要用到之前學過的位置position。把外容器banner設定成relative，內容器設定成absolute。

.banner{
            position: relative;
        }
.banner .title p{
            width: 100%;
            position: absolute;
            display: flex;
            justify-content: center;
            top: 70px;
            font-size: 50px;
        }

而要將段落p(MY WEBSITE)給置中的話，先加入display:flex屬性，並設定justify-content: center;就能水平置中了喔!在設定自己想要的高度位置top。另外將字體設定的大一點。

這樣就完成了一個簡單的banner了!

我們還要再添加一個搜尋框!

一樣在body裡添加搜尋框的html

<div class="box">
        <div class="search">
            <span class="icon"><i class="fa fa-search"></i></span>
            <input
                type="search"
                id="search"
                placeholder="Search..."
            />
        </div>
</div>

 <div class="banner">
        <img src="https://picsum.photos/900/300?random=1">
        <div class="title">
            <p>MY WEBSITE</p>
            <div class="box">
                <div class="search">
                    <span class="icon"><i class="fa fa-search"></i></span>
                    <input
                        type="search"
                        id="search"
                        placeholder="Search..."
                    />
                </div>
            </div>
        </div>
    </div>

對了這裡我們還要連結link到Font Awesome，他是一個圖標庫，之後我們會在介紹這個實用的工具，在head後面先link上就對了!

<link
        href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"
        rel="stylesheet"
    >

現在我們有了搜尋框了!讓我們為他添加一點CSS樣式，設定寬度、高度、背景顏色、圓角、以及搜尋框為外容器(要讓我們的搜尋符號在搜尋框裡)。

.search{
            width: 300px;
            vertical-align: middle;
            white-space: nowrap;
            position: relative;
        }
        
.search input#search{
        width: 300px;
        height: 50px;
        background: #2b303b;
        border: none;
        font-size: 10pt;
        float: left;
        color: #63717f;
        padding-left: 45px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
}

接下來要讓我們的搜尋符號進去搜尋框裡!利用position的概念。

.search .icon{
        position: absolute;
        top: 50%;
        margin-left: 17px;
        margin-top: 17px;
        z-index: 1;
        color: #4f5b66;
        }

這樣我們就有一個好看的搜尋框了!剩下把他放在我們圖片中適當的位置。

.box{
            display: inline-block;
            position: absolute;
            top: 200px;
            left: 620px;
            
    }

先將.box設成inline-block元素，讓他可以去設定top跟left，還有位置設成absolute，才能疊在圖片上顯示。

最後就大功告成拉!