Day20 CSS Banner与搜寻框

上一篇我们做完了导览列，今天我们就要建立导览列下面会有的一张大图片，以及搜寻框，一步一步完成我们的网页!

我们先在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，才能叠在图片上显示。

最後就大功告成拉!