CSS制作可随页面大小拉伸的搜索框(响应式)

最新推荐文章于 2022-08-12 11:07:34 发布
最新推荐文章于 2022-08-12 11:07:34 发布
阅读量2.1k 收藏 8
点赞数 2
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fky_mie/article/details/113780047
版权
本文介绍了两种使用CSS创建响应式搜索框的方法。方法1利用定位和margin保持布局，搜索框宽度自适应，但无法设定宽度为100%。方法2采用flex布局，通过设置父元素display: flex;及子元素flex: 1;实现搜索框自动拉伸，适应不同屏幕大小。
摘要由CSDN通过智能技术生成

CSS制作可随页面大小拉伸的搜索框

案例：下图搜索框随着页面尺寸只有框的大小会被拉伸，而右边头像图标不变
在这里插入图片描述
在这里插入图片描述
很明显分为左右两个盒子，要求右边盒子大小不变，随着缩放，只有中间的搜索栏长度改变。
html分层如下：

<div class="search-index">
        <div class="search">
            搜索：目的地/酒店/景点/航班号
        </div>
        <div class=
最低0.47元/天 解锁文章
阿门阿前下的蜗牛
关注
专栏目录
【前端实例代码】使用 HTML CSS 和 JavaScript 制作一个响应式搜索栏
南北极之间
08-05 1184
addEventListener() 方法用于向指定元素添加事件句柄。使用方法来移除 addEventListener() 方法添加的事件句柄。classList 属性返回元素的类名，作为 DOMTokenList 对象。该属性用于在元素中添加，移除及切换 CSS 类。classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。...
响应式搜索框
10-26
在网上看到了别人做的搜索框，自己对其进行了改进，使其实现了简单的响应式。当网页宽度很小时，则隐藏框，只保留按钮
响应式伸缩搜索框特效
11-10
响应式伸缩搜索框特效
html5响应式导航条全屏下拉搜索框特效
10-27
html5响应式导航条全屏下拉搜索框特效
CSS3响应式伸缩搜索框.zip
07-03
CSS3响应式伸缩搜索框是一款鼠标点击搜索图标，搜索框自动拉伸展开，效果非常酷。
CSS3响应式伸缩搜索框特效代码
03-20
【CSS3响应式伸缩搜索框特效代码】是一种利用现代CSS3特性实现的网页交互设计。在当前网页设计中，响应式布局已经成为一种标准，它能够确保网站在不同设备上，如桌面、平板电脑和手机上，都能提供良好的用户体验。这...
html5 可伸缩搜索框动画效果源码下载
11-10
在源码中，可能还包含了CSS3的选择器、布局技术（如Flexbox或Grid）、以及响应式设计，以确保搜索框在不同设备和屏幕尺寸下都能良好地工作。此外，可能还会用到`<form>`标签来构建表单，`<button>`标签创建提交按钮...
html种table_td 列宽左右可拉伸_搜索条件可展开隐藏demo.rar
12-31
HTML中的表格（`<table>`）是用于展示结构化数据的标准元素，而在这个"html种table_td 列宽左右可拉伸_搜索条件可展开隐藏demo"中，开发者分享了一个功能丰富的示例，实现了表格列宽的动态调整以及搜索条件的展开与...
响应式页面、媒介查询、常见适配范围、响应式页面特点、常见的布局方案
CIA的博客
08-09 267
响应式页面 根据浏览器窗口不同的大小，显示不一样的样式 媒体查询 @media 设备类型 and 媒体特性{} @media 关键字 设备类型：all(所有设备)/screen(显示器、笔记本、移动端设备) and 连接符 and两侧有空格 媒体特性 max-width/min-width (1)px后面不要加(2)多个媒体特性用and连接 1.设置HTML和body为height：100%； 2.写出结构，头尾固定宽度100%，高度200px；中间由内容撑开 3.body设置为弹性盒
html中响应式查询,css 响应式（媒介查询）
weixin_30366015的博客
06-17 208
1.CSS 来实现响应式CSS实现响应式网站的布局要用到的就是CSS中的媒体查询接下来来简单介绍一下：@media 类型 and (条件1) and (条件二){css样式}我们只需用到width衍生出的max-width这个属性，定义输出设备中的页面可见区域宽度来控制该改变的样式即可。html代码如下：响应式头部左部中部右部底部demo01.css样式如下：body{margin:0;text-...
HTML、CSS——可伸缩式搜索框
u013430418的博客
08-12 1785
用HTML、css制作一个可以伸缩的搜索框。
解决css中div随窗口大小变化而变化
烟溪彭于晏的博客
07-12 9981
本来还很好看一旦缩放窗口，就成了这样 恶心吐了要。经过查找，给div添加下面css可解决，意思是强制在同一行展示，窗口缩放之后也是一样。这样子就顺眼多了 但是这样又有了一个麻烦，原本两行的内容，现在只能在一行展示，势必会挤压其他div的空间，导致图片又变小了。我们又只能通过强制换行了，如果只能通过强制换行而不是自动换行多多少少肯定还是有问题的。还有一个办法在其父元素加上以下样式，这样就不会因为 white-space：nowrap而影响布局。但是缺点也显而易见的，字体已经越界了。......
css怎么让网页随浏览器大小自动变化_响应式网页开发基础：DPR 与 viewport
weixin_29157493的博客
12-25 2129
响应式设计与开发中，有两个重要的概念，一直会贯穿整个流程，但又有很多人搞不清楚。它们就是 DPR 与 viewport，下面让我们看看这两个概念。什么是 DPR？我们知道在 Chrome 浏览器控制台 console 中输入 window.devicePixelRatio 可以获取当前屏幕的 DPR。那么什么是 DPR (Device Pixel Ratio)？这里不妨先给它个定义：window....
【前端练手小Demo】优雅实现伸缩搜索框
文艺倾年的博客
06-20 377
该文将主要介绍如何优雅实现伸缩搜索框
web前端开发培训培训，CSS如何清除默认样式
m0_60305422的博客
07-23 190
Stopwatch 解释为计时器，又称秒表、停表，很明显它是记录时间的。 如何使用 Stopwatch stopwatch = Stopwatch.createStarted(); doSomething(); stopwatch.stop(); // optional long millis = stopwatch.elapsed(MILLISECONDS); // formatted string like "12.3 ms"} log.info("time: " + stopwatc
移动端布局实现搜索框宽度自适应
Charonmomo的博客
07-21 1236
描述 例如移动端京东页面 (https://m.jd.com/) 的搜索框布局, 两侧的内容是固定不变的, 当浏览器宽度变化时, 只有中间的搜索框宽度变化. 如何实现这个问题呢? 思路 将这行中所有元素的位置都设置为position: fixed 将左右两边的元素设置position: absolu; 并且分别固定在左上角和右上角的位置, 这样两侧的元素就脱离了标准流. 中间的白色区域元素设置左右的margin值 (以及上下的margin), 空出两侧元素的位置. 但因为该元素仍在标准流中, 所以宽度会
Bootstrap自适应导航栏（带搜索框）
热门推荐
weixin_43751710的博客
05-01 2万+
使用Bootstrap创建的导航栏，最为原始的，没有任何的自定义颜色什么的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--声明文档兼容模式，表示使用IE浏览器的最新模式--> <meta http-equiv="X-UA-Compat...
CSS笔记——border
lihaoen666的博客
09-06 371
border-width不支持百分比 为什么？这是由语义和使用场景绝定的。边框，不会因为设备大，就按比例变大。 border-width支持关键字： thin 1px medium（默认） 3px thick 5px 为什么默认是3px？明明1px最常用 因为border-width：double至少3px才有效果。 border-style类型solid 实线 dashed 虚线 dot
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值