快捷搜索:
您的位置:AG真人平台下注 > 时尚资讯 > -100%时运行效果

-100%时运行效果

2019-11-29 21:23

4.3、Media Queries Hello World

在页面上放贰个层,当荧屏尺寸在100-640里边时

身体力行代码:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>媒介查询</title>
        <style type="text/css">
            #div1 {
                background: lightblue;
                height: 100px;
            }

            @media only screen and (min-width: 100px) and (max-width: 640px) {
                #div1 {
                    background: lightgreen;
                    height: 200px;
                }
            }
        </style>
    </head>

    <body>
        <div id="div1">
            Hello World!
        </div>
    </body>

</html>

全屏时的周转效果:

图片 1

压缩浏览器的效能:

图片 2

图片 3

feature:定义设备性格,好多同意加前缀min-,max-,多个原则得以接纳and连接,and两边必要空格。

图片 4

广阔写法:

            @media only screen and (min-width: 320px) and (max-width: 640px) {
            }

 

@media (min-device-width:1024px) and (max-width:989px),screen and (max-device-width:480px),(max-device-width:480px) and (orientation:landscape),(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {
   CSS样式...
}

and表示与,条件要同有时间满足;逗号表示或。

3.4、imagesLoaded 图片加载

imagesLoaded 是一个用以来检验网页中的图片是或不是载入达成的 JavaScript 工具库。帮衬回调的拿走图片加载的进程,仍是可以绑定自定义事件。可以构成 jQuery、RequireJS 使用。

官网:

源码:

示范代码:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>imagesLoaded – 检测网页中的图片是否加载</title>
    </head>

    <body>
        <div id="div1">
            <img src="img/h/h(2).jpg" width="300" /><img src="img/h/h(1).jpg" width="300" />
        </div>
        <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/imagesloaded-master/imagesloaded.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
        <script>
            imagesLoaded(document.querySelector('#div1'), function(instance) {
                alert('所有的图片都加载完成了');
            });

            $('#div1').imagesLoaded()
                .always(function(instance) {
                    console.log('all images loaded');
                })
                .done(function(instance) {
                    console.log('all images successfully loaded');
                })
                .fail(function() {
                    console.log('all images loaded, at least one is broken');
                })
                .progress(function(instance, image) {
                    var result = image.isLoaded ? 'loaded' : 'broken';
                    console.log('image is '   result   ' for '   image.img.src);
                });
        </script>
    </body>

</html>

运转结果:

图片 5

4.6、respond.js

respond.js是贰个用以让IE8以下浏览器扶持@media queries的插件,也便是应用Respond.js能让IE6-8援助CSS3 Media Query。Bootstrap里面就引进了那个JS文件,压缩后独有3KB。该脚本循环遍历页面上的全部CSS 援引,并选用媒体询问分析 CSS 法则。然后,该脚本会监察和控制浏览器宽度变化,加多或删除与 CSS 中媒体询问相称的样式。最后结果是,能够在本来不协理的浏览器上运转媒体询问。

要留神的主题材料:

if CSS files are encoded in UTF-8 with Byte-Order-Mark, they will not work with Respond.js in IE7 or IE8.

微软的utf-8格式且BOM的文件会出难题,BOM格式文档头3个字节正是BOM,会影响程序对文书档案的管理。

多年来有测量试验开掘IE8依然出新了难题,动漫@keyframe中的@符号形成的熏陶会使respond.js失效,因而,在动用respond.js时,尽量就不要用CSS3动画片。

下载地址:

引进方法:

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<script src="respond.min.js"></script>
<![endif]-->

3.3.2、希图内容

在页面中使用HTML CSS希图要求接受瀑布流展现的内容,如下所示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>瀑布流布局</title>
        <style type="text/css">
            #grid {
                width: 1000px;
                margin: 0 auto;
            }

            .grid-item {
                width: 200px;
                float: left;
            }

            .a {
                background: lightblue;
                height: 200px;
            }

            .b {
                background: lightcoral;
                height: 300px;
            }

            .c {
                background: lightgreen;
                height: 500px;
            }

            .d {
                background: lightsalmon;
                height: 350px;
            }

            .e {
                background: lightseagreen;
                height: 150px;
            }
        </style>
    </head>

    <body>
        <div id="grid">
            <div class="grid-item a">
            </div>
            <div class="grid-item b">
            </div>
            <div class="grid-item a">
            </div>
            <div class="grid-item b">
            </div>
            <div class="grid-item a">
            </div>
            <div class="grid-item b">
            </div>
            <div class="grid-item a">
            </div>
            <div class="grid-item b">
            </div>
            <div class="grid-item a">
            </div>
            <div class="grid-item b">
            </div>
            <div class="grid-item a">
            </div>
            <div class="grid-item b">
            </div>
            <div class="grid-item c">
            </div>
            <div class="grid-item d">
            </div>
            <div class="grid-item e">
            </div>
            <div class="grid-item c">
            </div>
            <div class="grid-item d">
            </div>
            <div class="grid-item e">
            </div>
            <div class="grid-item c">
            </div>
            <div class="grid-item d">
            </div>
            <div class="grid-item e">
            </div>
            <div class="grid-item c">
            </div>
            <div class="grid-item d">
            </div>
            <div class="grid-item e">
            </div>
            <div class="grid-item c">
            </div>
            <div class="grid-item d">
            </div>
            <div class="grid-item e">
            </div>
            <div class="grid-item c">
            </div>
            <div class="grid-item d">
            </div>
            <div class="grid-item e">
            </div>
        </div>
        <script src="js/masonry/masonry.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
    </body>

</html>

还未有动用瀑布流布局时的功力:

图片 6

1.1、负边距

所谓的负边距便是margin取负值的事态,如margin:-100px,margin:-百分百。当多少个成分与另八个因素margin取负值时将拉中间距。不以为奇的功能如下:

1.1.1、向上移动

当多个成分同偶尔间从标准流中脱离开来时,要是前三个成分的大幅度为100%大幅度,前边的因素通过负边距能够兑现发展。当负的边距超越自身的幅度将前行,只要未有抢先自身宽度就不会发展,示举例下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>负边距</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            #div1 {
                height: 100px;
                background: lightblue;
                width: 100%;
                float: left;
            }

            #div2 {
                height: 100px;
                background: lightgreen;
                width: 30%;
                float: left;
                margin-left: -100%;
            }
        </style>
    </head>

    <body>
        <div id="div1">div1
        </div>
        <div id="div2">div2
        </div>
    </body>

