文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【移动端网页布局】Flex 弹性布局案例 ② ( 顶部固定定位搜索栏 | 固定定位盒子居中对齐 | 二倍精灵图设置 | CSS3 中的垂直居中对齐 )

一、顶部固定定位搜索栏 需求 : 制作如下搜索栏 ; 1、固定定位盒子居中对齐 首先 , 设置固定定位 , 固定定位盒子始终显示在浏览器中指定的位置 , 与父容器或其它容器无关 ; /* 固定定位盒子始终显示在浏览器中指定的位置...与父容器或其它容器无关 */ position: fixed; 然后 , 设置固定定位盒子垂直方向位置 , 设置为 top: 0; 紧贴顶部 ; /* 固定定位盒子位置紧贴顶部 */...: 640px; 3、使用 Flex 弹性布局管理宽度 在搜索框中 , 左侧是搜索栏 , 右侧是搜索按钮 ; 右侧的搜索按钮始终都是 44x44 像素大小 ; 左侧的搜索栏随着网页布局的宽度变化而变化...右侧的按钮设置固定大小 左侧搜索栏设置成 flex: 1 样式 自动占据剩余空间 */ display: flex; /* 固定定位盒子始终显示在浏览器中指定的位置 与父容器或其它容器无关...*/ position: fixed; /* 固定定位盒子位置紧贴顶部 */ top: 0; /* 将固定定位的盒子在页面中居中对齐 先将盒子左侧设置到中心位置

27520

【移动端网页布局】流式布局案例 ③ ( 实现搜索栏功能 | 伪元素选择器 | 子绝父相 | 外边距塌陷处理 | 二倍精灵图处理方案 )

; 左侧列表按钮图片尺寸为 20 x 18 像素 , 图片在父容器中 , 有 14 像素上边距 , 15 像素左边距 ; margin 外边距复合写法 , 外边距顺序为 : 上 / 右 / 下 /...左 ( 顺时针方向 ) ; css 样式实例 : .search-btn::before { /* 在 指定的标签元素内部的 前面 插入内容 */ /* 左侧按钮盒子中 插入 JD 图片...https://st.360buyimg.com/so/images/search/jd-sprites.png ; 这里涉及到将精灵图进行缩放 , 重新测量精灵图缩放后的 坐标位置 和 大小...; 在 Fireworks 中测量该精灵图大小为 30 x 29 像素 , 其左上角坐标位置为 166, 0 位置 ; 精灵图的大小是 400 x 400 像素的 , 计算缩放时 , 需要计算缩放比例...在 Firework 中 , 将精灵图缩小一半 ; 在缩小一半的精灵图中测量坐标 ; 将代码中的 background-size 缩小一半 , 也就是精灵图缩小一半 ; 最终测量后 , 在缩小一半的精灵图中

1.9K30
您找到你想要的搜索结果了吗？
是的
没有找到

HTMLayout 界面贴图技术

CSS1/CSS3 无 设置或检索对象的背景图像如何铺排填充 background-attachment CSS1/CSS3 无 设置或检索对象的背景图像是随对象内容滚动还是固定的 background-position...HTMLayout CSS 贴图属性 ---- 前景图片一般位于背景图片前面，即使不是同一个节点对象， 例如 div对象#A包含div节点#B,那么#A的前景图片在#B的背景图片前面( 但是#A的背景图片仍然在...九宫格切图模式 可以配合以下属性指定切片坐标, 使图片分为九个分区: ****ground-position-left: 左侧块切片位置 ****ground-position-top: 指定顶部切片位置...如果需要对这些位于中间部位的图片进行拉伸处理, 可以使用CSS中的 ****ground-stretch 指定拉伸方式....对比度和亮度的中间值为 0.5.

2.4K40

【移动端网页布局】Flex 弹性布局案例 ③ ( 横向导航栏 | 固定定位下面的布局设置 | 设置横向导航栏弹性布局 | 弹性布局主轴和侧轴设置 | 二倍精灵图 )

一、横向导航栏实现核心要点 需求 : 实现如下布局 ; 上一篇博客中 , 已经实现了顶部的搜索栏 , 本篇博客开始实现后续部分 ; 1、固定定位下面的布局设置 在上一篇博客中实现的搜索栏 , 使用...固定定位 设置该搜索栏位置 , 不管网页如何滚动 , 最上方始终显示该搜索栏 ; 搜索栏下方的 Banner 轮播图 , 如果以 标准流 显示 , 会被 搜索栏 覆盖 , 此处为 Banner 轮播图设置一个上外边距...右侧的按钮设置固定大小 左侧搜索栏设置成 flex: 1 样式 自动占据剩余空间 */ display: flex; /* 固定定位盒子始终显示在浏览器中指定的位置 与父容器或其它容器无关...*/ position: fixed; /* 固定定位盒子位置紧贴顶部 */ top: 0; /* 将固定定位的盒子在页面中居中对齐 先将盒子左侧设置到中心位置...: 该图片在缩小一倍的精灵图的 59, 194 位置, 设置背景时将精灵图 向左移动 59 像素 向上移动 194 像素 */

