百度搜索框制作HTML+CSS

Xingxing？！

于 2024-07-10 13:40:50 发布

阅读量521

点赞数 9

文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_65798038/article/details/140321651

版权

样品图

自制效果图（附注释）

<!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>