css做出一个搜索

在网页设计中，搜索框是常用的组件之一。我们可以使用CSS来美化搜索框，让页面更加美观。下面是一个基础的搜索框示例：

    <div class="search-Box">
        <input type="text" placeholder="请输入关键字">
        <button>搜索</button>
    </div>

css做出一个搜索

上述代码中，我们使用了一个div作为外层容器，添加了一个类名为“search-Box”。在容器中使用了一个input标签作为输入框，另外添加了一个button标签作为搜索按钮。接下来，我们可以使用CSS来添加样式。

.search-Box {
    width: 300px;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.search-Box input[type="text"] {
    border: none;
    outline: none;
    flex: 1;
}

.search-Box button {
    width: 60px;
    height: 30px;
    background-color: #f33;
    color: #fff;
    border: none;
    border-radius: 15px;
    cursor: pointer;
}

上述代码中，我们使用了“search-Box”类名来对容器进行样式设置。设置了宽度、高度、边框、边框圆角、内边距、弹性布局等属性，让搜索框更具美观性和实用性。

接下来，我们对输入框和搜索按钮进行样式设置。可以看到输入框去除了边框，设置了“flex: 1”来填满剩余空间；搜索按钮设置了宽度、高度、背景色、文本颜色、边框圆角等属性，让按钮更加突出。

通过简单的CSS设置，我们可以为搜索框添加美观的外观，提高用户体验。

css做出一个搜索

相关文章