百度搜索框制作HTML+CSS

admin2024-07-10  12

样品图

百度搜索框制作HTML+CSS,第1张

自制效果图(附注释)

百度搜索框制作HTML+CSS,第2张

<!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>
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!