文档章节

HTML+CSS 简易搜索框

o
 osc_wws45aot
发布于 2019/08/21 18:06
字数 164
阅读 0
收藏 0

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

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;
        }

成品图:

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

Java 获取资源文件路径

1 问题描述 通过源码运行时,一般使用如下方式读取资源文件: String str = "1.jpg"; 资源文件与源码文件放在同一目录下,或者拥有同一父级目录: String str = "a/b/1.jpg"; 这样直接编译...

氷泠
29分钟前
6
0
Linux程序移植到Android上

序言: 由于本人还是比较偏重于先说明原理在说明实际操作步骤,要知其然更要知其所以然,如下图所示: 传统的linux系统中的程序基本都依赖于glibc(至于什么是glibc可以百度去),而右边AOS...

shzwork
41分钟前
22
0
git 为项目设置用户名/邮箱/密码

1.找到项目所在目录下的 .git,进入.git文件夹,然后执行如下命令分别设置用户名和邮箱 git config user.name "Affandi" git config user.email "123333333@qq.com" 然后执行命令查看con......

有时很滑稽
今天
0
0
如何从int转换为String? - How do I convert from int to String?

问题: I'm working on a project where all conversions from int to String are done like this: 我正在一个项目中,所有从int到String转换都是这样完成的: int i = 5;String strI = "" ......

javail
今天
19
0
Vue+Spring Data JPA+MySQL 增查改删

视频讲解: https://www.bilibili.com/video/BV16i4y1G7i2/ 工程概述: 前后端分离,进行简单增查改删(CRUD) 前端使用VUE 后端使用Spring Data JPA 数据库使用MySQL #EmployeeController.jav...

潘文海
今天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部