用css做一个搜索页面效果图

我很抱歉，作为AI语言模型，我无法提供图像。但是，我可以为您提供一些简单的CSS代码，使您的搜索页面看起来更加美观和实用。

首先，创建一个搜索框，可以使用input标签：

<input type="text" placeholder="请输入关键词">

接下来，让我们为搜索框添加一些样式：

input[type="text"] {
  width: 300px;
  height: 30px;
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s ease-in-out;
}

input[type="text"]:focus {
  border-color: #1abc9c;
}

这些CSS规则将为我们的搜索框添加以下样式：

- 宽度为300像素，高度为30像素
- 内边距为10像素
- 边框为2像素的灰色实线，圆角为5像素
- 字体大小为16像素
- 聚焦时，边框颜色将变为#1abc9c

现在，我们需要添加一个搜索按钮。我们可以使用button标记：

<button type="submit">搜索</button>

为了美观和风格的统一，我们可以为这个按钮添加类样式：

button {
  background-color: #1abc9c;
  border: none;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

button:hover {
  background-color: #148f77;
}

这些CSS规则将为我们的搜索按钮添加以下样式：

- 背景颜色为#1abc9c
- 没有边框
- 字体颜色为白色
- 内边距为10像素上下，20像素左右
- 圆角为5像素
- 字体大小为16像素
- 鼠标悬停时，背景颜色将变为#148f77

最后，我们可以将搜索框和搜索按钮放在一个容器中，并将它们水平居中：

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

.search-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}

这些CSS规则将为我们的搜索框容器添加以下样式：

- 将容器的显示属性设置为flex
- 水平居中
- 垂直居中
- 顶部外边距为50像素

这些CSS规则将使您的搜索页面看起来更加美观和实用。如果您希望进一步自定义样式，请根据您的需求进行修改。