首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

我在移动web开发中遇到的各种问题

触发bug的条件是需要横向滚动的层不能位于纵向滚动不是body的层下面(后面有具体解释)。...="height: 1000px;background-color: black"> 如上html,如果把div的height: 500px;overflow: auto;去掉,纵向滚动的层是...但是当加上它们之后,此时纵向滚动的层变成了div,这时再来拖动ul发现它不能横向滚动了!...(但我发现一个奇怪的现象,同样是有横向滚动的弹窗,只要关掉再打开弹窗,就可以正常地横向滚动了,不需要在纵向滚动层为body的情况下也行) 解决方法:1、让滚动的层变回body就行了。...2、保证数据量不会造成纵向滚动也行。 但是做web app,不能保证时时都能直接用body作为滚动层的,尤其是在弹窗中的时候,请问有更好,不使用js的解决方法吗?

1.7K20

fullpage.js横屏多页面切换

fullpage.js是一款切换效果插件,支持主流浏览器与ie8+,网上的示例多是纵向切换,但是横向切换示例较少,翻看了一下api文档,调用moveTo方法,即可切换至任意纵向任意横向的分屏中,先看下效果...这里没有使用默认导航栏,而是自定义的切换按钮,更加灵活方便,便于修改,页面也使用的是iframe嵌套,官方示例中多是图片背景切换,没有太大的价值,切换代码很简单,首先引用fullpage.js和...() { //moveTo方法参数,第一个参数为section的下标,第二个参数为slide的下标 //section为纵向切换...,slide为横向切换 $.fn.fullpage.moveTo(1, index); $("li").removeClass...(); $(this).parent('li').addClass("active"); }) })

34340

前端基础-CSS3和CSS2的区别

二、css3和css2的区别 css3在原有的基础上新增了很多css属性选择器,伪类选择器,伪对象选择器以及动画 H5=html5 + css3 +js 大前端:js 1.内减模式 可以将padding...2d变换效果 可以设置移动,旋转,大小 语法:transform:值 a)移动 ​ 语法:transform:translate(值1,值2); ​ 取值:第一个值代表横向移动的像素,第二个值代表纵向移动的像素...200px; height:200px; background:#f00; } .box:hover{ transform:translate(50px,20px); /* 横线移动和纵向移动...只设置x轴或者y轴的移动可以使用translateX和translateY,里面只设置一个值即可 b)旋转 ​ 语法:transform:rotate(角度);transform-origin:横向坐标 纵向坐标...2.横向坐标和纵向坐标确定旋转的圆心,可以是像素,也可以是关键字(left,right,top,bottom,center),不设置的话,旋转的圆心默认是中心点 <meta charset

1.3K20

5 种瀑布流场景的实现原理解析

5 种场景分别是: 瀑布流 特点 纵向+高度排序 纯 CSS 多列实现,是最简单的瀑布流写法 纵向+高度排序+根据宽度自适应列数 通过 JS 根据屏幕宽度计算列数,在 web 端更加灵活的展示瀑布流 横向...下图就是一个瀑布流布局的示意图: 三、纵向+高度排序— 纵向+高度排序指的是,每列按照纵向排列,往高度最小的列添加内容,如下图所示。 实现纵向+高度排序瀑布流的方法是 CSS 多列布局。 1....; flex-wrap:指定了弹性子元素的换行方式; align-content:指定弹性布局各行的对齐方式; order:指定弹性子元素的排列顺序; align-self:指定弹性子元素的纵向对齐方式...实现思路 瀑布流实现思路如下: CSS 弹性布局对 4 列按横向排列,对每一列内部按纵向排列。 3....高度排序就需要用 JS 逻辑来做了。 1. 实现思路 JS 将瀑布流的列表按高度均为分为指定列数,比如瀑布流为 4 列,那么就要把瀑布流列表分成 4 个列表 2.

3.7K31

一个前端开发对于Flex布局的总结(图解,简单易懂,全)

横向排列,项目排列顺序为正序1-2-3; row-reverse:同为横向排列,但项目顺序为倒序3-2-1; column :与row相反,为纵向排列,项目顺序为正序1-2-3; column-reverse...:同为纵向排列,项目顺序为倒序3-2-1; 2.2 flex-wrap属性(换行)# 取值:nowrap(默认) | wrap | wrap-reverse 用于控制项目是否换行。...容器属性写在容器上,项目属性写在项目上,就好比容器属性给ul,项目属性给li。 3.1 order# 取值:默认0,用于决定项目排列顺序,数值越小,项目排列越靠前。...11 12 13 ​ 5 源码仓库地址# template-html-css-js.../02flex布局.html at main · front-end-study-GoGoGo/template-html-css-js (github.com)

1.5K20

Html&Css 基础总结(基础好了才是最能打的)二

视频共15天,作者会以天为粒度,来分散到不同文章中,有兴趣的小伙伴可以关注一下,谢谢你 书中错误在所难免,如果有小伙伴发现的话恳请斧正,在此先谢过咯~ 基本标签 列表就如同字面意思所讲,将内容按照顺序排列...,或横向或纵向; 列表标签大致三分类, 分为有序、无序、自定义列表 无序列表标签 在无序列表中, 标签是ul&li的配合,其中ul是无序列表, li是列表条目; 我是item</li...; 我是item 我是item tips:有序列表ol跟无序列表ul, 只能包含li, 但是li可以包含任何内容; 定义列表标签 标签是dl,...table> 我是表头 我是表内容 我是表头 我是表内容 一般配合js...提交,点击后提交数据到后台(默认) reset 重置, 恢复各项数据; button, 普通按钮,没有默认功能, 一般配合js使用 reset重置时,需要外部包括form才可以进行表单数据的清除

2300
领券