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

最新推荐文章于 2023-05-09 21:08:17 发布
最新推荐文章于 2023-05-09 21:08:17 发布
阅读量2.1k 收藏 8
点赞数 2
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fky_mie/article/details/113780047
版权

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

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

<div class="search-index">
        <div class="search">
            搜索：目的地/酒店/景点/航班号
        </div>
        <div class="<
最低0.47元/天 解锁文章
阿门阿前下的蜗牛
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【前端实例代码】使用 HTML CSS 和 JavaScript 制作一个响应式搜索栏
南北极之间
08-05 1138
addEventListener() 方法用于向指定元素添加事件句柄。使用方法来移除 addEventListener() 方法添加的事件句柄。classList 属性返回元素的类名，作为 DOMTokenList 对象。该属性用于在元素中添加，移除及切换 CSS 类。classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。...
CSS定位
weixin_45588014的博客
09-07 124
CSS 定位 (Positioning) CSS 外边距合并 CSS 相对定位 CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。 定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相...
响应式伸缩搜索框特效
11-10
响应式伸缩搜索框特效
解决css中div随窗口大小变化而变化
烟溪彭于晏的博客
07-12 9499
本来还很好看一旦缩放窗口，就成了这样 恶心吐了要。经过查找，给div添加下面css可解决，意思是强制在同一行展示，窗口缩放之后也是一样。这样子就顺眼多了 但是这样又有了一个麻烦，原本两行的内容，现在只能在一行展示，势必会挤压其他div的空间，导致图片又变小了。我们又只能通过强制换行了，如果只能通过强制换行而不是自动换行多多少少肯定还是有问题的。还有一个办法在其父元素加上以下样式，这样就不会因为 white-space：nowrap而影响布局。但是缺点也显而易见的，字体已经越界了。......
css怎么让网页随浏览器大小自动变化_响应式网页开发基础：DPR 与 viewport
weixin_29157493的博客
12-25 2080
响应式设计与开发中，有两个重要的概念，一直会贯穿整个流程，但又有很多人搞不清楚。它们就是 DPR 与 viewport，下面让我们看看这两个概念。什么是 DPR？我们知道在 Chrome 浏览器控制台 console 中输入 window.devicePixelRatio 可以获取当前屏幕的 DPR。那么什么是 DPR (Device Pixel Ratio)？这里不妨先给它个定义：window....
CSS3响应式伸缩搜索框特效代码
03-20
CSS3响应式伸缩搜索框是一款鼠标点击搜索图标，搜索框自动拉伸展开，效果非常酷。
html5/css3响应式页面开发总结
09-22
在本文中，我们将探讨响应式页面开发的核心概念、自适应与响应式之间的区别，以及实现响应式设计的一些关键技术。 首先，我们需要理解自适应布局和响应式布局的区别。自适应布局（Adaptive Layout）主要是通过设定...
渴切-基于响应式布局的国产css框架特效代码
03-20
渴切是一个开源中文 (X)...它融入了css3技术，以及响应式布局，12列栅格系统，视差滚动等效果。它提供一个可靠的css基础去创建你的项 目,能够用于网站的快速设计,通过重设和重建浏览器标准，可以让每个网站防 止
使用CSS3的rem属性制作响应式页面布局的要点解析
09-27
使用CSS3的rem属性制作响应式页面布局的关键在于理解rem单位的本质和其在不同屏幕尺寸下的动态调整。rem（root em）单位是一个相对单位，它表示元素的尺寸相对于根元素（通常是html）的字体大小。这使得rem成为构建...
响应式搜索框
10-26
在网上看到了别人做的搜索框，自己对其进行了改进，使其实现了简单的响应式。当网页宽度很小时，则隐藏框，只保留按钮
html5响应式导航条全屏下拉搜索框特效
10-27
html5响应式导航条全屏下拉搜索框特效
CSS3响应式伸缩搜索框.zip
07-03
CSS3响应式伸缩搜索框是一款鼠标点击搜索图标，搜索框自动拉伸展开，效果非常酷。
基于Bootstrap和CSS3的响应式UI框架
04-16
解压密码：RJ4587 还记得之前我们分享过的Metro...今天我们要来分享一组基于Bootstrap和CSS3的响应式UI框架，这个UI框架中，包含了自定义CSS3按钮、自定义CSS3复选框和单选框、自定义CSS3下拉框等等，外观非常漂亮。
用CSS实现漂亮的搜索框，让你的网站瞬间高大上！
centaurusR的博客
05-09 2487
搜索框是网页中不可或缺的元素之一，能够让用户快速地找到他们所需要的信息。一个漂亮的搜索框能够为网站增添不少色彩和个性。本文将会教大家如何用CSS实现一个漂亮的搜索框，让你的网站瞬间高大上！首先，我们需要设置搜索框的样式。通过设置搜索框的大小、背景色、边框、圆角等属性，可以让搜索框看起来更加美观和舒适。同时，我们还可以利用伪元素和渐变等技巧为搜索框添加一些阴影和渐变效果，让它看起来更加立体和有层次感。其次，我们需要让搜索框水平和垂直居中。这里可以通过设置父元素的display和。
web前端开发培训培训，CSS如何清除默认样式
m0_60305422的博客
07-23 182
Stopwatch 解释为计时器，又称秒表、停表，很明显它是记录时间的。 如何使用 Stopwatch stopwatch = Stopwatch.createStarted(); doSomething(); stopwatch.stop(); // optional long millis = stopwatch.elapsed(MILLISECONDS); // formatted string like "12.3 ms"} log.info("time: " + stopwatc
CSS笔记——border
lihaoen666的博客
09-06 348
border-width不支持百分比 为什么？这是由语义和使用场景绝定的。边框，不会因为设备大，就按比例变大。 border-width支持关键字： thin 1px medium（默认） 3px thick 5px 为什么默认是3px？明明1px最常用 因为border-width：double至少3px才有效果。 border-style类型solid 实线 dashed 虚线 dot
HTML、CSS——可伸缩式搜索框
u013430418的博客
08-12 1682
用HTML、css制作一个可以伸缩的搜索框。
CSS-select和option宽度不一致
hzzh_kk的博客
03-23 440
在做手机pc端的表单需求的时候，用浏览器开发者工具将网页切换成手机格式调试时，发现select和option的宽度不一致的问题
Css 字体设置响应式，随页面分辨率增大字体变大
最新发布
05-27
要实现字体随页面分辨率增大而变大的响应式效果，可以使用 CSS3 中的 @media 媒体查询和 vw/vh 视窗单位。 首先，可以在 CSS 中为字体设置一个基本的大小，例如： ``` body { font-size: 16px; } ``` 然后，在 @media 媒体查询中根据页面宽度设置不同的字体大小。例如，当页面宽度大于等于 768px 时，可以将字体大小设置为 2vw： ``` @media screen and (min-width: 768px) { body { font-size: 2vw; } } ``` 这样，当页面宽度增大时，字体大小也会随之增大。其中，vw 是相对于视口宽度的单位，1vw 等于视口宽度的 1%。 类似地，也可以使用 vh 视口高度单位实现高度响应式字体大小。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值