样品图
自制效果图（附注释）
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 定义文档的字符编码为UTF-8，以支持中文等多语言字符 -->
<meta charset="UTF-8" />
<!-- 设置页面在不同设备上的视口大小和初始缩放比例，以适应移动设备 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 页面标题，显示在浏览器标签上 -->
<title>Document</title>
<!-- 引入外部样式表，用于页面的样式布局 -->
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4303784_ill7enlyte.css" />
</head>
<style>
/* 移除链接的下划线装饰，使其看起来像按钮 */
a {
text-decoration: none;
}
/* 定义搜索框的样式 */
div {
width: 620px;
height: px;
border-radius: 10px;
background-color: #4e6ef2;
position: relative;
}
/* 定义搜索输入框的样式 */
input {
width: 520px;
height: 32px;
border-radius: 8px 0 0 8px;
margin-left: 2.4px;
outline: none;
outline-offset: 0;
border: none;
vertical-align: 0px;
}
/* 当输入框获得焦点时，改变边框颜色 */
input:focus {
border: 1px solid red;
}
/* 定义搜索按钮的样式 */
span {
font-size: 16px;
color: aliceblue;
vertical-align: -1.5px;
line-height: 40px;
margin-left: 7px;
cursor: pointer;
}
/* 定义关闭按钮的样式 */
i {
position: absolute;
top: 9px;
right: 100px;
cursor: pointer;
}
/* 定义iconfont图标样式 */
.iconfont {
font-size: 20px;
color: gray;
}
/* 定义搜索框在页面中的居中位置 */
.search {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<!-- 搜索框容器，包含搜索输入框、搜索按钮和关闭按钮 -->
<div class="search">
<input type="text" />
<a href=""><span>百度一下</span></a>
<i class="iconfont icon-xiangji" alt="用图片搜说"></i>
</div>
</body>
</html>
