iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 3
0
自我挑戰組

網頁學習紀錄系列 第 3

鐵人賽Day3-寫一個 Search 搜尋列吧!

  • 分享至 

  • xImage
  •  

這次來練習寫一個 Search Bar,要寫的樣式如下
https://ithelp.ithome.com.tw/upload/images/20190904/2011930008Xob10q5v.png
我習慣在最外層寫一個 .wrap,在繼續將裡面要完成的 HTML 先寫完
所以程式碼會如下,

<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寫好,

*{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 值不要影響我的設定值。
這時候畫面會顯示這樣
https://ithelp.ithome.com.tw/upload/images/20190904/20119300XiBp0bYRw2.png
大概是我要的感覺了

再來就是優化的內容了,為了要讓搜尋按鈕好看,所以這邊我要載入 fontawesome,方式如下,先到 fontawesont 官網,選擇 Start for free,畫面如下
https://ithelp.ithome.com.tw/upload/images/20190904/20119300hvvV3dYMP1.png

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

會出現需要輸入 email 的地方,輸入完後會收到官方寄來的認證信,打開信件認證之後,在登入網頁,會給一組專屬的 kit 程式碼跟代碼,記得先複製存檔到電腦裡喔!以後要用到 fontawesome都要匯入這個 kit 程式!
然後在貼上到head裡面就可以讀取到 fontawesome 的圖案了,然後這次我要找的是Search的圖案,所以我就在裡面找 search,有很多放大鏡的圖案,就選一個喜歡的來用,於是我就找到了這個圖案
https://ithelp.ithome.com.tw/upload/images/20190904/20119300RB5JcKC00r.png
因為我沒有付費升級成pro會員,所以只能選第一個solid的選項把上面的網址複製下來貼到原本程式碼 btn 的地方,
程式碼會是這樣

<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>

這時候畫面就變成下方所示
https://ithelp.ithome.com.tw/upload/images/20190904/201193007gYWqmMhKH.png

好像很接近要寫的樣子

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

.search{
 position: relative;
 width: 80%;
 float: left; 
}

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

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

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

.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://ithelp.ithome.com.tw/upload/images/20190904/20119300M5L1I329sA.png
這樣就完成了 search bar 的撰寫囉!!
完整程式碼在這裡
https://codepen.io/hnzxewqw/pen/ZgWymm


上一篇
鐵人賽Day2-寫一個 Navbar 導覽列吧!
下一篇
鐵人賽Day4- 來寫個 header 吧!
系列文
網頁學習紀錄30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言