</html>

margin-left:-29%时运营效果:

图片 7

margin-left:-百分之四十时运营效果:

图片 8

margin-left:-100%时运维效果:

图片 9

3.3.4、使用了图片的瀑布流

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>瀑布流布局</title>
        <style type="text/css">
            #grid {
                width: 1000px;
                margin: 0 auto;
            }
        </style>
    </head>

    <body>
        <div id="grid">
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(1).jpg" width="200" />
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(2).jpg" width="200" />
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(3).jpg" width="200" />
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(4).jpg" width="200" />
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(11).jpg" width="200" />
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(12).jpg" width="200" />
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(5).jpg" width="200" />
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(6).jpg" width="200" />
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(7).jpg" width="200" />
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(8).jpg" width="200" />
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(11).jpg" width="200" />
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(12).jpg" width="200" />
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(9).jpg" width="200" />
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(10).jpg" width="200" />
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(11).jpg" width="200" />
                </a>
            </div>
            <div class="grid-item">
                <a href="#">
                    <img src="img/h/h(12).jpg" width="200" />
                </a>
            </div>
        </div>
        <script src="js/masonry/masonry.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            window.onload = function() {
                var msnry = new Masonry('#grid', {
                    itemSelector: '.grid-item',
                    columnWidth: 200
                });
            }
        </script>
    </body>

</html>

运作结果:

图片 10

只顾:上边的演示中大家利用了window.onload事件,原因是借使图片并未有加载成功就试行瀑布流布局会唤起聚积的难点,其实便是初步化是从未有过检查测验到图片的莫斯中国科学技术大学学,window.onload在有不少图纸的条件下会有总体性难点,这里给大家介绍另叁个零件。

二、弹性布局(Flexbox)

若是在档案的次序中有叁个如此的要求:同黄金时代行有3个菜单,各个菜单占1/2的大幅度,怎么贯彻?

可能你会如此达成:

图片 11图片 12

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>flex</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
                list-style: none;
            }

            html,
            body {
                height: 100%;
            }

            #menu {
                width: 980px;
                margin: 0 auto;
            }
            #menu li{
                width: 33.3%;
                float: left;
            }
        </style>
    </head>

    <body>
        <ul id="menu">
            <li><a href="#" class="item">公司简介</a></li>
            <li><a href="#" class="item">商品展示</a></li>
            <li><a href="#" class="item">后台管理</a></li>
        </ul>
    </body>

</html>

View Code

结果:

图片 13

地方的办法有显著的求过于供就是可扩展性太差,因为风姿浪漫旦再增多豆蔻梢头项就能有四个菜系项会换行,消除方法是:CSS3中提供了刚劲的弹性盒构造。示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>flex</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
                list-style: none;
            }

            html,
            body {
                height: 100%;
            }

            #menu {
                width: 980px;
                margin: 0 auto;
                display: flex;  /*当前块为弹性盒*/
            }
            #menu li{
                flex: auto;  /*弹性盒中的单项*/
                float: left;
            }
            #menu li a{
                display:block;
                height: 26px;
                line-height: 26px;
                border:1px solid cornflowerblue;
                margin-right: 2px;
                text-decoration: none;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <ul id="menu">
            <li><a href="#" class="item">公司简介</a></li>
            <li><a href="#" class="item">商品展示</a></li>
            <li><a href="#" class="item">后台管理</a></li>
            <li><a href="#" class="item">企业文化</a></li>
            <li><a href="#" class="item">在线咨询</a></li>
        </ul>
    </body>

</html>

运作结果:

图片 14

图片 15

display属性值flex: 将对象作为弹性伸缩盒展现

flex:none | <flex-grow> <flex-shrink > || <flex-basis>
效果与利益:设置或搜求弹性盒模型对象的子成分怎么着分配空间
适用于:flex子项
none: none关键字的总括值为: 0 0 auto
<flex-grow>: 用来内定扩充比率,即剩余空间是正值时此「flex子项」相对于「flex容器」里此外「flex子项」能分红到半空比例。
在「flex」属性中该值倘诺被略去则默感到「1」
<flex-shrink>: 用来钦命裁减比率,即剩余空间是负值时此「flex子项」相对于「flex容器」里其他「flex子项」能减弱的长空比例。
在减少的时候减少比率会以伸缩基准值加权
在「flex」属性中该值假诺被不难则默感觉「1」
<flex-basis>: 用来钦点伸缩基准值,即在依据伸缩比率总计出剩余空间的布满在此之前,「flex子项」长度的最早数值。
在「flex」属性中该值借使被略去则默感到「0%」
在「flex」属性中该值假诺被内定为「auto」,则伸缩基准值的总结值是自个儿的 <width> 设置,若是本身的宽窄未有定义,则长度决计于内容。

亲自过问:如下意况各种成分的总结宽是微微

<ul class="flex">
 <li>a</li>
 <li>b</li>
 <li>c</li>
</ul>

.flex{display:flex;width:800px;margin:0;padding:0;list-style:none;}
.flex :nth-child(1){flex:1 1 300px;}
.flex :nth-child(2){flex:2 2 200px;}
.flex :nth-child(3){flex:3 3 400px;}

本例定义了父容器宽(即主轴宽)为800px,由于子成分设置了伸缩基准值flex-basis,相加300 200 400=900,那么子成分将会溢出900-800=100px;
鉴于同时安装了收缩因子,所以加权汇总可得300*1 200*2 400*3=1900px;
于是乎我们能够总括a,b,c将被移除的溢出量是稍稍:
a被移除溢出量:(300*1/1900)*100,即约等于16px
b被移除溢出量:(200*2/1900)*100,即也正是21px
c被移除溢出量:(400*3/1900)*100,即约等于63px
最终a,b,c的实际上增进率分别为:300-16=284px, 200-21=179px, 400-63=337px

