資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學使用HTML和CSS建立搜尋欄
要使用HTML和CSS建立搜尋欄，我們可以使用簡單的表單元素和基本的CSS屬性。搜尋框是網站中最常用的元件，它使導航更加方便。在這篇文章中，我們將瞭解如何使用HTML和CSS建立一個帶有搜尋按鈕的搜尋欄。
在這篇文章中，我們有一個文字型別的輸入框和一個按鈕，我們的任務是使用HTML和CSS建立一個搜尋欄。
使用HTML和CSS建立搜尋欄的步驟
- 首先，我們建立了一個表單，然後使用HTML input標籤和type屬性建立了一個搜尋輸入文字框，然後使用button標籤建立了一個按鈕。
- 我們使用了**search**類，它設定了搜尋欄的背景顏色和最大寬度。
- 然後，我們設計了搜尋輸入框，我們應用了內邊距和邊框，並設定了框的寬度和圓角。
- 使用**button**類，我們透過設定按鈕的背景顏色和文字顏色來設計按鈕。
- 我們使用了:hover偽類，它在懸停時將游標更改為指標，並更改背景和文字顏色。
- 我們使用了link標籤在搜尋按鈕上插入一個圖示。
示例
這是一個完整的示例程式碼，實現了上面提到的使用HTML和CSS建立搜尋欄的步驟。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Document</title>
<style>
.search {
padding: 5px;
background-color: #031926;
max-width: fit-content;
border-radius: 5px;
}
input[type="text"]{
padding: 10px;
border: 2px solid #031926;
border-radius: 5px;
width: 200px;
}
button {
padding: 10px;
border-radius: 5px;
background-color: #031926;
color: white;
}
button:hover {
color: #031926;
background-color: white;
cursor: pointer;
}
</style>
</head>
<body>
<h3>
To create a Search Bar using HTML and CSS
</h3>
<p>
We have used <strong>input</strong> tag
to create a text type search box using HTML
and CSS.
</p>
<div class="search">
<form action="#">
<input type="text" placeholder="Search...">
<button type="submit">
<i class="fa fa-search"></i>
</button>
</form>
</div>
</body>
</html>
結論
在這篇文章中，我們學習瞭如何使用HTML和CSS建立搜尋欄。這是一個非常簡單的任務，可以使用基本的CSS屬性輕鬆實現。
更新於：2024年9月17日
1K+ 次瀏覽
廣告