1. 创建HTML结构
使用`
```html
2. 添加CSS样式使用CSS来美化搜索框，包括设置宽度、高度、边框、背景色等。```css.search-form {
display: flex；
align-items: center；
justify-content: center；
margin-top: 100px；
}
.search-input {
padding: 10px；
font-size: 16px；
border: none；
border-radius: 20px；
box-shadow: 0 2px 4px rgba（0, 0, 0, 0.1）；
width: 300px；
transition: width 0.3s ease；
}
.search-button {
padding: 10px 20px；
font-size: 16px；
border: none；
border-radius: 20px；
background-color: 7FCC0B；
color: white；
cursor: pointer；
margin-left: 10px；
}
3. （可选）添加JavaScript功能
如果需要，可以使用JavaScript为搜索框添加交互功能，例如实时搜索建议。
```javascript
document.querySelector（'.search-form'）.addEventListener（'submit', function（event） {
event.preventDefault（）；
const query = document.querySelector（'.search-input'）.value；
// 在此处添加搜索逻辑
}）；
以上代码创建了一个简单的搜索框，包括表单结构、CSS样式和基本的JavaScript交互。你可以根据需要进一步自定义样式和功能