提姆寫程式

0%

寫一個 search bar

發表於 更新於 分類於 Disqus：
寫一個有質感的搜尋列吧!

搜尋列 ( input + button )

這次來練習寫一個 Search Bar，要寫的樣式如下

參考樣式

起手式

我習慣在最外層寫一個 .wrap，在繼續將裡面要完成的 HTML 先寫完
所以程式碼會如下，

HTML

1
2
3
4
5
6
<div class="wrap">
 <div class="search">
 <input class="search-bar" type="text" name="search" id="search" placeholder="輸入名稱">
 <button class="search-btn"></button>
 </div>
</div>

這時候我才會加入 CSS 的樣式，因為要讓底色是我指定的顏色，還有這次 Search Bar 的裡面所有的連結按鈕我都取消底線的樣式，所以我的 CSS 先把 layout 寫好，

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
*{box-sizing: border-box;}
body{
 background-color: #efe9e7;
}
a{
 text-decoration: none;
 color: #3D1101;
}
.wrap{
 max-width: 960px;
 margin:20px auto 0 auto;
 height: auto;
}

使用 box-sizing:border-box 原因是要讓原本 CSS 預設的 padding 值不要影響我的設定值。
這時候畫面會顯示這樣

大概是我要的感覺了

把按鈕的文字改成圖示

再來就是優化的內容了，為了要讓搜尋按鈕好看，所以這邊我要載入 fontawesome，方式如下，先到 fontawesome 官網，選擇 Start for free，畫面如下

fontawesome 首頁

以前都免費，現在要付費才能升級成 PRO 的會員了…

會出現需要輸入 email 的地方，輸入完後會收到官方寄來的認證信，打開信件認證之後，在登入網頁，會給一組專屬的 kit 程式碼跟代碼，記得先複製存檔到電腦裡喔！以後要用到 fontawesome 都要匯入這個 kit 程式！或是去找 CDN 放在 link 裡面也可以！

然後在貼上到 head 裡面就可以讀取到 fontawesome 的圖案了，然後這次我要找的是 Search 的圖案，所以我就在裡面找 search，有很多放大鏡的圖案，就選一個喜歡的來用，於是我就找到了這個圖案

在 fontawesome 搜尋 search 在挑選喜歡的樣式

因為我沒有付費升級成 PRO 會員，所以只能選第一個 solid 的選項把上面的網址複製下來貼到原本程式碼 btn 的地方，程式碼會是這樣

HTML

1
2
3
4
5
<div class="wrap">
 <div class="search">
 <input class="search-bar" type="text" name="search" id="search" placeholder="輸入名稱">
<button class="search-btn"><i class="fas fa-search"></i></button>
</div>

這時候畫面就變成下方所示

好像很接近要寫的樣子

細節優化

這時候 CSS 要繼續往下寫，先設定 .search 的寬度為畫面的 80%，並且靠左，因為等等還要放上購物車，寫入 position 是將 .search 設定為父元素，讓等等放大鏡圖示可以對齊。

CSS

1
2
3
4
5
.search{
 position: relative;
 width: 80%;
 float: left; 
}

優化 input

再來優化 .search-bar 讓它填滿 .search 的範圍，並按照標記文件 height:32px，並且外框設定 3px 的棕色實心線，為了讓 search bar 與畫面一致，所以也將背景填滿色。

CSS

1
2
3
4
5
6
7
.search-bar{
 width: 100%;
 height: 32px;
 font-size: 20px;
 border: 3px solid #3D1101;
 background-color: #efe9e7;
 }

優化 button

優化按鈕，按照標記文件設定寬高與背景色後，也將 fontawesome 的顏色與背景設定相同，加上 cursor 讓滑鼠移過去時可以變成手指的圖示，再透過 position:absolute 設定成絕對定為，讓按鈕可以靠上靠右對齊 Search bar

CSS

1
2
3
4
5
6
7
8
9
10
11
12
.search-btn{
 width: 36px;
 height: 32px;
 background-color: #3D1101;
 color:#efe9e7;
 outline:none;
 border: 2px solid #3D1101;
 cursor: pointer; 
 position: absolute;
 top: 0;
 right: 0; 
}

完成

寫完上方程式碼就完成這次的好看的搜尋列囉~~!

搜尋列完成

完整程式碼在這裡
https://codepen.io/hnzxewqw/pen/ZgWymm