可以看到算法比较费力,轻易的做法如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>flex</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
                list-style: none;
            }
            html,
            body {
                height: 100%;
            }
            #menu {
                width: 980px;
                margin: 0 auto;
                display: flex;
                /*当前块为弹性盒*/
            }
            #menu li {
                float: left;
            }
            #menu li a {
                display: block;
                height: 26px;
                line-height: 26px;
                border: 1px solid cornflowerblue;
                margin-right: 2px;
                text-decoration: none;
                text-align: center;
            }
            .a {
                flex: 1;
            }
            .b {
                flex: 2;
            }
            .c {
                flex: 3;
            }
        </style>
    </head>
    <body>
        <ul id="menu">
            <li class="a">
                <a href="#" class="item">公司简介</a>
            </li>
            <li class="b">
                <a href="#" class="item">商品展示</a>
            </li>
            <li class="c">
                <a href="#" class="item">后台管理</a>
            </li>
        </ul>
    </body>
</html>

运行结果:

图片 16

Flex容器能够设置属性flex-flow,取值为row,row-reverse,column,column-reverse多种值
row:展现在乎气风发行中

row-reverse:显示在意气风发行中,反转

column:展现在一列中

column-reverse:显示在一列中 反转

图片 17图片 18

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>flex</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
                list-style: none;
            }
            html,
            body {
                height: 100%;
                padding-top :20px;
            }
            #menu {
                width: 980px;
                margin: 0 auto;
                display: flex;
                /*当前块为弹性盒*/
                flex-flow: row-reverse;
                /*子项在一行中显示,反转*/
            }
            #menu li {
                flex: auto;
            }
            #menu li a {
                display: block;
                height: 26px;
                line-height: 26px;
                border: 1px solid cornflowerblue;
                margin-right: 2px;
                text-decoration: none;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <ul id="menu">
            <li class="a">
                <a href="#" class="item">A公司简介</a>
            </li>
            <li class="b">
                <a href="#" class="item">B商品展示</a>
            </li>
            <li class="c">
                <a href="#" class="item">C后台管理</a>
            </li>
        </ul>
    </body>
</html>

View Code

图片 19

图片 20图片 21

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>flex</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
                list-style: none;
            }
            html,
            body {
                height: 100%;
                padding-top :20px;
            }
            #menu {
                margin: 0 auto;
                display: flex;
                /*当前块为弹性盒*/
                flex-flow: column-reverse;
                height: 200px;
                overflow: hidden;
            }
            #menu li{
                border: 1px solid cornflowerblue;
                margin-bottom: 5px;
                text-align: center;
            }
            #menu li a {
                text-decoration: none;
                vertical-align: middle;
            }
            .a{
                flex: 1;
            }
            .b{
                flex: 2;
            }
            .c{
                flex: 3;
            }
        </style>
    </head>
    <body>
        <ul id="menu">
            <li class="a">
                <a href="#" class="item">A公司简介</a>
            </li>
            <li class="b">
                <a href="#" class="item">B商品展示</a>
            </li>
            <li class="c">
                <a href="#" class="item">C后台管理</a>
            </li>
        </ul>
    </body>
</html>

View Code

图片 22

4.1、媒介类型

@media早在css2.1中就有了,用于判别媒介类型,如screen荧屏,print打字与印刷机,projection投影仪,all表示具备,当然还有为数不少一时用的。能够钦赐CSS在哪些的媒婆中行使,如只在打字与印刷时接纳有个别样式,如:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>打印</title>
        <!--该样式只会应用在打印时-->
        <style type="text/css" media="print">
            .noprint
            {
                display:none;
            }
            div{
                font-size:30px;
            }
        </style>
    </head>
    <body>
        <div>
            Installing Cordova Cordova command-line runs on Node.js and is available on NPM. Follow platform specific guides to install additional platform dependencies. Open a command prompt or Terminal, and type npm install -g cordova.
        </div>
        <button onclick="print();" class="noprint">打印</button>
    </body>
</html>

不利用媒介时运营效果:

图片 23

 使用媒介时运转作效果果:

图片 24

3.3.1、下载并引述masonry

能够去官方网站或github下载“masonry.pkgd.min.js”,将下载到的插件增添到项目中,并在页面中丰硕引用,如下所示:

<script src="js/masonry/masonry.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
  • masonry.pkgd.js un-minified
  • masonry.pkgd.min.js minified

CDN:

<script src="https://unpkg.com/masonry-layout@4.1/dist/masonry.pkgd.js"></script>
<!-- or -->
<script src="https://unpkg.com/masonry-layout@4.1/dist/masonry.pkgd.min.js"></script>

六、示例下载

github:https://github.com/zhangguo5/CSS3_4.git

参照:

图片 25

4.2、媒介查询的行使地点(Media Queries)

a卡塔尔、内部样式

@media screen and (width:800px){ … }

