zoukankan html css js c++ java

HTML+CSS 简易搜索框

搜索框是页面中很常见的一种，下面分享一段简单搜索框案例，直接上代码

HTML部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>搜索框</title>
    </head>
    
    <body>
        <div class="search">
            <input type="text" placeholder="请输入..." name="" id="" value="" />
            <button><i>搜索</i></button>
        </div>
    </body>
</html>

CSS部分

        *{
            padding: 0;
            margin: 0;
        }
        .search{
            width: 30%;            
            margin: 100px auto;
            display: flex;
            /*border: 1px solid red;*/
        }
        .search input{
            float: left;//左浮动
            flex: 4;
            height: 30px;
            outline: none;
            border: 1px solid red;
            box-sizing: border-box;//盒子模型，怪异IE盒子模型，width=content+border*2+padding*2
            padding-left: 10px;
        }
        .search button{
            float: right;
            flex: 1;
            height: 30px;
            background-color: red;
            color: white;
            border-style: none;
            outline: none;
        }
        .search button i{
            font-style: normal;
        }
        .search button:hover{
            font-size: 16px;
        }

成品图：

查看全文

相关阅读:
语句
 1101 事务存储引擎触发器函数
 1029 作业
 1029 数据库表以及行的基本操作
 1023 笔记
 1022 作业
 1022 笔记
 1021 笔记
 查看pip已经安装过的包
 查看Python支持的.whl文件版本

原文地址：https://www.cnblogs.com/smile-xin/p/11390319.html