css實現(xiàn)百度搜索框

今天我們來介紹一下如何使用CSS來實現(xiàn)百度搜索框的樣式。首先我們需要一個基礎(chǔ)的HTML頁面：

<form class="search-form">
<div class="search-bar">
<input type="text" placeholder="請輸入搜索內(nèi)容">
<input type="submit" value="搜索">
</div>
</form>

在這個代碼中，我們使用了一個HTML表單，并在其中添加了一個搜索欄和一個提交按鈕。接下來我們開始使用CSS來美化這個搜索框：

/* 設(shè)置搜索框的樣式 */
.search-form {
width: 500px;
margin: 0 auto;
padding: 20px;
background-color: #f2f2f2;
border-radius: 5px;
}
.search-bar {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
background-color: white;
border-radius: 5px;
}
/* 設(shè)置輸入框的樣式 */
input[type="text"] {
border: none;
width: 80%;
height: 100%;
padding: 5px 10px;
font-size: 16px;
}
/* 設(shè)置提交按鈕的樣式 */
input[type="submit"] {
border: none;
width: 20%;
height: 100%;
background-color: #3385ff;
color: white;
font-size: 16px;
cursor: pointer;
}

在這個代碼中，我們通過設(shè)置搜索框、輸入框和提交按鈕的樣式來實現(xiàn)百度搜索框的外觀。我們可以通過控制CSS中的各種屬性值，來控制搜索框的寬度、背景色、圓角大小、輸入框和按鈕的大小、邊距、字體大小等等。

現(xiàn)在我們來看看最終的效果：