41220

让剁手党洞察物体细节，“放大镜”当之无愧

当鼠标移动到原图上时，通过对大图进行位置控制来显示对应的部位。 2....当鼠标移动到box上方时，move块将显示，同时在放大区中显示大图的对应位置，所以我们在这里需要使用mousemove事件监听，当我们鼠标移入box时，就需要获取当前鼠标的相对坐标位置。...newY = e.clientY; // 获取当前鼠标Y轴位置 } 3.通过获取到的鼠标坐标位置，减去box左/上距视口的距离，再减去move块所展现出来的宽高的1/2，则得到获取到当前的move块位置...- (mov.offsetWidth / 2); //获取移动时move块距父级的顶部距离 4.临界值判断，当move的移动距离超出了box的范围时，需要限制其最大移动值与最小移动值。...bec.scrollLeft = nowX * 图片占比; // 大图横向显示位置 bec.scrollTop = nowY * 图片占比; // 大图纵向显示位置 6.根据实际需求，当鼠标移入时，使用

1.3K80

【实例】调整区域大小&动态隐藏区域

​ CSS布局相关及Flex详解，提及到使用Flex来完成一侧固定大小，另一随浏览器大小自动缩放。今天开发中，有这样一个需求，在两块内容中间增加一条线，然后拖拽线，可以自动调整两侧区域。...MouseEvent属性 说明 实例值 clientX、clientY 设置或获取鼠标指针位置相对于窗口客户区域的 X、Y 坐标（不包括滚动条） 106+3+300-5+2=406 offsetX、offsetY...设置或获取鼠标指针位置相对于触发事件的对象的X、Y坐标 2 pageX、pageY （只读）相对于整个文档的X、Y坐标以像素为单位的只读属性（包括滚动条） 74+106+3+300-5+2=480 screenX...、screenY 设置或获取获取鼠标指针位置相对于用户屏幕的X、Y坐标 1440+clientX=1846 x、y clientX、clientY的别名 与clientX相等 Element Element...这个接口描述了所有相同种类的元素所普遍具有的方法和属性。 这些继承自Element并且增加了一些额外功能的接口描述了具体的行为.

1.7K21

【移动端网页布局】流式布局案例 ⑤ ( 连续排列的链接图片 | 设置盒子圆角 | 超出部分隐藏 | 设置浮动布局 | 精确计算浮动元素宽度避免换行 | 设置图片宽度自适应 )

-- 链接放在 div 盒子中 使用 a 标签包裹 img 标签 --> <img src=...3、设置圆角和超过部分隐藏 在布局的 左上角 和 右上角 都有一个圆角 , 并且矩形图片超过圆角的部分被隐藏了 , 设置圆角和超出部分隐藏样式 : .brand { /* 设置圆角后 超过圆角的图片不再显示...-- 链接放在 div 盒子中 使用 a 标签包裹 img 标签 --> <img src=...该布局最大 640 像素 */ max-width: 640px; } .search-btn { /* 左侧按钮布局 */ /* 左侧按钮需要设置到左侧 使用绝对定位进行设置...: 15px; /* 设置精灵图 以及精灵图中的放大镜图标位置 */ background: url(..

3.5K20

jQuery 尺寸、位置操作

jQuery 尺寸操作 ​ jQuery 尺寸操作包括元素宽高的获取和设置，且不一样的API对应不一样的盒子模型。 语法   1.以上参数为空，则是获取相应值，返回的是数字型。...)); }) 注意：有了这套 API 我们将可以快速获取和子的宽高，至于其他属性想要获取和设置，还要使用 css() 等方法配合。...offset().top  用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离。...3. scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧 ① scrollTop() 方法设置或返回被选元素被卷去的头部。...案例：带有动画的返回顶部 1.核心原理： 使用animate动画返回顶部 2.animate动画函数里面有个scrollTop 属性，可以设置位置 3.但是是元素做动画，因此 $(“body,html

1.1K20

可视化搭建数据大屏系统的前端实现

实现思路是以这些基本元素为组件，通过选择组件、拖拽方式布局，配置样式、数据来源，将这些数据保存在数据库中。展示页面获取依赖的组件、样式和数据信息，呈现给用户。 大屏按场景划分，可分为编辑和查看。...中，未使用 Vuex（后续会考虑使用 Vuex） 数据用 props 传递给子组件 数据从子组件采用事件中心传递给祖父级组件 顶部 顶部区域包含三部分：左侧开关区、控制图层、组件列表、数据配置区的显示隐藏...实现原理是使用数组的基本方法改变数组 单击组件选择该组件，画布区选中组件，数据配置区显示配置项 组件列表 所有组件展示所有大屏组件，点击或拖动添加组件 添加组件采用异步获取组件的 JS、CSS 、配置...Schema，将 CSS、JS 插入 DOM 中，配置传入属性配置区 支持按组件类型分组，便于用户使用。...缩放实现使用 CSS3 的transform: scale(${this.scale})。 画布上未选择组件时，显示页面的基本配置，包括大屏的宽高、背景图。

7.8K10

商品添加到购物车动画getBoundingClientRect获取元素位置

1.2 用户滑动右侧的内容左侧的导航栏会响应式改变 右侧内容监听一个scroll事件，当触发滑动事件的时候获取粘性定位在顶部的标题，根据标题使导航栏定位到相应的li var obj = element.getBoundingClientRect...这也实现了内容区标题栏始终在顶部的效果。关于粘性定位更多的可以看这里 2. 按钮缓慢弹出 当我们点击添加按钮的时候其他的内容会缓慢弹出，这个是靠css的动画实现的。...--其他n个小球--> 令小球为绝对定位这样可以改变它的left和top。...动画实现思路：用户点击添加时将一个小球的位置设置为被点击元素的位置，且获取目的地位置（购物车位置），当小球抛出时使其运动方式按照贝塞尔曲线过渡。...}, 1); } 注意点： 嵌套的setTimeout中的时间之所以设置为1s，是因为css中规定的小球运动时间为1s，所以在小球1s运动完以后会令它恢复到原来的位置，你想想，小球一共就只有那么几个

1.6K20

17个场景，带你入门CSS布局

CSS 布局本质就是控制元素的位置和大小。比如这样的布局：元素宽960px，水平居中。宽960px是大小。水平居中是位置。...又如这样的布局：两个元素在一行，左侧元素固定宽200px，右侧元素撑满剩余空间。固定宽200px，撑满剩余空间是大小。两个元素在一行是位置。 下面，我们从大小和位置两个方面，结合场景来看CSS布局。...如果元素的宽高值用rem做单位，用js获取当前设备的宽度来设置根元素的字体大小，那么，就能实现元素的宽高和设备的大小有关。...使用绝对定位前，我们要先了解position的知识。 CSS 的position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。...注 注1: 大部分情况之外的情况包括： Flex 布局中，如果项目的的 flex-grow 或 flex-shirk 的值不为0，则Flex项目的大小不由是CSS设置的width和height决定。