b卡塔尔(قطر‎、导入样式

@import url(example.css) screen and (width:800px);

c卡塔尔(قطر‎、链接样式
<link media="screen and (width:800px)" rel="stylesheet" href="example.css" />

d卡塔尔(英语:State of Qatar)、XML中运用样式
<?xml-stylesheet media="screen and (width:800px)" rel="stylesheet" href="example.css" ?>

3.5、Infinite Scroll 滚动分页

Infinite Scroll也是依附jQuery插件,是三个用以滚动分页的插件(当移动滚动条时将动态加载越多内容),有网络老铁称这种效应该为”无刷新无分页完美瀑布流”展现情势。

官网:

源码:

图片 26

常用属性:

$('#masonny-div').infinitescroll({
    navSelector  : "#next",   // 页面分页元素(成功后会被隐藏)
    nextSelector : "#next a", // 需要点击的下一页链接,和2的html要对应
    itemSelector : ".item"  , // ajax回来之后,每一项的selecter
    animate      : true,      //加载完毕是否采用动态效果
    extraScrollPx: 100,       //向下滚动的像素,必须开启动态效果
    // debug     : true,      //调试的时候,可以打开
    bufferPx     : 5,         //提示语展现的时长,数字越大,展现时间越短
    loading: {
        finishedMsg: '没有更多内容了', //当加载失败,或者加载不出内容之后的提示语
        img:  'loading-new.gif',   //自定义loadding的动画图
        msgText : '正在加载中...',    //加载时的提示语
        },
    },
    function( newElements, opt ) {
       //成功后执行自定义的函数
       //如果需要对新内容进行加工,就在这里实现
    }
};

属性与事件官方网站有详实的求证这里只列出来了有的,上边是官网列出的选项:

$('.selector').infinitescroll({
  loading: {
    finished: undefined,
    finishedMsg: "<em>Congratulations, you've reached the end of the internet.</em>",
                img: null,
    msg: null,
    msgText: "<em>Loading the next set of posts...</em>",
    selector: null,
    speed: 'fast',
    start: undefined
  },
  state: {
    isDuringAjax: false,
    isInvalidPage: false,
    isDestroyed: false,
    isDone: false, // For when it goes all the way through the archive.
    isPaused: false,
    currPage: 1
  },
  behavior: undefined,
  binder: $(window), // used to cache the selector for the element that will be scrolling
  nextSelector: "div.navigation a:first",
  navSelector: "div.navigation",
  contentSelector: null, // rename to pageFragment
  extraScrollPx: 150,
  itemSelector: "div.post",
  animate: false,
  pathParse: undefined,
  dataType: 'html',
  appendCallback: true,
  bufferPx: 40,
  errorCallback: function () { },
  infid: 0, //Instance ID
  pixelsFromNavToBottom: undefined,
  path: undefined, // Can either be an array of URL parts (e.g. ["/page/", "/"]) or a function that accepts the page number and returns a URL
  maxPage:undefined // to manually control maximum page (when maxPage is undefined, maximum page limitation is not work)
});

3.3.3、最早化插件

使用jQuery:

$('.grid').masonry({
  // options...
  itemSelector: '.grid-item',
  columnWidth: 200
});

原生JavaScript:

// init with element
var grid = document.querySelector('.grid');
var msnry = new Masonry( grid, {
  // options...
  itemSelector: '.grid-item',
  columnWidth: 200
});

使用HTML属性:

<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ...
</div>

常用属性如下:

itemSelector : '.item',//瀑布流布局中的单项选择器
columnWidth : 240 ,//一列的宽度
isAnimated:true,//使用jquery的布局变化,是否启用动画
animationOptions:{
//jquery animate属性 渐变效果 Object { queue: false, duration: 500 }
},
gutterWidth:0,//列的间隙 Integer
isFitWidth:true,//是否适应宽度 Boolean
isResizableL:true,//是否可调整大小 Boolean
isRTL:false,//是否使用从右到左的布局 Boolean

 

开始化代码如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>瀑布流布局</title>
        <style type="text/css">
            #grid {
                width: 1000px;
                margin: 0 auto;
            }

            .grid-item {
                width: 200px;
                float: left;
            }

            .a {
                background: lightblue;
                height: 200px;
            }

            .b {
                background: lightcoral;
                height: 300px;
            }

            .c {
                background: lightgreen;
                height: 500px;
            }

            .d {
                background: lightsalmon;
                height: 350px;
            }

            .e {
                background: lightseagreen;
                height: 150px;
            }
        </style>
    </head>

    <body>
        <div id="grid">
            <div class="grid-item a">
            </div>
            <div class="grid-item b">
            </div>
            <div class="grid-item a">
            </div>
            <div class="grid-item b">
            </div>
            <div class="grid-item c">
            </div>
            <div class="grid-item d">
            </div>
            <div class="grid-item e">
            </div>
            <div class="grid-item c">
            </div>
            <div class="grid-item d">
            </div>
            <div class="grid-item a">
            </div>
            <div class="grid-item b">
            </div>
            <div class="grid-item a">
            </div>
            <div class="grid-item b">
            </div>
            <div class="grid-item a">
            </div>
            <div class="grid-item b">
            </div>

            <div class="grid-item d">
            </div>
            <div class="grid-item e">
            </div>
            <div class="grid-item c">
            </div>
            <div class="grid-item d">
            </div>
            <div class="grid-item e">
            </div>
            <div class="grid-item a">
            </div>
            <div class="grid-item b">
            </div>
            <div class="grid-item c">
            </div>
            <div class="grid-item d">
            </div>
            <div class="grid-item e">
            </div>
            <div class="grid-item c">
            </div>
            <div class="grid-item e">
            </div>
            <div class="grid-item c">
            </div>
            <div class="grid-item d">
            </div>
            <div class="grid-item e">
            </div>
        </div>
        <script src="js/masonry/masonry.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var msnry = new Masonry('#grid', {
                itemSelector: '.grid-item',
                columnWidth: 200
            });
        </script>
    </body>

</html>

运作结果:

图片 27

5.1、使用javascript设置相对尺寸

示范代码:

图片 28图片 29

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>rem</title>
        <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <style>
            html {
                height: 100%;
                width: 100%;
                font-family: 'Microsoft YaHei';
                font-size: 20px;
                overflow: hidden;
                outline: 0;
            }

            body {
                height: 100%;
                margin: 0;
                overflow: hidden;
                -webkit-user-select: none;
                /*取消用户选择*/
                width: 100%;
            }

            header,
            footer {
                width: 100%;
                line-height: 1.5rem;
                font-size: 1rem;
                color: #000;
                border: 1px solid #ccc;
                text-align: center;
                background-color: #ccc;
            }

            .bd {
                margin-top: 1rem;
                margin-bottom: .5rem;
                margin-right: -.5rem;
                font-size: 0;
            }

            .bd:after {
                clear: both;
            }

            .box {
                width: 5rem;
                height: 5rem;
                display: inline-block;
                margin-right: .5rem;
                margin-bottom: .5rem;
            }

            .blue-box {
                background-color: #06c;
            }

            .org-box {
                background-color: #1fc195;
            }
        </style>

    </head>

    <body>
        <header>我是头部</header>
        <div class="bd">
            <div class="box blue-box"></div>
            <div class="box org-box"></div>
            <div class="box blue-box"></div>
            <div class="box org-box"></div>
            <div class="box blue-box"></div>
            <div class="box org-box"></div>
            <div class="box blue-box"></div>
            <div class="box org-box"></div>
            <div class="box blue-box"></div>
        </div>

        <footer>我是页脚</footer>
        <script>
            //定义一个方法并执行
            (function(doc, win) {
                //获得文档的根节点html
                var docEl = doc.documentElement;
                //如果window中存在orientationchange对象,则取orientationchange,否则取resize
                //为了事件绑定
                resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize';
                //定义一个方法,重新计算font-size大小
                var recalc = function() {
                    //页面的宽度
                    var clientWidth = docEl.clientWidth;
                    //如果没有宽度则退出
                    if(!clientWidth) return;
                    //重新计算font-size大小,假定320的宽度时字体大小为20;,当页面变化时重新设置字体大小
                    docEl.style.fontSize = 20 * (clientWidth / 320)   'px';
                };
                //如果浏览器不支持添加事件监听则结束
                if(!doc.addEventListener) return;
                //添加事件监听,指定事件处理函数的时期或阶段(boolean)true表示在捕获事件执行,false表示冒泡时执行
                win.addEventListener(resizeEvt, recalc, false);
                //当Dom树加载完成时执行计算,DOMContentLoaded事件要在window.onload之前执行
                doc.addEventListener('DOMContentLoaded', recalc, false);
            })(document, window);
        </script>
    </body>

