精华内容
下载资源
问答
  • 前言 我们前端的工作我们的去写页面,总会觉得这样的效果给到用户好像很干没有什么体验 那我们就想搞搞新意思? 弄点动画上去憋,那么弄动画我又想他滚动又想他偏移又想...其实嘛是可以嵌套使用的哦 工具...

    前言

    • 在我们前端的工作中我们的去写页面,总会觉得这样的效果给到用户好像很干没有什么体验
    • 那我们就想搞搞新意思?
    • 弄点动画上去憋,那么弄动画我又想他滚动又想他偏移又想有渐变效果
    • 渐变和移动可以写在一起,但是滚动和偏移好像不可以一起执行喔
    • 那我们就要分开两步来执行但是,vue的transition里面好像不可以同时执行两个transform
    • 所以我们就来解决这个问题
    • 其实嘛是可以嵌套使用的哦

    工具/资料

    • mac os 10.13.3
    • vue官方文档 https://cn.vuejs.org/v2/guide/transitions.html
    • vs code

    开始

    1. 套用我们的 transition
      • 在我们需要定义效果的外面包上 transition
      • 这个 name 呢是自定义的也可以不写,个人认为最好是写一下
    <transition name="move">
        <div class="cart-decrease" v-show="food.count>0" @click="decreaseCart">
            <span class="inner icon-remove_circle_outline"></span>
        </div>
    </transition>
    复制代码
    1. 定义Css
      • 如果使用name了,-前面写的就是name定义的名称,如果没有写那就直接用v就好
      • 在我们要嵌套动画的地方也是向平时css关系那些嵌套进去就好了
    /* 这里我们定义了滑动和渐变 */
    .move-enter-active, .move-leave-active
        transition: all .4s linear
        opacity: 1
        transform translate3d(0,0,0)
    .move-enter, .move-leave-to /* .fade-leave-active below version 2.1.8 */
        opacity: 0
        transform translate3d(24px,0,0)
    
    /* 
        定义滚动
        这里我是动画下的,span想添加效果
        那么我们就把类名拼接在后面去使用就好了
        如果添加了不生效,那就换一个类名,因为有一些是官方的类名是不允许使用的
     */
    .move-enter-active .inner, .move-leave-active .inner
        transition: all .4s linear
        transform rotate(0)
    .move-enter .inner, .move-leave-to .inner
        transform rotate(180deg)
    复制代码
    • 这样我们就实现了即滚动也偏移

    后记

    • 看了有没有发现很简单哈,其实本来也就是很简单嘛,只是一开始傻乎乎的用了in使得效果没粗来以为不可以这样用
    • 这是本人的学习问题记录的笔记,有需要的可以借鉴
    • 欢迎添加微信交流学习
    • 欢迎进入我的博客:https://yhf7.github.io/
    • 如果有什么侵权的话,请及时添加小编微信以及qq也可以来告诉小编(905477376微信qq通用),谢谢!

    转载于:https://juejin.im/post/5c85c37f6fb9a04a0956dcfe

    展开全文
  • 1、内部嵌入iframe,里面的内容页面中有绝对定位的元素,会问题! 现象:项目中嵌入 <iframe /> 并设置宽高后,发现 Android 手机浏览器上打开可以正常运行,但是 iOS 手机上会 iframe 页面样式莫名...

    实际项目开发中,iframe在移动设备中使用问题还是很大的,说一说我的那些iframe坑

      做过的这个后台管理框架,最开始的需求是PC,但随着业务需要,需要将项目兼容到ipad,后台的框架也是使用的开源框架开发,使用的是iframe嵌套页面的方式

    1、内部嵌入iframe,里面的内容页面中有绝对定位的元素,会有问题!

    现象:项目中嵌入 <iframe /> 并设置宽高后,发现在 Android 手机浏览器上打开可以正常运行,但是在 iOS 手机上会有 iframe 页面样式莫名变大,效果如下:

    经过各种尝试以及找了很多资料,最后终于找到一个完美解决的办法,感谢 <不靠谱的人> 采取了他的方案后,很漂亮的解决了这个bug......

    代码如下:

    <div style="overflow: auto;-webkit-overflow-scrolling:touch;width:100%;height:100%;"> 
     
      <iframe v-if="type" :src="outurl" scrolling="auto" frameborder="0" width="100%" height="100%"></iframe>
      <iframe v-else :src="outurl" frameborder="0" height="100%" scrolling='no' style="width: 1px; min-width: 100%; *width: 100%;"></iframe>
    </div>  // 这种放大也可能是轮播外侧没有嵌套一层标签所致,手机单独浏览没有问题,如果嵌入iframe ios手机就会出现

    再测发现ios android 受到scrolling="no"影响,需要判断一下设备类型,在data里面定义一个type变量,created钩子函数里面执行这个代码判断如何显示就ok了

    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    // var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    // console.log('是否是Android:'+isAndroid);
    // console.log('是否是iOS:'+isiOS);
    if(isAndroid){
      this.type = true
    }else{
      this.type = false
    }

    因为嵌入的页面不统一,发现使用如上的方法仍然导致部分页面或多或少的出现问题,后来我将提供嵌入的页面,每一个都做了测试,发现内部页面会不能正常显示,除了外部的布局外,内部的页面布局也会有影响,需要同时做修改,否则页面无法达到需求标准,最终功能并没有上线,不过可以总结出:移动端frame嵌入页面注意的问题还是很多的,简单的还好,复杂嵌入请谨慎使用。

    展开全文
  • 一个页面中可以嵌套另外一个页面,如frame/iframe技术,这是现在很多web应用中使用的一种方式,webdriver对象只能一个页面(外层是默认的)中定位元素,需要一种方式将driver对象从外层切换给内层使用才能对内层...

    在一个页面中可以嵌套另外一个页面,如frame/iframe技术,这是现在很多web应用中使用的一种方式,webdriver对象只能在一个页面(外层是默认的)中定位元素,需要一种方式将driver对象从外层切换给内层使用才能对内层的对象进行处理。
    下图是qq邮箱登录页面,其中的登录框就是一个内嵌的frame页面,下面我们就以他为案例。

    webdriver中提供的对iframe/frame操作API常用到有:
    driver.switch_to.frame()
    driver.switch_to.default_content()
    driver.switch_to.parent_frame()
    一、driver.switch_to.frame()
    从外部页面切入frame框架中,参数可以为id/name/index及页面元素对象。
    第一种方式:默认是可以给ID、name的
    driver.switch_to.frame(“login_frame”)
    第二种方式:给出页面的iframe的索引index,根据同层frame的顺序定位
    driver.switch_to.frame()
    第三种方式:可以传参iframe的元素对象
    iframeObj = driver.find_element_by_xpath(’//*[@id=“login_frame”]’)
    driver.switch_to.frame(iframeObj)

    #导包、创建浏览器对象、打开qq首页
    from selenium import webdriver
    import time
    driver = webdriver.Chrome()
    # 1.打开腾讯首页;http://www.qq.com
    driver.get("https://www.qq.com")
    
    # 2.点击邮箱图标;
    driver.find_element_by_link_text("Qmail").click()
    # 跳转到邮箱登录界面(窗口),涉及到多窗口的处理
    handles = driver.window_handles
    driver.switch_to.window(handles[1])
    #现在先验证窗口跳转是否成功
    # driver.find_element_by_link_text("基本版").click()
    
    # 3.输入用户名
    #webdriver中提供API:driver.switch_to.frame()实现frame的切换
    #第一种方式,默认是可以给ID或者name的
    # driver.switch_to.frame("login_frame")
    #第二种方式,可以传参iframe的元素对象
    # iframeObj = driver.find_element_by_xpath('//*[@id="login_frame"]')
    # driver.switch_to.frame(iframeObj)
    #第三种方式,可以给索引号
    driver.switch_to.frame(1)
    
    driver.find_element_by_link_text('帐号密码登录').click()
    driver.find_element_by_xpath('//*[@id="u"]').send_keys("2572612580")
    time.sleep(2)
    # 4.输入密码;
    driver.find_element_by_xpath('//*[@id="p"]').send_keys("123456789")
    time.sleep(2)
    # 5.点击登录;
    driver.find_element_by_xpath('//*[@id="login_button"]').click()
    time.sleep(2)
    # 6.关闭浏览器。
    driver.quit()
    

    二、driver.switch_to.default_content()
    切到frame中之后,我们便不能继续操作主文档的元素,这时如果想操作主文档内容,则需切回主文档。
    driver.switch_to.default_content() # 直接从内层frame页面切换回到主文档中。
    三、driver.switch_to.parent_frame()
    如果frame/iframe有多层,我们可以通过driver.switch_to.frame()一层层切入到内层,并可以通过driver.switch_to.parent_frame()一层层再退出来,相当于前进、后退。
    相对driver.switch_to.default_content()方法,是一层层退回,而不是直接退回主页面
    driver.switch_to.frame(“frame1”) #从主页面切入到frame1,相当于前进
    driver.switch_to.frame(“frame2”) #从frame1再切入到frame2,相当于前进
    driver.switch_to.parent_frame() #返回到上级frame1,相当于后退
    driver.switch_to.parent_frame() #返回到主页面

    展开全文
  • 2.布局中有一些导航栏居中显示 可以充分使用行内块将齐转换成行内块 利用text-align:center居中 解决行内块中的缝隙问题 可以用font-size:0;然后再单独设置样式 不过此处使用要注意继承问题 3.对于解决图片底

    HTML标签需要注意的:
    对于行内元素a标签而言 a标签里面不能嵌套a标签
    文本类标签里面如:p标签 h1-h6标签里面最好不要套块级标签
    CSS简单的小技巧
    1.在一些地方合理利用继承性可以使代码更加简洁 可以被继承的属性fon- line- text- color
    2.在布局中有一些导航栏居中显示 可以充分使用行内块将齐转换成行内块 利用text-align:center居中 解决行内块中的缝隙问题 可以用font-size:0;然后再单独设置样式 不过此处使用要注意继承的问题
    3.对于解决图片底部留白的问题 可以使用vertical-align 属性也可以将图片转换成块级元素 display:block
    4.布局中一些标题类的盒子 直接用居中 然后再调上下边距比较简单一些 如果另外一边还有文字 并且跟左边的文字不对齐可以通过设置行高来实现 然后给父盒子加overflow:hidden;
    5.对于插入图片和背景图布局而言: 如果是一些logo小图标或者大背景一般考虑背景图 背景图需要盒子有大小
    对于解决logo里面文字隐藏的问题 可以直接给font-size:0;或者text-indent:-99999px;overflow:hidden;
    6.合理的使用伪元素选择器 before 在父元素内容的前面创建元素,after 在父元素内容的后面插入元素
    伪元素选择器和标签选择器一样,权重为 (0,0,0,1);
    7.一些列表类的盒子经过边框会变色,可以把边框先设置成transparent然后鼠标一经过显示出来
    8.表单 一般是用ul li来做然后设置样式 ul li 中放label input span(行内元素) 关于label对齐问题可以给label设置宽设置text-align:right;
    9.设置下拉表单 要包含到一个盒子里面

    展开全文
  • 需要注意一点,实际的页面中可能中间多层嵌套关系,像下图,div1和div2中间可能还会几层嵌套关系,这就不一定非要要点击元素div2上加监听事件,可以再往上取一级或多级,只要条件div1元素下就...
  • 1. 基本步骤我们了解标签嵌套在网页和网页构成,我们可以开始学习使用第三方库BeautifulSouppython过滤出我们想要数据web页面。接下来,让我们看看抓取网络信息步骤。三个步骤,得到我们需要数据。第...
  • 背景:web自动化,因为不是所有元素唯一id、name、linktext等属性或是动态id,除非是找出所有元素进行操作集合,不然就要考虑使用xpath来定位页面元素然后再操作。注意:xpath语法中单斜杠'/'和双斜杠'/...
  • 学习要一个清晰职业学习规划,学习过程会遇到很多问题,你可以到我们web学习交流君羊-点击此处,同时准备了基础,进阶学习资料。学友都会里面交流,分享一些学习方法和需要注意小细节,每天也会准时讲...
  •  网页布局概念是把即将出现网页中的所有元素进行定位,而CSS网页排版技术别于传统网页排版方法,它将页面首先整体上使用<div>标记进行分块,然后对每个快进行CSS定位以及设置显示效果,最后每个...
  • 我们Jsp页面中使用HTML动态添加一些页面的元素,比如Input、button,但是这些标签中添加绑定事件,或者动态拼接的过程中,使用双引号(“”“”)或者单引号的,但是对于JS或者JQuery,的时候拼接得到的并不是...
  • HTML也不同的版本,只有完全明白页面中使用的确切HTML版本,浏览器才能完全正确地显示出HTML页面。这就是&lt;!DOCTYPE&gt;的作用 HTML元素 指开始标签到结束标签的所有代码 HTML元素语法 元素的内容是开始...
  • Vue2.0提供了transition组件供我们使用,我们可以页面嵌套到transition组件,实现转场效果。进入/离开过渡,会6个class切换。 v-enter:定义进入过渡开始状态。在元素被插入之前生效,在元素被插入...
  • 这篇主要讲定位frame中的对象,经常会遇到使用firebug定位到某个元素,但运行的时候却找不到元素,...从图片可以看出(蓝色的是定位的元素一个iframe的页面中,所以如果没有切换到嵌套页面是找不到已经定位的元素
  • 表单提交后,或者验证失败后,返回原有页面时,如何将用户原来表单... 方法:我们将struts2 控制标签嵌套在input表单元素中,根据action取得值是否与页面radio值相等,来判断用户原来选择是哪个radio。
  • 而有些网页上面会用IFrame去嵌套别的页面,这些页面可能不是相同域名下的,这时就会出现跨域问题,无法直接WebBrowser获取到IFrame中的元素。 解决的方案以上网址说明,这里是实现的源代码,嫌麻烦的...
  • excel的使用

    2012-11-25 17:06:01
    那么A3单元格输入公式: =if(A2,“不及格”,“及格”) 同时,IF函数可以嵌套IF函数或其它函数。例如,如果输入: =if(A2,“不及格”,if(A2,“及格”,“优秀")) 就把成绩分成了三个等级。如果...
  • HTML内联框架元素 ( iframe) 表示嵌套的browsing context。它能够将另一个HTML页面嵌入到当前页面中。 每个嵌入浏览上下文(embedded...-- 通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面 --> <div
  • 前端学习笔记--table表格的使用

    千次阅读 2019-03-17 18:12:16
    嵌套文字,还可以嵌图片、链接等等,一些类似于商品布局运用了表格 (那种前端开发似乎形容成盒子,很形象,不过这个盒子可以装各种各样 东西)。其实个人理解,表格应该是应用各种不同元素之间...
  • EL表达式详细使用

    2011-04-01 11:12:51
    脚本编制元素是指页面中能够用于 JSP 文件中嵌入 Java 代码的元素。它们通常用于对象操作以及执行那些影响所生成内容的计算。JSP 2.0 将 EL 表达式添加为一种脚本编制元素。 二、JSP EL简介 1、语法结构 ${...
  • 由于修改UI框架样式必须是全局修改,不可以在style标签带scoped属性组件内修改,会失效。 所以只能全局修改,那么,全局修改就会导致所有使用该组件样式都一样。但是做项目做页面又会遇到同个组件样式不同。...
  • 该库目标是创建一个CLI,该CLI将使用markdown文件目录,然后将这些相同markdown文件吐出为reason-react页面。 该库正在进行,但是正在积极地进行。 可选地,如果您只是制作一个完全静态站点,则可以仅...
  • 一个选项可以清除已被页面本身,页面编辑器(例如Print Edit WE)或内容阻止程序(例如uBlock Origin)隐藏的元素。配置CHROME转到Chrome菜单按钮>设置>高级。“下载”部分,设置下载文件夹位置,然后...
  • 将样式尽量写单独一个css文件,然后head元素中引用; 好处: 1.内容和样式分离,易于管理和维护; 2.减少页面体积; 3.css文件可以被缓存、重用,维护成本降低; 不使用@import, @import影响css文件加载...
  • 我们网页发布文章时经常会使用到富文本编辑器,富文本编辑器可以让文章内容个性化显示,同时也能添加一些媒体元素,丰富文章内容。其原理是直接内容中嵌套html样式代码,这样将内容提交以后样式代码也会保存到...
  • Stateful Session Bean 与 Stateless Session Bean ,这两种 Session Bean都可以将系统逻辑放在 method之执行,不同是 Stateful Session Bean 可以记录呼叫者状态,因此通常来说,一个使用者会一个相对应...
  • 建立对JSP直观认识

    2012-11-07 14:31:05
    JSP页面中可以使用一种称之为JSP表达式的元素,只需将要输出的变量或表达式直接封装之中,就可以向客户端输出这个变量或表达式的运算结果。JSP表达式中嵌套的变量或表达式后面不能分号。

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 200
精华内容 80
关键字:

在页面中可以嵌套使用的元素有