2.5K20

【前端就业课 第二阶段】CSS 零基础到实战（04）定位

相对定位可以理解为在 HTML 中，元素会依照原有的顺序进行显示，通过相对距离（例如左右距离多少）的方式使这些元素进行位置的显示。...而定位就是指对某个元素显示于在文档流（页面）中的某个位置，又或使某个元素脱离文档流进行显示，而在此所属的脱离则是表示某元素不存在于文档流中，具体是如何咱们接下来详细说明。...fixed sticky 在本章开始时，了解了相对定位和绝对定位，而后又了解了 position 定位的属性值，这些值对应了相对定位和绝对定位，例如： 相对定位的 position 属性值有 relative...top 属性表示距离头部距离为 10px，并且给予了淡青色为背景颜色，在页面中显示如下： 我们可以明显的看到淡青色的 div 距离顶部有一定的距离，接着咱们在对应的css 中增加 right 属性...这些定位属性使其显示即可： 显示效果如下： 如何使用 absolute 将会在之后文章进行讲解。

25720

CSS-浮动(float)

浮动的特性 浮动的元素的对齐 浮动的元素排列位置 为什么要清除浮动 清除浮动本质 清除浮动的方法 使用after伪元素清除浮动 # CSS 布局的三种机制 网页布局的核心——就是用 CSS 来摆放盒子。...# 浮动的元素排列位置 浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。...由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。 准确地说，并不是清除浮动，而是清除浮动后造成的影响。...在CSS中，clear属性用于清除浮动，其基本语法格式如下： 选择器{ clear:属性值; } 属性值 描述 left 不允许左侧有浮动元素（清除左侧浮动的影响） right 不允许右侧有浮动元素...使用对象的实际尺寸 number : 百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值 使用说明 设置或检索对象的缩放比例。

2.1K20

手势魅力-设置一个触摸菜单

但这是另一天的战斗。或另一篇文章。或两者 今天，我们要告诉你如何用手势创建一个本地菜单 ? 让羊驼走上舞台！...这有什么好处呢 浏览器将尝试匹配显示刷新，以允许流畅的动画 非活动选项卡中的动画将停止（在CPU上花费的更少) 它不会耗尽你的电池寿命 拖动,点击和滑动:额外的东西要考虑移动触摸手势 这些事件需要能够检测和区分拖拽...是的,现在是讨论变量的时候了。这好消息是，我也要解释为什么要设置它们的价值。这些功能将使代码看起来更清洁 全局变量和设置默认值 啊,是如此的好玩！看看所需要的变量数量;正是大多数人倾向于跳过的东西。...为了可读性,在函数中没有太多的代码行，我把它们全部分成了小的一行 这个手机触摸手势最后有趣的一部分 现在我对触摸事件,变量和函数的解释已经不存在了,现在是我关注如何创建动画的时候了。...(手势方向,水平,垂直,还有手指根数) 你不知道你想知道的关于 - 是超级重要的部分 全局变量和设置默认值(一些初始化值变量的设置) 函数中的函数(手指按下,移动,抬起功能函数的封装调用) 这个手机触摸手势最后有趣的一部分

1.8K40

CSS Flexbox 布局完全指南 （一）：4000字，多示例讲解

示例二：如何通过 Flexbox 布局卡片 卡片在网上很流行，无论是Google, Twitter 还是 Pinterest，每个网站都在使用卡片。...使用 Flexbox 如下布局： .card { flex: 0 0 250px} 这个样式将 flex-grow 和 flex-shrink 的值设为 0， flex-basis 值为 250px...示例三：如何使用 Flexbox 创建网格布局 在这个例子中，我们要探讨整体的 CSS 框架概念，这是很重要的一点。 什么是网格布局？ 网格是用来构建内容的一系列水平垂直相交引导线。 ?...flex: 1 只有 1 的值，这个值代表的是 flex-grow 属性。 而 flex-shrink 和 flex-basis 则分别设置为 1 和 0。...水平网格布局中的元素是其他的两倍或三倍 实现方式很简单。

4.3K20
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券