</html>

View Code

 

运维效果:

图片 30

1.3、多栏构造

风度翩翩、负边距与转移结构

1.1.2、去除列表左侧框

开采中常须求在页面中体现一些列表,如商品展现列表等,假使大家要兑现如下布局:

 图片 31

示范代码:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>负边距</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            #div1 {
                width: 800px;
                margin: 0 auto;
                border: 3px solid lightblue;
                overflow: hidden;
                margin-top: 10px;
            }

            .box {
                width: 180px;
                height: 180px;
                margin: 0 20px 20px 0;
                background: lightgreen;
                float: left;
            }
        </style>
    </head>

    <body>
        <div id="div1">
            <div class="box">
            </div>
            <div class="box">
            </div>
            <div class="box">
            </div>
            <div class="box">
            </div>
            <div class="box">
            </div>
            <div class="box">
            </div>
            <div class="box">
            </div>
            <div class="box">
            </div>
        </div>
    </body>

</html>

运行后的结果:

图片 32

不过地点的效能中侧面多出了20px的间距,底下多出20px赤手,息灭措施如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>负边距</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            #div1 {
                width: 780px;
                height: 380px;
                margin: 0 auto;
                border: 3px solid lightblue;
                overflow: hidden;
                margin-top: 10px;
            }
            .box {
                width: 180px;
                height: 180px;
                margin: 0 20px 20px 0;
                background: lightgreen;
                float: left;
            }
            #div2{
                margin-right: -20px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                <div class="box">
                </div>
                <div class="box">
                </div>
                <div class="box">
                </div>
                <div class="box">
                </div>
                <div class="box">
                </div>
                <div class="box">
                </div>
                <div class="box">
                </div>
                <div class="box">
                </div>
            </div>
        </div>
    </body>
</html>

办法是运用了边距折叠,能够在前头的文章中查见到细节,基本原理如下图所示:

图片 33

4.8.2、设置viewport的方法

运用meta标签对viewport进行调节,如:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

参数解释:

图片 34

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>viewport</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    </head>
    <body>
        <p>
            viewport也称视口,PC上是指浏览器窗口的可视区域。先了解两个概念: 可见视口(visual viewport):浏览器窗口的可视区域 布局视口(layout viewport):CSS在应用时所设置的布局最大宽度。布局视口可以大于可见视口。
        </p>
    </body>
</html>

效果:

图片 35

4.8.3、小节

率先即使不设置meta viewport标签,那么移动器具上浏览器私下认可的小幅度(构造视口)值为800px,980px,1024px等那个,综上所述是超过荧屏宽度(可以预知视口)的。这里的肥瘦所用的单位px都以指css中的px,它跟代表实际显示屏物理像素的px不是一次事。

每个移动设备浏览器中皆有叁个可观的上升的幅度(ideal viewport),这一个非凡的拉长率是指css中的宽度,跟设备的大意宽度未有涉及,在css中,这些幅度就也正是百分百的所表示的足够宽度。

雷同在head中充裕如下的meta就可以:

<meta name="viewport" content="width=device-width, initial-scale=1" />

3.5.2、异步加载json并解析

m1.html页面:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>相册</title>
        <style type="text/css">
            .item {
                float: left;
                min-height: 300px;
            }
        </style>
    </head>
    <body>
        <h2>相册</h2>
        <div id="items">
            <p class="item"><img src="../img/i/1.jpg" /></p>
            <p class="item"><img src="../img/i/2.jpg" /></p>
            <p class="item"><img src="../img/i/3.jpg" /></p>
            <p class="item"><img src="../img/i/4.jpg" /></p>
            <p class="item"><img src="../img/i/5.jpg" /></p>
            <p class="item"><img src="../img/i/6.jpg" /></p>
        </div>
        <a href="m2.json" id="next"></a>
        <script src="../js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/infinite-scroll/jquery.infinitescroll.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $('#items').infinitescroll({
                navSelector: "#next",
                nextSelector: "a#next",
                itemSelector: ".item",
                debug: true,
                dataType: 'json',
                maxPage: 3,
                appendCallback:false,
                path: function(index) {
                    return "m"   index   ".json";
                }
            }, function(data) {

                for(var i=0;i<data.length;i  ){
                    $("<p class='item'><img src='../img/i/" data[i] ".jpg' /></p>").appendTo("#items");
                }

            });
        </script>
    </body>
</html>

m2.json数据:

[7,8,9,10,11,12]

m3.json数据:

[13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]

运转结果:

图片 36

因为从没动用瀑布流构造所以有一点不收拾,这里最首要演示分页。

作业:

形成一个瀑布流 延迟加载图片的相册或货品列表,须要图片大小不意气风发,示例。

1、有后台,通过ajax加载后台的json

2、200条数据以上

3、使用本事仿照效法:masonry imagesloaded infinitescroll

3.1、不足为奇瀑布流结构网址

鼻祖:Pinterest
通用类:豆瓣集镇,花瓣网,作者赏识,读图知天下
美观的女孩子图片:图丽网
前卫资源信息类:看潮网
时髦购物类:花菇街,漂亮说,人人逛街,卡当网
品牌推广类:凡客达人
家居o2o类:新巢网小猫家
微博社交类: 都爱看
好笑图片类:道趣儿
方式收藏类:微艺术
风尚图文分享:荷都分享网

图片 37

4.4、媒介查询语法

@media queries是CSS3中引进的,不仅可以够达成媒介类型的询问能够兑现设备性子的查询,能够简轻松单以为是对CSS2.1中的media的增进,基本语法如下:

@media [not|only] media_type and feature

not:取反操作

only:让不扶助media query的装置但读取media type类型的浏览器忽视那么些样式

media_type:是媒介类型,具体如下:

三、流式构造(Fluid)

