Hi,歡迎訪問前端老白
首先,我們需要創建一個
<form action="/" method="get"> <input type="text" placeholder="搜索"> <button type="submit">搜索</button> </form>
代碼中,我們使用了placeholder屬性來為搜索欄添加默認文本,它將在用戶未輸入任何內容時顯示。此外,我們還創建了一個提交按鈕來觸發搜索操作。
接下來,我們可以添加CSS樣式,以使搜索欄更加漂亮和易于使用。
.form-wrapper { display: flex; align-items: center; justify-content: center; } .form-wrapper input[type="text"] { padding: 10px 16px; border: none; border-radius: 25px; font-size: 16px; outline: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } .form-wrapper button[type="submit"] { padding: 12px 36px; background: #5cb85c; border: none; color: #fff; font-size: 16px; border-radius: 25px; cursor: pointer; transition: background-color 0.2s ease; } .form-wrapper button[type="submit"]:hover { background: #449d44; }
以上代碼將搜索欄樣式包裝在一個.form-wrapper元素中。我們使用flexbox布局來使搜索欄在頁面上居中,將輸入文本框與提交按鈕對齊并設置其樣式。
最后,我們需要將CSS樣式與HTML代碼組合使用。
<div class="form-wrapper"> <form action="/" method="get"> <input type="text" placeholder="搜索"> <button type="submit">搜索</button> </form> </div>
將以上HTML和CSS代碼插入到您的網頁中去,您將可以獲得一個漂亮的搜索欄,以吸引用戶的注意力,并提供舒適體驗。
老白網絡 (http://www.lofty888.cn/) 前端 后端 zblog主題.網站地圖xml