HTML+CSS 简易搜索框

最新推荐文章于 2024-02-23 23:51:32 发布

转载最新推荐文章于 2024-02-23 23:51:32 发布 · 3.1k 阅读

26 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/smile-xin/p/11390319.html

本文分享了一个简单的搜索框设计案例，包括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;
        }

成品图：

转载于:https://www.cnblogs.com/smile-xin/p/11390319.html

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

图片生成

Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率