样品图
自制效果图（附注释）
<!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>
