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
Copyright © 2011-2022 走看看