css中怎么做一个搜索栏

在网站开发中，搜索栏是一个必不可少的组件。为了让搜索栏有更好的样式和功能，我们可以使用 CSS 来进行设计和实现。

首先，我们需要创建 HTML 结构来放置搜索栏，一般会使用 form 元素来创建：

 <form action="#" method="get">
        <input type="text" placeholder="请输入内容" />
        <button type="submit">搜索</button>
    </form> 

上述代码中，我们使用了 input 元素来创建文本输入框，使用 button 元素来创建提交按钮。其中，placeholder 属性用于在输入框中显示提示信息。

接下来，我们可以使用 CSS 来美化搜索栏的样式。例如，可以给输入框和按钮添加背景颜色、边框、圆角等样式：

 input[type="text"], button[type="submit"] {
        padding: 10px;
        border: none;
        border-radius: 5px;
    }
    input[type="text"] {
        background-color: #f2f2f2;
        width: 300px;
    }
    button[type="submit"] {
        background-color: #337ab7;
        color: #fff;
        margin-left: -5px;
    } 

上述代码中，我们使用了属性选择器实现对 input 和 button 元素的样式设置。其中，padding 属性用于设置元素内容与边框的间距，border 属性用于设置边框样式，border-radius 属性用于设置边框圆角。background-color 属性用于设置背景颜色，color 属性用于设置字体颜色。width 属性用于设置输入框的宽度，margin-left 属性用于设置按钮与输入框之间的间距。

最后，我们还可以对搜索栏添加悬停样式和聚焦样式，以增加用户体验：

 input[type="text"]:hover, input[type="text"]:focus {
        border: 1px solid #337ab7;
    }
    button[type="submit"]:hover {
        background-color: #286090;
    } 

上述代码中，我们使用了伪类选择器 :hover 和 :focus ，实现对输入框和按钮的悬停和聚焦样式设置。border 属性用于设置边框样式。

通过上述 CSS 样式的设置，我们可以创建出一个美观且具有实际使用价值的搜索栏，优化用户操作体验，增加网站的交互性。