哈嘍大家好 歡迎來到歡迎來到 coding 小白盜版學校官網日記ㄉ第12天
今天是聚餐完回家剩兩個小時就要12.了 好趕好趕的一天

(今天晚上等捷運的我)

今天要來做的新進度是～～～

搜尋欄(ゝ∀･)b

首先，搜尋欄需要可以輸入文字，所以先在html裡設定一個 input

<input class="text-box" type="text" placeholder="關鍵字">

因為彈出的搜尋欄也是依附在nav的物件下，而且疊加在既有的畫面上，感覺跟昨天作的下拉式選單差不多，所以我直接把css複製出來改

.text-box{
    display: flex;
    position: absolute;
    top: 3rem;
    right: 0;
}

然後想把放大鏡icon放進搜尋框 input 的裡面
但沒時間慢慢研究了，所以直接問chatgpt學長

如果想把代表搜尋的放大鏡icon的png放進input裡怎麼做

學長說：

有兩種常見的方式可以把放大鏡 PNG icon 放進 < input> 裡：

> 🔹 方法一：用 背景圖片 background-image

最簡單，不需要額外 HTML。
< input type="text" placeholder="輸入關鍵字" >
input {
width: 250px;
padding: 8px 12px 8px 32px; /* 左邊留空，避免文字壓到 icon /
border: 1px solid #ccc;
border-radius: 4px;
background: url("search.png") no-repeat 8px center;
background-size: 16px 16px; / 調整 icon 大小 */
}👉 圖片會放在輸入框內的左側（8px 位置），文字會自動往右推。

> 🔹 方法二：用 父層包一個容器 + 絕對定位的 icon

這樣更靈活，可以放 SVG、Font Awesome 或 PNG。
< div class="search-box" >
< img src="search.png" class="icon">
< input type="text" placeholder="輸入關鍵字">
< /div>

.search-box {
position: relative;
display: inline-block;
}
.search-box .icon {
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
pointer-events: none; /* 避免擋到輸入 /
}
.search-box input {
padding: 8px 12px 8px 32px; / 預留 icon 空間 */
border: 1px solid #ccc;
border-radius: 4px;
}👉 這種方式適合需要 響應式 或想在右邊放清除鍵的情境。
我的人生宗旨就是不自討苦吃，所以當然就是選最簡單的第一個方法拉

input {
  width: 13.5rem;
  padding: 10px 12px 10px 12px; /* 預留空間給 icon */
  border: 0.7rem solid #000000cc;
  border-radius: 0.5rem;
  background: url("img/icon_search_black.png") no-repeat 10rem center;
  background-color: #FFFFFF;
  background-size: 2rem; /* 調整 icon 大小 */
}

挖真的長出來了好棒棒，讚嘆科技的力量，謝謝gpt學長

原本還想試試點 nav 上的搜尋可以顯示&消失的效果，但沒有成功
現在我只想洗澡睡覺，還是明天再研究好ㄌ

閃退，各位明天見ㄅㄅ