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

最新推荐文章于 2024-05-01 15:22:30 发布

托尼stark

最新推荐文章于 2024-05-01 15:22:30 发布

阅读量3.4w

点赞数 26

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

本文链接：https://blog.csdn.net/qq_40808154/article/details/90115711

版权

Web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>

托尼stark

关注

26
点赞
踩
141

收藏

觉得还不错? 一键收藏
13
评论
HTML百度搜索框实现(附源码带注释)

1.百度类效果源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...
复制链接

扫一扫