一定架商谈流式构造在网页设计中最常用的二种构造方式。固定布局能显现网页的原本设计作用,流式布局则不受窗口宽度影响,流式布局使用百分比升幅来限定布局成分,那样能够依据客商端分辨率的轻重缓急来开展客观的体现。

定点构造功效:

图片 38

流式构造功效:

图片 39

运用后边的知识点能够兑现那二种构造,这里就不去落到实处了

3.3、masonry达成瀑布流布局

masonry是一个响应式网格布局库(非jQuery)。(Cascading grid layout library)

大器晚成旦选择CSS JavaScript当然能够完成瀑布流布局,但针锋相投费力,masonry是三个javascript插件,通过该插件能够轻便达成瀑布流构造,和CSS中float的法力不太大器晚成致的地方在 于,float先水平排列,然后再垂直排列,使用Masonry则垂直排列成分,然后将下三个因素放置到网格中的下二个开销区域。这种效果能够最小化处理不一致高度的因素在笔直方向的空闲。

官网:

源码:

图片 40

3.2、特点

优点

1、有效的下滑了分界面复杂度,节省了上空:大家不再必要丰腴复杂的页码导航链接或开关了。

2、对触屏设备来讲,人机联作方式更符合直觉:在活动使用的相互情形当中,通过发展滑动举行滚屏的操作已经变为最宗旨的客商习于旧贯,并且所必要的操作精准程度远小于点击链接或开关。

3、更加高的参预度:以上两点所带来的互相便捷性能够使客户将集中力越来越多的汇总在内容并不是操作上,进而让她们更乐于沉浸在斟酌与浏览个中。

缺点

  1. 少数的用例:
    极端滚动的方法只适用于一些特定类型付加物中间有个别一定项指标内容。
    比如说,在电子商务网址在那之中,顾客时时要求在货色列表与实际情况页面之间切换,这种情况下,守旧的、带有页码导航的主意得以扶持顾客更安妥和高精度的回到有个别特定的列表页面在那之中。

  2. 额外的复杂度:
    这多少个用来塑造无限滚动的JS库就算都自称相当的轻巧选拔,但你总会必要在和谐的制品中进行分化水平的定制化管理,以满意你们本身的需求;别的那个JS库在浏览器和器械包容性等方面包车型客车变现也长短不一,你一定要压实丰盛的测量检验与调治职业。

  3. 再见了,页脚:
    譬喻接纳了相比较非凡的Infiniti滚动加载情势,那就象征你能够和页脚说后会有期了。
    最棒思虑一下页脚对于你的网址,极其是客户的机要;假诺内部的确有比较根本的原委或链接,那么最棒换风华正茂种更守旧和安妥的法子。
    绝对不要耍弄你的客户,当她们三回次的浏览到页面尾部,见到页脚,却因为电动加载的内容忽然冒出而不管不顾都没有办法儿点击页脚中的链接时,他们会变的尤为愤怒。

  4. SEO:

汇总在意气风发页个中动态加载数据,与风流浪漫页意气风发页的出口比较,终归这种办法更便于SEO,那是您一定要思虑的标题。对于有个别以项目网址以来,在此方面实行冒险是特别不划算的。

  1. 有关页面数量的印象:
    实际站在顾客的角度来看,那一点绝不负面;可是,即使对于你的网址的话,通过越来越多的剧情页面展现更加多的相关音信(包蕴广告卡塔尔(英语:State of Qatar)是超重大的国策,那么单页Infiniti滚动的不二法门对您并不适用。

4.5、响应式栅格系统(Responsive)

在前面包车型客车布局中大家学习栅格系统,这里经过介绍人查询达成响应式栅格系统,脚本如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>响应式栅格</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            html,
            body {
                height: 100%;
                font: 20px/20px "microsoft yahei";
            }

            div {
                min-height: 100px;
            }

            .row {
                width: 800px;
                background: deepskyblue;
                margin: 0 auto;
            }

            .row:after {
                content: ' ';
                display: table;
                clear: both;
            }

            .col25 {
                width: 25%;
                background: lightgreen;
            }

            .col50 {
                width: 50%;
                background: lightcoral;
            }

            .col75 {
                width: 75%;
                background: lightblue;
            }

            [class*=col] {
                float: left;
            }
            /*0-480手机*/

            @media only screen and (max-width:480px) {
                .row {
                    width: 100%;
                }
                [class*=col] {
                    float: none;
                    margin-top: 5px;
                    width: 100%;
                }
            }
            /*480-960平板,手机横屏*/
            @media only screen and (min-width: 480px) and (max-width: 960px) {
                .row {
                    width: 480px;
                }
            }
            /*960PC屏幕*/
            @media only screen and (min-width:960px) {
                .row {
                    width: 960px;
                }
            }
        </style>
    </head>

    <body>
        <div id="container">
            <div id="header" class="row">
                header
            </div>
            <div id="main" class="row">
                <div id="left" class="col25">left</div>
                <div id="center" class="col50">center</div>
                <div id="right" class="col25">right</div>
            </div>
            <div id="footer" class="row">
                footer
            </div>
        </div>
    </body>

</html>

示范代码中经过@media设置了四个断点,当满意条件时样式会应用,达到响应式的指标,荧屏大960时: 

图片 41

480-960时期的成效:

图片 42

 在手提式有线电话机上模仿的成效:

图片 43

1.1.3、负边距 定位,达成程度垂直居中

实际请参见《CSS3与页面构造学习总括(三)——BFC、定位、浮动、7种垂直居中方法》

4.7、移动优先(Mobile First)

a)、桌面优先(优雅降级)

那是生机勃勃种古板的做法,开垦项目时事情发生前PC端,然后再经过某些hack的法子让项目平常运维在移动端,所谓的降级能够简轻便单以为就是将一些音讯蒙蔽,因为移动端的可视范围有限,必需给客商提供轻易为主的从头到尾的经过。

