金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > UC浏览器的兼容问题,基于jquery的手风琴图片展示

UC浏览器的兼容问题,基于jquery的手风琴图片展示

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-11-04 06:16

运动端 h5开垦有关内容计算(3卡塔 尔(英语:State of Qatar)

2016/02/01 · HTML5 · 3 评论 · 移动端

正文笔者: 伯乐在线 - zhiqiang21 。未经作者许可,禁绝转发!
迎接参加伯乐在线 专栏作者。

事先写过两篇开荒中遇到的难点和缓慢解决方案。这个时候是 CSS 和 JavaScript 分开写的。今后写这篇作品的时候认为相当多剧情都是有内在联系的,所以不佳分开。

给大家享受一下那三个月来的感受啊:

明亮和领会里面是有不小间隔的。外人聊到两个知识点,能接上嘴而且能见报一下本身的见地,那叫知道。蒙受难题可以想到用哪些知识点消除难题,这叫了解。

因而有比非常多知识点本人实在在书上都来看过只是在常常蒙受难题的时候却不知底怎么去用可能说想到去用,一时候会有同事给一下指引说用如何消除难点。关键时候依然多看(看书,看外人的代码卡塔 尔(英语:State of Qatar)和多用。

在UC浏览器上行使display:flex;时会不起效用,要拉长包容性写法,

flexbox简介,flexbox

根据jquery的手风琴图片展示效果贯彻格局,jquery手风琴

正文实例陈说了根据jquery的手风琴图片突显效果达成格局。分享给我们供大家参照他事他说加以考察。具体落到实处方式如下:

代码运转作效果果如下图所示:

图片 1

index.html页面代码如下:

复制代码 代码如下:

<!DOCTYPE html>
<html class=''>
<head>
    <title>大器晚成款基于jquery的手风琴图片显示效果demo</title>
    <style class="cp-pen-styles">
        div
        {
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
       
        html, body, .page-container
        {
            height: 100%;
            overflow: hidden;
        }
       
        .page-container
        {
            -webkit-transition: padding 0.2s ease-in;
            transition: padding 0.2s ease-in;
            padding: 80px;
        }
        .page-container.opened
        {
            padding: 0;
        }
        .page-container.opened .flex-container .country:not(.active)
        {
            opacity: 0;
            -webkit-flex: 0;
            -ms-flex: 0;
            flex: 0;
        }
        .page-container.opened .flex-container .country:not(.active) div
        {
            opacity: 0;
        }
        .page-container.opened .flex-container .active:after
        {
            -webkit-filter: grayscale(0%) !important;
            filter: grayscale(0%) !important;
        }
       
        .flex-container
        {
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            height: 100%;
        }
        @media all and (max-width: 900px)
        {
            .flex-container
            {
                -webkit-flex-direction: column;
                -ms-flex-direction: column;
                flex-direction: column;
            }
        }
       
        .country
        {
            position: relative;
            -webkit-flex-grow: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            -webkit-transition: 0.5s ease-in-out;
            transition: 0.5s ease-in-out;
            cursor: pointer;
            font-family: "Bree Serif" , serif;
            text-align: center;
            color: #fff;
            font-size: 22px;
            text-shadow: 0 0 3px #000;
        }
        .country div
        {
            position: absolute;
            width: 100%;
            z-index: 10;
            top: 50%;
            text-align: center;
            -webkit-transition: 0.1s;
            transition: 0.1s;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            -webkit-filter: none;
            filter: none;
        }
        .country:after
        {
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-size: cover;
            -webkit-transition: 0.5s ease-in-out;
            transition: 0.5s ease-in-out;
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
        }
        .country:hover
        {
            -webkit-flex-grow: 6;
            -ms-flex-positive: 6;
            flex-grow: 6;
        }
        .country:hover:after
        {
            -webkit-filter: grayscale(0%);
            filter: grayscale(0%);
        }
        @media all and (max-width: 900px)
        {
            .country
            {
                height: auto;
            }
        }
       
        .netherlands:after
        {
            background-image: url("Netherlands.png");
            background-position: center;
        }
       
        .belgium:after
        {
            background-image: url("belgium-307_3.jpg");
            background-position: center;
        }
       
        .france:after
        {
            background-image: url("30.jpg");
            background-position: center;
        }
       
        .germany:after
        {
            background-image: url("vacation.jpg");
            background-position: center;
        }
       
        .england:after
        {
            background-image: url("england.jpg");
            background-position: center;
        }
    </style>
</head>
<body>
    <div class="page-container">
        <div class="flex-container">
            <div class="country netherlands">
                <div>
                    Netherlands</div>
            </div>
            <div class="country belgium">
                <div>
                    Belgium</div>
            </div>
            <div class="country france">
                <div>
                    France</div>
            </div>
            <div class="country germany">
                <div>
                    Germany</div>
            </div>
            <div class="country england">
                <div>
                    England</div>
            </div>
        </div>
    </div>
    <script src='jquery.js'></script>
    <script>
        $('.country').click(function () {
            $(this).toggleClass('active');
            $('.page-container').toggleClass('opened');
        }); //@ sourceURL=pen.js
    </script>
</body>
</html>

总体实例代码点击这里本站下载。

期待本文所述对大家的jQuery特效设计有所支持。

本文实例陈说了基于jquery的手风琴图片显示效果贯彻格局。分享给我们供我们参谋。...

1.display:none; 和 visibility:hidden;的区别

display:none 关闭二个成分的体现(对布局还未有影响卡塔 尔(阿拉伯语:قطر‎;其独具后代成分都也被会被关闭展现。文书档案渲染时,该因素有如不设有。(不会来得在文书档案流中的地点,可是DOM 节点仍会产出在文书档案流中卡塔尔国
visibility:hidden visibility属性让您可见调控四个图纸成分的可知性,然则仍会占领突显时候在文书档案流中之处。

使用 display:none 的时候尽管成分不会显得,可是DOM 节点仍会现出,所以我们就能够动用接受器对该因素实行操作。如下图中的示例:

图片 2

如下

一、概述

变动在运动布局中不再主要,flex盒模型更加的主要。

flexbox经历过三个版本,主要区别是2009年到2012年之间的语法变化。

最新的语法和现在规范是同步的(例display:flex和“flex-{*}”属性)。
在这之间的语法是2011年出现的非官方语法,只能被IE识别(例display:flexbox;display: -ms-flexbox)。
最老的语法产生于2009年(例display: box;或者“box-{*}”属性)

flexbox是css3新添盒子模型,能够兑现复杂的布局。flexbox未有博得firefox,Opera,chrome浏览器的一心扶持,但能够运用它们的个人属性定义firefox(-moz),opera(-o),chrome/safari(-webkit)。

flexbox优越的布局应用是笔直等高,水平均分,按比例划分。

2.平地风波冒泡引发的标题

其大器晚成主题材料是发生在和谐上篇随笔《h5端呼起摄像头扫描二维码并解析》中的。详细的代码能够看这篇作品。

/* OLD - iOS 6-, Safari 3.1-6 */

二、flexbox常用属性

标题产生的气象

先看风流倜傥段html 代码:

XHTML

<div class="qr-btn" node-type="qr-btn">扫描二维码1 <input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码1" /> </div>

1
2
3
<div class="qr-btn" node-type="qr-btn">扫描二维码1
            <input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码1" />
</div>

事先本人的主张是其相通子的:
1.自己先触发qr-btn的 click 事件,在回调中触发 input 的click 事件click 事件
2.然后触发input 的 change 事件,获取上传图片的新闻。

根据小编的笔触代码应该是下边包车型大巴那一个样子的

JavaScript

//点击父级成分的事件 $('.qr-btn').bind('click',function(){ //触发子成分的风云 $('[node-type=jsbridge]').trigger("click"); }); $('[node-type=jsbridge]').bind('change',function(){ //做一些业务 });

1
2
3
4
5
6
7
8
//点击父级元素的事件
    $('.qr-btn').bind('click',function(){
        //触发子元素的事件
        $('[node-type=jsbridge]').trigger("click");
    });
    $('[node-type=jsbridge]').bind('change',function(){
        //做一些事情
    });

地点的代码,依照常规的思路应该是一贯不难点的,不过,在实际的周转进程中却发生了难点。浏览器的报错消息如下:

图片 3
那是因为仓库溢出的主题素材。那么为何会产出这么的标题吧?作者把断点打在了以下的岗位,然后点击子成分

图片 4

发出的意况是:代码Infiniti次的触及$('.qr-btn').bind(...) ,就涌出了上边的报错音讯。那么是什么样来头形成的啊?
考虑一下开采:是因为事件冒泡的标题。作者单击父成分触发子成分的click 事件,子成分的 click 事件又冒泡到父成分上,触发父成分的 click 事件,然后父成分再度接触了子成分的 click 事件,那就产生了平地风波的大循环

display: -webkit-box;     

1、用于父元素的体制

  • display:block;该属性会将此因素及其直系子代参加弹性框模型中。(flexbox模型只适用于直系后代卡塔 尔(英语:State of Qatar)
  • box-orient:horizontal|vertical|inline-axis|block-axis|inherit;该属性定义父成分中的子成分是怎样排列的。horizontal对父成分的大幅分配划分。
  • box-pack:start|end|center|justify;box-pack表示父容器里面子容器的水平对齐方式

图片 5

  • box-align:start|end|center|baseline|stretch;表示父容器里面子容器的垂直对齐方式。

图片 6

标题化解办法:

品尝阻止事件的冒泡,看能够化解难点?
那我们品尝在触发子成分的click的时候,尝试社团子成分的冒泡,看行还是不行消除自个儿的标题?增加如下的代码:

JavaScript

$('[node-type=jsbridge]').bind('click',function(e){ // console.log(e.type); e.stopPropagation(); });

1
2
3
4
$('[node-type=jsbridge]').bind('click',function(e){
      // console.log(e.type);
       e.stopPropagation();
});

透过自己的测验,代码是能够平常的周转的。

那正是说大家有没有越来越好的格局来衰亡地点的标题啊?请看接下去的剧情

/* OLD - Firefox 19- (buggy but mostly works) */

2、用于子成分的样式

  • box-flex:0|即兴数字;该属性让子容器针对父容器的肥瘦按自然规则进行私分。 

3.lable标签的 for 属性

先来看 lable 标签的定义:

标签为`input`元素定义标注(标记)。 `label`元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。 标签的for天性应当与有关要素的 id 属性相像。

看想转手 w3school 的躬体力行代码和效劳:

XHTML

<form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form>

1
2
3
4
5
<form>  <label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />  <label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>

效用如下图:

图片 7

到此地应该之道大家该怎么改革我们的代码了,

XHTML

<lable class="qr-btn" node-type="qr-btn" for="qr-input">扫描二维码1 <input node-type="jsbridge" id="qr-input" type="file" name="myPhoto" value="扫描二维码1" /> </lable>

1
2
3
<lable class="qr-btn" node-type="qr-btn" for="qr-input">扫描二维码1
        <input node-type="jsbridge" id="qr-input" type="file" name="myPhoto" value="扫描二维码1" />
</lable>

除开 lable 标签的样式大家和好索要团结定义外,还会有两个优点:

  • 减少了 JavaScript 的书写;
  • lable 标签和 input 标签没有供给是带有关系

display: -moz-box;       

三、火速入门demo

4.“弹层盒”布局和日常性盒模型布局的得失相比

新近做了多个抽取奖品的移动,当中就有二个轮盘的旋转的卡通片效果(注意啊,中间的要命卡顿是 gif 图片又再度开首播报了卡塔 尔(英语:State of Qatar)。,效果如下图:

图片 8

有关动漫实现在下生龙活虎篇文章中会继续介绍,这里最首要来关心下布局的主题材料。因为我们页面会在 pc 和平运动动移动各出大器晚成套。所以在 pc 和活动自个儿分别用了二种方案,pc 守旧布局完结,h5 “弹性盒”完结。

/* TWEENER - IE 10 */

1、子成分水平排列,按比例分割父成分宽度

.parent宽度500px,其子成分水平排列,child-one占1/6,child-two占2/6,child-three占了3/6。

<style>
        .parent{
            width: 500px;
            height: 200px;
            display: -webkit-box;
            -webkit-box-orient: horizontal;/* 虽然默认的排列方式是水平的,但是为了区分起见,加上该属性 */
        }
        .child-one{
            background: lightblue;
            -webkit-box-flex: 1;
        }
        .child-two{
            background: lightgray;
            -webkit-box-flex: 2;
        }
        .child-three{
            background: lightgreen;
            -webkit-box-flex: 3;
        }
    </style>
</head>
<div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000;"><!---webkit-box-pack:center让.parent水平居中-->
    <div class="parent">
        <div class="child-one">1</div>
        <div class="child-two">2</div>
        <div class="child-three">3</div>
    </div>
</div>

图片 9

1.弹性盒完结九宫格

外部的那多少个灯是应用相对化定位来做的,就然而过多的牵线,首要的是看中间的奖品九宫格的部分。html 代码如下:

XHTML

<div class="re-middle"> <div class="row-a" node-type="row-a"> <div>mac pro</div> <div>扫地机器人</div> <div>iphone6s</div> </div> <div class="row-b" node-type="row-b"> <div>20积分</div> <div></div> <div>促销券</div> </div> <div class="row-c" node-type="row-c"> <div>ps4</div> <div> <p>猴年限制</p>公仔</div> <div>祝福红包</div> </div> <div node-type="reward-layer"></div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="re-middle">
    <div class="row-a" node-type="row-a">
        <div>mac pro</div>
        <div>扫地机器人</div>
        <div>iphone6s</div>
    </div>
    <div class="row-b" node-type="row-b">
        <div>20积分</div>
        <div></div>
        <div>优惠券</div>
    </div>
    <div class="row-c" node-type="row-c">
        <div>ps4</div>
        <div>
            <p>猴年限定</p>公仔</div>
        <div>祝福红包</div>
    </div>
    <div node-type="reward-layer"></div>
</div>

css代码如下:

CSS

.re-middle { position: absolute; width: 28.3rem; height: 16rem; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background-color: #f69f75; color: #ffdece; font-size: 1.8rem; } .row-a, .row-b, .row-c { height: 5.3rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .row-a div, .row-b div, .row-c div { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-align: center; line-height: 5.3rem; background-color: #f69f75; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.re-middle {
    position: absolute;
    width: 28.3rem;
    height: 16rem;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: #f69f75;
    color: #ffdece;
    font-size: 1.8rem;
}
.row-a,
.row-b,
.row-c {
    height: 5.3rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
}
.row-a div,
.row-b div,
.row-c div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    line-height: 5.3rem;
    background-color: #f69f75;
}

由地点的 css 代码能够看出来自己单独是在档案的次序方向上采用了“弹性盒”,而在竖直的来头上,照旧使用了固定中度(因为小编是用的 rem 单位,这里的一贯也是不确切的,中度会依据 fontsize 值实行测算。卡塔尔

这正是说可不得以在竖直和品位都以用“弹性盒”呢?
来看一下上边包车型地铁css代码:

CSS

.re-middle { position: absolute; width: 28.3rem; height: 16rem; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background-color: #f69f75; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; color: #ffdece; font-size: 1.8rem; } .row-a, .row-b, .row-c { /*height: 5.3rem;*/ -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .row-a div, .row-b div, .row-c div { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-align: center; line-height: 5.3rem; background-color: #f69f75; /*position: relative;*/ -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
.re-middle {
    position: absolute;
    width: 28.3rem;
    height: 16rem;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: #f69f75;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    color: #ffdece;
    font-size: 1.8rem;
}
.row-a,
.row-b,
.row-c {
    /*height: 5.3rem;*/
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
}
.row-a div,
.row-b div,
.row-c div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    line-height: 5.3rem;
    background-color: #f69f75;
    /*position: relative;*/
    -webkit-box-align:center;
    -webkit-align-items:center;
        -ms-flex-align:center;
            align-items:center;
}

星期六的时候有关这些布局本人又翻书看了下“弹性盒”的文书档案,终于实现了在竖直和垂直方向上都完结内容的品位垂直居中内部成分。实际上上面的代码只必要把内容的父级成分再度定义为display:flex再增多两个性子justify-contentalign-items就能够了。前面三个是调整弹性盒的剧情垂直方向居中,前者决定内容水平方向居中。

详见代码如下:

CSS

.row-a div, .row-b div, .row-c div { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; border: 1px solid #000; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.row-a div,
.row-b div,
.row-c div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border: 1px solid #000;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

display: -ms-flexbox;     

2、子成分水平排列,多少个子元素定宽,剩余子成分按比例分割

图片 10<style> .parent{ width: 500px; height: 200px; display: -webkit-box; background-color:pink; -webkit-box-orient: horizontal;/* 就算暗中同意的排列形式是程度的,可是为了分化起见,加上该属性 */ } .child-one{ background: lightblue; -webkit-box-flex: 1; } .child-two{ background: lightgray; -webkit-box-flex: 2; } .child-three{ background: lightgreen; /*定宽,并充裕左右margin,父成分加上均红背景象越来越好了然*/ width:150px; margin:0 15px; } </style> </head> <div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000;"><!---webkit-box-pack:center让.parent水平居中--> <div class="parent"> <div class="child-one">1</div> <div class="child-two">2</div> <div class="child-three">3</div> </div> </div> View Code

图片 11

2.观念艺术完结

与 h5 端相比较,笔者在 pc 端的兑现是金钱观的浮动形式.作者的 HTML 代码如下:

XHTML

<div class="re-middle"> <div class="row-a"> <div>mac pro</div> <div class="row-a-sec">祝福红包</div> <div class="row-a-last"> iphone 6s</div> </div> <div class="row-b clearfix"> <div>降价券</div> <div class="row-b-sec"></div> <div class="row-b-last">20积分</div> </div> <div class="row-c"> <div>扫地机器人</div> <div class="row-c-sec">猴年约束 <p>公仔</p> </div> <div class="row-c-last">ps4</div> </div> <div class="reward-btn"></div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="re-middle">
    <div class="row-a">
        <div>mac pro</div>
        <div class="row-a-sec">祝福红包</div>
        <div class="row-a-last"> iphone 6s</div>
    </div>
    <div class="row-b clearfix">
        <div>优惠券</div>
        <div class="row-b-sec"></div>
        <div class="row-b-last">20积分</div>
    </div>
    <div class="row-c">
        <div>扫地机器人</div>
        <div class="row-c-sec">猴年限定
            <p>公仔</p>
        </div>
        <div class="row-c-last">ps4</div>
    </div>
    <div class="reward-btn"></div>
</div>

css 代码如下:

CSS

.re-middle { background-color: #f89f71; width: 530px; height: 320px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .row-a, .row-b, .row-c { /*height: 106px;*/ font-size: 0; overflow: hidden; } .row-a > div, .row-c > div { float: left; width: 176px; height: 106px; text-align: center; } .row-b div { float: left; width: 176px; height: 106px; text-align: center; line-height: 106px; background-color: #f69f75; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.re-middle {
    background-color: #f89f71;
    width: 530px;
    height: 320px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.row-a,
.row-b,
.row-c {
    /*height: 106px;*/
    font-size: 0;
    overflow: hidden;
}
.row-a > div,
.row-c > div {
    float: left;
    width: 176px;
    height: 106px;
    text-align: center;
}
.row-b div {
    float: left;
    width: 176px;
    height: 106px;
    text-align: center;
    line-height: 106px;
    background-color: #f69f75;
}

由地方的 css 代码相比看大家能够分明看出守旧的变迁形式的布局和“弹性盒”布局的片段优短处:

  • float布局代码简洁,不过必须鲜明的钦定盒子的拉长率和惊人,多显示屏的适配上会差点(rem动态总括除此而外卡塔 尔(英语:State of Qatar)。
  • “弹性盒”布局代码应用新的 css3属性,供给增多额外的商家前缀,扩大了代码的复杂度(增加商家前缀能够使用 sublime 插件,豆蔻梢头键完毕,推荐自家的篇章 前端开荒技术员的 sublime 配置)
  • “弹性盒”为多显示器的适配提供了便利性。作者不用去关切子成分的增幅和惊人是某些,恐怕是显示器的上升的幅度是多少,都会依靠实际请款flex自己会去适配。

欣逢的一个小难题,多行文本的检查办理居中:
本条九宫格内的公文元素,借使只是单行的话,只要选取 line-height 就足以减轻难点,可是只要多行呢?会出如何境况吗,看下图:
图片 12

进而那边必须要考虑不采纳line-height,使用padding 来缓慢解决问题,尝试padding后的效劳。如下图:
图片 13

可以看看容器的底下多出了风流倜傥有些。那也是大家选拔的padding的难题,那么怎么搞定这几个主题素材啊?那将在动用在此以前涉嫌过的box-sizing来消逝难点。

CSS

.row-c-sec { color: #ffdece; font-size: 30px; padding-top: 17px; background-color: #f69f75; /*使容器的高=内容中度+padding +border*/ box-sizing: border-box; }

1
2
3
4
5
6
7
8
.row-c-sec {
    color: #ffdece;
    font-size: 30px;
    padding-top: 17px;
    background-color: #f69f75;
    /*使容器的高=内容高度+padding +border*/
    box-sizing: border-box;
}

/* NEW - Chrome */

3、子成分垂直排列,分割父元素中度

.parent中的子成分垂直排列,所以种种子成分宽度占百分之百。

图片 14<style> .parent{ width: 400px; height: 600px; display: -webkit-box; background-color:pink; -webkit-box-orient: vertical;/*子成分垂直排列 */ } .child-one{ background: lightblue; -webkit-box-flex: 1; } .child-two{ background: lightgray; -webkit-box-flex: 2; } .child-three{ background: lightgreen; /*定高,有上下margin,父成分加上稻草黄背景色越来越好明白*/ height:200px; margin:15px 0; } </style> </head> <div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000;"><!---webkit-box-pack:center让.parent水平居中--> <div class="parent"> <div class="child-one">1</div> <div class="child-two">2</div> <div class="child-three">3</div> </div> </div> View Code

图片 15

5.开关数次交到的减轻方案

在做“跑马灯”插件的时候蒙受了多少个主题素材,正是顾客点击初叶抽取奖品开关之后在还还未再次来到结果的时候客商又第1回点击抽取奖品按键,那时机会合世“奇葩”的主题材料。比方说:第贰回号令和第叁次倡议重合再次回到的结果突显哪二个,即便允许顾客实行一次抽取奖品,人机联作也不友善。何况要是前端页面不做节制以来,突显也会产出奇葩的题目。譬如上面这样:

图片 16

如此那般是否特别不好啊。。。

那么自个儿是怎么解决这一个标题啊?
答案很粗大略,小编正是在点击开关之后,使用相对化定位弹起了叁个晶莹剔透的弹层,将按键给覆盖,等结果重返并出示以往,小编在同期去掉弹层。那样就幸免了顾客的再一次提交。详细看一下代码:

XHTML

<div node-type="cover_layer"></div>

1
<div node-type="cover_layer"></div>

CSS

cover-layer{ width:100%; height:100%; top:0; position:absolute; z-index:9999; }

1
2
3
4
5
6
7
cover-layer{
    width:100%;
    height:100%;
    top:0;
    position:absolute;
    z-index:9999;
}

这里保险笔者的这些透明的弹层能够覆盖在抽取奖品开关的下边。当然这些class 是自己通过JavaScript动态的丰盛和删除的。

JavaScript

$(node).on('clcik','.reward-btn',function(){ //呼起弹层 $('[node-type=cover_layer]',node).addClass('cover-layer'); ..... //重回结果之后去掉弹层 $('[node-type=cover_layer]',node).removeClass('cover-layer'); ..... });

1
2
3
4
5
6
7
8
$(node).on('clcik','.reward-btn',function(){
    //呼起弹层
    $('[node-type=cover_layer]',node).addClass('cover-layer');
    .....
    //返回结果以后去掉弹层
    $('[node-type=cover_layer]',node).removeClass('cover-layer');
    .....
});

此次的享用就到那边,下二回会享用“轮盘”抽取奖品效果的 JavaScript 开荒进度。

打赏帮衬作者写出越多好随笔,多谢!

打赏笔者

display: -webkit-flex;  

4、子成分水平排列,定高垂直方向居中对齐

父成分中子成分水平排列,子成分定高时设置垂直方向对齐情势为居中对齐。

图片 17<style> .parent{ width: 400px; height: 200px; display: -webkit-box; background-color:pink; -webkit-box-orient: horizontal; /*-webkit-box-align:center;/*父成分中子成分水平排列,定高时设置垂直方向对齐方式为垂直居中*/ } .child-one{ background: lightblue; -webkit-box-flex: 1; height:100px; } .child-two{ background: lightgray; -webkit-box-flex: 2; height:110px; } .child-three{ background: lightgreen; -webkit-box-flex: 2; height:120px; } </style> </head> <div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000;"><!---webkit-box-pack:center让.parent水平居中--> <div class="parent"> <div class="child-one">1</div> <div class="child-two">2</div> <div class="child-three">3</div> </div> </div> View Code

图片 18

打赏支持作者写出更加多好随笔,谢谢!

任选黄金年代种支付办法

图片 19 图片 20

2 赞 16 收藏 3 评论

display: flex;

四、精华布局

flexbox卓绝的布局应用是笔直等高,水平均分,按比例划分,水平垂直居中,还足以兑现活动端的弹窗。

至于笔者:zhiqiang21

图片 21

做认为对的事体,假诺大概是错的,那就做感到本身选用得起的政工! 个人主页 · 笔者的篇章 · 11 ·      

图片 22

动用flex:1;时也要增多如下包容性写法:-webkit-box-flex: 1;     

1、垂直等高,水平均分,按百分比划分

.parent{display: -webkit-box; display: -webkit-flex; display: flex;}
.child{-webkit-box-flex: 1; -webkit-flex: 1; flex: 1;}

完整demo

图片 23<style> .parent{display: -webkit-box; display: -webkit-flex; display: flex; height:100px; width:150px; background-color:pink;} .child{-webkit-box-flex: 1; -webkit-flex: 1; flex: 1; border:1px solid green; } </style> <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> View Code

图片 24

 /* OLD - iOS 6-, Safari 3.1-6 */           

2、水平居中

.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;}

完整demo:

图片 25<style> .parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; height:100px; width:150px; background-color:pink;} .child{ width:50px; height:50px; border:1px solid green; } </style> <div class="parent"> <div class="child"></div> </div> View Code

图片 26

 -moz-box-flex: 1;        

3、垂直居中

.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center;}

完整demo

图片 27<style> .parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; height:100px; width:150px; background-color:pink;} .child{ width:50px; height:50px; border:1px solid green; } </style> </head> <body> <div class="parent"> <div class="child"></div> </div> View Code

图片 28

 /* OLD - Firefox 19- */           

4、移动端弹窗 

 将来运动端相当多弹窗组件使用flexbox来贯彻,直接嵌套div.overlay>div.pop。

图片 29<style> .overlay{ /*flex style*/ display:-webkit-box; -webkit-box-orient:horizontal; -webkit-box-pack:center; -webkit-box-align:center; display:-moz-box; -moz-box-orient:horizontal; -moz-box-pack:center; -moz-box-align:center; display:-o-box; -o-box-orient:horizontal; -o-box-pack:center; -o-box-align:center; display:-ms-box; -ms-box-orient:horizontal; -ms-box-pack:center; -ms-box-align:center; display:box; box-orient:horizontal; box-pack:center; box-align:center; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; display: flex; align-items: center; justify-content: center; /*other style*/ width:100%; max-width:750px; height:100%; position:fixed; top:0; left:0; background:rgba(0,0,0,0.5); } .popup{ width:90%; max-width:650px; border:1px solid green; padding:20px 4% 4% 4%; box-sizing:border-box; height:auto; background:#fff; border-radius:4px; position:relative; } .popup-close{ width:15px; height:14px; background:url(image/close.png) no-repeat; background-size:百分之百 百分之百; position:absolute; top:8px; right:8px; } </style> 主页面包车型地铁文字 <div class="overlay"> <div class="popup"> <a href="javascript:;" class="popup-close"></a> 弹层的文字 </div> </div> View Code

图片 30

 width: 20%;             

五、兼容性

图片 31

 

PC端:

  • 无前缀:Chrome 29+, Firefox 28+, IE 11+, Opera 17+
  • 内需前缀:Chrome 21+, Safari 6.1+, Opera 15+需求前缀-webkit-

提示:旧版本的Firefox(22-27卡塔尔帮忙除了flex-wrapflex-flow之外的新语法。Opera (12.1+ - 17+)使用flex可以未有个人前缀,不过中间的15和16本子须求个人前缀。

移动端:

  • 无前缀:Android 4.4+, Opera mobile 12.1+, BlackBerry 10+, Chrome for Android 39+, Firefox for Android 33+, IE 11+ mobile
  • 急需前缀:iOS 7.1+须要前缀-webkit-

 /* For old syntax, otherwise collapses. */            

六、能源链接

display:-webkit-box

A Complete Guide to Flexbox

探索Flexbox

时下Web App中的Flexbox应用

 

正文小编starof,因知识自己在变化,笔者也在不断学习成才,随笔内容也不安时更新,为制止误导读者,方便推本溯源,请各位转载注脚出处:

 

风姿洒脱、概述 浮动在运动布局中不再首要,flex盒模型越来越主要。 flexbox涉世过多少个本子,首要不一样是二零零六年到2013年时期的语...

-webkit-flex: 1;         

 /* Chrome */            

-ms-flex: 1;             

 /* IE 10 */           

 flex: 1;                  

/* NEW, Spec - Opera 12.1, Firefox 20+ */

然则,必要求留神:借使效果于flex:1的因素为input或button时,只用flex:1;是不起效用的,还要加上display:block;才具起效果。以下为小案例复制代码

<style>

html,body{

padding: 0;

margin: 0;

}

.demo1{

background-color: yellow;

text-align: center;

height: 80px;

display: -webkit-flex;

display: flex;

-webkit-align-items: center;

align-items: center;

/* for uc */

display: -webkit-box;

-webkit-box-align: center;

}

.demo1>div{

background-color: green;

margin: 2px;

-webkit-flex: 1;

flex: 1;

/* for uc */

-webkit-box-flex: 1;

-moz-box-flex: 1;

-ms-flex: 1;

}

.demo2{

background-color: yellow;

width: 80px;

height: 200px;

display: -webkit-flex;

display: flex;

-webkit-flex-direction: column;

flex-direction: column;

-webkit-align-items: center;

align-items: center;

/* for uc */

display: -webkit-box;

-webkit-box-orient: vertical;

-moz-box-orient: vertical;

box-orient: vertical;

-webkit-box-align: center;

}

.demo2>div{

background-color: green;

width: 40px;

margin: 2px;

-webkit-flex: 1;

flex: 1;

/* for uc */

-webkit-box-flex: 1;

-moz-box-flex: 1;

-ms-flex: 1;

}

.demo3{

text-align: center;

padding: 0 6px;

display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */

display: -moz-box;        /* OLD - Firefox 19- (buggy but mostly works) */

display: -ms-flexbox;      /* TWEENER - IE 10 */

display: -webkit-flex;    /* NEW - Chrome */

display: flex;

}

.demo3 .btn{

-webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */

-moz-box-flex: 1;        /* OLD - Firefox 19- */

width: 20%;              /* For old syntax, otherwise collapses. */

-webkit-flex: 1;          /* Chrome */

-ms-flex: 1;              /* IE 10 */

flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */

display:block;

height: 40px;

color:#fff;

text-align: center;

line-height: 40px;

cursor: pointer;

font-size: 17px;

font-weight: 700;

margin-top:0px;

margin-bottom:20px;

font-family: "方正正中黑简体", "Microsoft YaHei", "sans-serif";

-webkit-appearance : none ;  /*缓慢解决iphone safari上的圆角难点*/

}

.prev {

background-color: #FEBC21;

margin-right:6px;

}

.next {

background-color: #FE9121;

}

</style>

<h2>左右排列,上下居中</h2>

<div class="demo1">

<div>flex</div>

<div>flex</div>

<div>flex</div>

</div>

<h2>上下排列,左右居中</h2>

<div class="demo2">

<div>flex</div>

<div>flex</div>

<div>flex</div>

</div>

<h2>左右排列,成分为input或button</h2>

<div class="demo3">

<button class="btn prev">button</button>

<input type="button" class="btn next" id="btn" value="input">

</div>

在position:fixed的那个情况下,须求运用冒泡的不二等秘书诀技术接触绑定的风浪

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:UC浏览器的兼容问题,基于jquery的手风琴图片展示

关键词: