HTML百度搜索框实现(附源码带注释)

托尼stark

于 2019-05-11 21:55:44 发布

阅读量3.5w

点赞数 27

分类专栏： Web 文章标签： HTML百度搜索框实现(附源码带注释)

本文链接：https://blog.youkuaiyun.com/qq_40808154/article/details/90115711

版权

Web 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何使用HTML和CSS创建一个类似百度的搜索框，包括输入框和搜索按钮的样式设计，以及如何通过浮动解决布局问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.百度类效果

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .search_form{
        width:602px;
        height:42px;
    }

    /*左边输入框设置样式*/
    .input_text{
        width:400px;
        height: 40px;
        border:1px solid green;
        /*清除掉默认的padding*/
        padding:0px;

        /*提示字首行缩进*/
        text-indent: 10px;

        /*去掉蓝色高亮框*/
        outline: none;

        /*用浮动解决内联元素错位及小间距的问题*/
        float:left;
    }

    .input_sub{
        width:100px;
        height: 42px;
        background: green;

        /*去掉submit按钮默认边框*/
        border:0px;
        /*改成右浮动也是可以的*/
        float:left;
        color:white;/*搜索的字体颜色为白色*/
        cursor:pointer;/*鼠标变为小手*/
    }
    </style>
</head>
<body>
    <form class="search_form">
    <input type="text" class="input_text" placeholder="请输入搜索内容"><!-- -->
    <input type="submit" value="搜索" class="input_sub">

    </form>
</body>
</html>