b卡塔尔(قطر‎、移动优先(渐进巩固)

图片 44

a卡塔尔(قطر‎、对于付加物设计员,三个新产物先规划移动版,然后才是桌面版。

b卡塔尔国、对于技术员,多个新成品,先支付移动版,然后才是桌面版本。

如此那般的功利是能把握好最基本最要紧内容,让分界面轻便。

练习1:

请模拟如下的响应式显示效果,供给合营各个设备:

图片 45

练习2:

模拟:头部

PC端效果:

图片 46

一举手一投足端效果:

图片 47

图片 48

五、REM达成响应式结构

rem是CSS3新引入来的三个心胸单位,相对长度单位。相对于根成分(即html成分卡塔尔(英语:State of Qatar)font-size总括值的倍数,如:

height:2rem;,则中度的分寸为32px(字体默感到16px,chrome最小为12px),要是根成分的书体为15px,则结果为30px。

页面中的尺寸都是html成分的font-size为相对单位,为暗中同意设置为20px,要是必要三个200px的深浅则应用10rem,然后当荧屏尺寸变化时通过javascript或media queries改良字体大小。

图片 49

4.8.1、须求设置viewport的原由

viewport也称视口,PC上是指浏览器窗口的可视区域。先精晓七个概念:

看得出视口(visual viewport):浏览器窗口的可视区域

构造视口(layout viewport):CSS在行使时所设置的布局最大开间。布局视口能够高于可知视口。

图片 50

移动设备上的viewport都以要抢先浏览器可视区域的、那样就能发出二个暗许缩放的结果,请看示比如下: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>viewport</title>
    </head>
    <body>
        <p>
            viewport也称视口,PC上是指浏览器窗口的可视区域。先了解两个概念: 可见视口(visual viewport):浏览器窗口的可视区域 布局视口(layout viewport):CSS在应用时所设置的布局最大宽度。布局视口可以大于可见视口。
        </p>
    </body>
</html>

运作效果:

图片 51

在妹夫大上海展览中心示的成效:

图片 52

上述是iphone5呈现的机能,字体根本看不清楚原因如下:

CSS中的1px并不等于设备的1px,PC中CSS的1个像素往往都以对应着计算机荧屏的1个大要像素
CSS中的像素是逻辑上的px
显示器上的像素是情理上的px,两个有分别
要思谋PPI,pixels per inch每英寸像素数
当PPI为90时各样像素为0.011英寸
摩托罗拉4的PPI为326,如若CSS像素再和配备像素保持对应,人眼将非常丑清极小的书体大概图案。

一抬手一动脚设备上的viewport分为layout viewport、visual viewport和ideal viewport 三类,ideal viewport是最适合运动器具的viewport,ideal viewport的上涨的幅度等于移动设备的荧屏宽度,也等于开间为100%的职能。ideal viewport 的意思在于,无论在何种分辨率的荧屏下,那几个针对ideal viewport 而规划的网址,没有供给顾客手动缩放,也不必要现身横向滚动条,都得以完备的显现给顾客。
种种设施ideal viewport
不畏平等英寸下正规分辨率的PC机的情理像素!常常为72px/英寸,即每英寸宽或高的显示屏有柒13个大要颜色点。

一抬手一动脚设备暗中认可的viewport是layout viewport,也便是分外比荧屏要宽的viewport,但在开展运动器材网址的支出时,大家须要的是ideal viewport。

图片 53

4.8、视区(viewport)

四、响应式结构(Responsive)

3.5.1、异步加载普通页面

p1.html页面:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .item {
                height: 200px;
            }
        </style>
    </head>
    <body>
        <h2>产品列表</h2>
        <div id="items">
            <p class="item">产品一</p>
            <p class="item">产品一</p>
            <p class="item">产品一</p>
            <p class="item">产品一</p>
            <p class="item">产品一</p>
            <p class="item">产品一</p>
        </div>
        <a href="p2.html" id="next">下一页</a>
        <script src="../js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/infinite-scroll/jquery.infinitescroll.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $('#items').infinitescroll({
                navSelector: "#next",  // 页面分页元素(成功后会被隐藏)
                nextSelector: "a#next",  // 需要点击的下一页链接,和2的html要对应
                itemSelector: ".item",  // ajax回来之后,每一项的selecter,比如每篇文章都有item这个class
                debug: true,  //是否调试
                dataType: 'html',  //数据类型
                maxPage: 3,  //最大页数
                path: function(index) {  //路径
                        return "p"   index   ".html";
                }
            }, function(newElements, data, url) {  //成功后的回调
                //console.log("路径:"   url);
                $(newElements).css('background-color', '#ffef00');
                // $(this).append(newElements);
            });
        </script>
    </body>

</html>

p2.html页面:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>P2</title>
    </head>
    <body>
        <p class="item">产品二</p>
        <p class="item">产品二</p>
        <p class="item">产品二</p>
        <p class="item">产品二</p>
        <p class="item">产品二</p>
        <p class="item">产品二</p>
    </body>
</html>

p3.html页面:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>P3</title>
    </head>
    <body>
        <p class="item">产品三</p>
        <p class="item">产品三</p>
        <p class="item">产品三</p>
        <p class="item">产品三</p>
        <p class="item">产品三</p>
        <p class="item">产品三</p>
    </body>
</html>

运作效果:

图片 54

三、瀑布流构造

瀑布流构造是流式构造的大器晚成种。是及时可比盛行的风度翩翩种网站页面布局,视觉呈现为叶影参差的多栏构造,随着页面滚动条向下滚动,这种构造还可能会不停加载数据块并附加至方今尾部。最初采取此结构的网址是Pinterest,慢慢在境内风靡开来。

5.2、使用媒介查询设置字体尺寸

身体力行代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>rem and media queries</title>
        <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <style>
            html {
                height: 100%;
                width: 100%;
                font-family: 'Microsoft YaHei';
                font-size: 20px;
                overflow: hidden;
                outline: 0;
            }

            .box {
                width: 5rem;
                height: 5rem;
                display: inline-block;
                margin-right: .5rem;
                margin-bottom: .5rem;
            }

            .blue-box {
                background-color: #06c;
            }

            .org-box {
                background-color: #1fc195;
            }

            @media only screen and (max-width: 300px) {
                html {
                    font-size: 10px;
                }
            }
            @media only screen and (min-width: 300px) and (max-width: 640px) {
                html {
                    font-size: 20px;
                }
            }
            @media only screen and (min-width: 640px) and (max-width: 960px) {
                html {
                    font-size: 30px;
                }
            }
            @media only screen and (min-width: 960px){
                html {
                    font-size: 40px;
                }
            }
        </style>
    </head>
    <body>
        <div class="bd">
            <div class="box blue-box"></div>
            <div class="box org-box"></div>
            <div class="box blue-box"></div>
            <div class="box org-box"></div>
            <div class="box blue-box"></div>
            <div class="box org-box"></div>
            <div class="box blue-box"></div>
            <div class="box org-box"></div>
            <div class="box blue-box"></div>
        </div>
    </body>
</html>

 

运转结果:

 图片 55

图片 56

1.2、双飞翼布局

杰出三列布局,也叫做圣杯布局【Holy Grail of Layouts】是凯文Cornell在二零零五年提议的叁个布局模型概念,在境内最先是由TaobaoUED的技术员传播开来,在炎黄也可能有叫法是双飞翼构造,它的布局要求有几点:

1、三列结构,中间宽度自适应,两侧定宽;
2、中间栏要在浏览器中先行呈现渲染;
3、允许大肆列的高度最高;
4、须求只用多少个万分的DIV标签;
5、供给用最简便易行的CSS、最少的HACK语句;

在不扩展额外标签的处境下,圣杯构造已经特别完美,圣杯结构使用了相对固化,现在布局是有局限性的,并且增长幅度调节要改的地点也多。在淘宝UED(User Experience Design)商量下,增扩展多个div就能够绝不相对结构了,只用到了退换和负边距,这正是我们所说的双飞翼构造,完毕的代码如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>双飞翼</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            body,
            html {
                height: 100%;
                font: 20px/40px "microsoft yahei";
                color: white;
            }

            #container {
                width: 90%;
                margin: 0 auto;
                height: 100%;
            }

            #header,
            #footer {
                height: 12.5%;
                background: deepskyblue;
            }

            #main {
                height: 75%;
            }

            #center,
            #left,
            #right {
                height: 100%;
                float: left;
            }

            #center {
                width: 100%;
                background: lightgreen;
            }

            #right {
                background: lightblue;
                width: 20%;
                margin-left: -20%;
            }

            #left {
                background: lightcoral;
                width: 20%;
                margin-left: -100%;
            }

            #main-inner {
                padding-left: 20%;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header">
                header
            </div>
            <div id="main">
                <div id="center">
                    <div id="main-inner">
                        center
                    </div>
                </div>
                <div id="left">
                    left
                </div>
                <div id="right">
                    right
                </div>
            </div>
            <div id="footer">
                footer
            </div>
        </div>
    </body>
