css在页面中添加一个搜索框

搜索框是现代网页设计中常用的元素之一，使用CSS添加搜索框可以让网页界面更加美观实用。

首先，我们需要在HTML代码中添加一个div容器来包含搜索框：

div class="search-box">
    input type="text" placeholder="搜索">
    button>
    搜索/button>
    /div>

其中，class为"search-box"的div容器是我们添加的搜索框。input标签定义了文本框，placeholder属性为输入框里默认显示的文本，button标签则是搜索按钮。

接下来，使用CSS样式对搜索框进行美化。代码如下：

.search-box input[type="text"] {
    height: 38px;
    border: none;
    padding: 0 10px;
    font-size: 16px;
    background-color: #f5f5f5;
    width: 300px;
    border-radius: 3px 0 0 3px;
}
.search-box button {
    height: 38px;
    border: none;
    padding: 0 20px;
    font-size: 16px;
    background-color: #2ecc71;
    color: #ffffff;
    border-radius: 0 3px 3px 0;
    cursor: pointer;
}
.search-box input[type="text"]:focus {
    outline: none;
    background-color: #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}
.search-box button:hover {
    background-color: #27ae60;
}
    

上述代码中，我们为input和button标签设定了一系列样式，包括高度、边框、内边距、字体大小、背景颜色等等。其中，关键属性border-radius用于设置圆角，cursor属性指定鼠标样式为手形。我们还为聚焦时的输入框和按钮设置了样式（hover）。

最终，搜索框就可以在页面上呈现出来了。CSS的样式设置可以让搜索框看起来更加美观，易用。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！