HTML+CSS 簡易搜索框

本文轉載自查看原文 2019-08-21 18:06 22412 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;
        }

成品圖：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 利用HTML+css制作簡易時鍾 html+css 制作簡易導航欄 html+css創建提示框 HTML+CSS實現簡易可交互照片牆使用HTML+CSS，jQuery編寫的簡易計算器 html+css實現簡易下拉菜單 html+css制作一個簡易百度頁面 HTML/CSS實現的搜索框 html+css—純手寫登錄框 html+css實例