</html>

 

运转效果:

图片 57

亲自去做中追加三个main-inner的目的是因为当left上移时与center重叠了,left覆盖了center,通过main-inner的padding将left占用的岗位空出。

1.3.2、多列布局

栅格系统并不曾真正兑现分栏效果(如word中的分栏),CSS3为了满意那几个必要加码了多列布局模块,如若急需得以完毕多列布局模块先看看那多少个CSS3属性:

column-count:<integer> | auto
效果与利益:设置或查究对象的列数
适用于:除table外的非替换块级成分, table cells, inline-block成分
<integer>: 用整数值来定义列数。不一致敬负值
auto: 依据 <' column-width '> 自定分配宽度

column-gap:<length> | normal
效果与利益:设置或探求对象的列与列之间的闲暇
适用于:定义了多列的成分
计算值:相对长度值也许normal

column-rule:<' column-rule-width '> || <' column-rule-style '> || <' column-rule-color '>
效能:设置或探究对象的列与列之间的边框。与border属性相像。
适用于:定义了多列的成分

columns:<' column-width '> || <' column-count '>
职能:设置或索求对象的列数和每列的大幅
适用于:除table外的非替换块级元素, table cells, inline-block成分
<' column-width '>: 设置或探索对象每列的增长幅度
<' column-count '>: 设置或探求对象的列数

演示代码:

图片 58图片 59

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>多列布局</title>
        <style type="text/css">
            #div1{
                column-count: 3;  /*分3栏*/
                column-gap: 40px;  /*栏间距*/
                column-rule: 2px solid lightgreen;  /*栏间分隔线,与border设置类似*/
                line-height: 26px;
                font-size: 14px;
                height: 500px;
                background: lightcyan;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
        </div>
    </body>
</html>

View Code

运作结果:

图片 60

1.1.4、去除列表最终一个li成分的border-bottom

图片 61

方法一:

图片 62图片 63

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>负边距</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                list-style: none;
            }
            #news {
                width: 200px;
                border: 2px solid lightblue;
                margin: 20px 0 0 20px;
            }

            #news li{
                height: 26px;
                line-height: 26px;
                border-bottom: 1px dashed   lightblue;
            }
            .lastLi{
                margin-bottom:-1px ;
            }
        </style>
    </head>
    <body>
        <div id="news">
            <ul>
                <li>Item A</li>
                <li>Item B</li>
                <li>Item C</li>
                <li>Item D</li>
                <li class="lastLi">Item E</li>
            </ul>
        </div>
    </body>
</html>

View Code

图片 64

方法二:

动用CSS3中的新添选择器,接受最终二个li,不使用类样式,好处是当li的个数不确准时进一层有利。

假诺li的border-bottom颜色与ul的border颜色是平等的时候,在视觉上是被埋伏了。假诺其颜色不一致等的时候依然有标题,给ul写个overflow:hidden;就足以减轻这一个主题素材。

练习:

图片 65

1.3.1、栅格系统

栏栅格系统便是采纳生成落成的多栏结构,在bootstrap中用的要命多,这里以一个980像素的宽达成4列的栅格系统,示例代码如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>栅格系统</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
            }

            html,
            body {
                height: 100%;
            }

            #container {
                width: 980px;
                margin: 0 auto;
                height: 10%;
            }

            #container div {
                height: 100%;
            }

            .col25 {
                width: 25%;
                background: lightgreen;
                float: left;
            }

            .col50 {
                width: 50%;
                background: lightblue;
                float: left;
            }

            .col75 {
                width: 75%;
                background: lightcoral;
                float: left;
            }
        </style>
    </head>

    <body>
        <div id="container">
            <div class="col50">
                A
            </div>
            <div class="col50">
                B
            </div>
            <div class="col25">
                C
            </div>
        </div>
    </body>

</html>

 

运维结果:

图片 66

图片 67

图片 68

雷同的规律可以自由扩充到8列,10列,16列的栅格系统。

本文由AG真人平台下注发布于时尚资讯,转载请注明出处:-100%时运行效果

关键词: ag真人 前端 CSS3 所有随笔 Web前端