<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script src="js/jq.js"></script>

    <script src="js/ko.js"></script>

    <script src="resources/lib/core.js"></script>

    <script src="resources/lib/nav.js"></script>

    <script src="js/index.js"></script>

    <style>

        .container {

            width: 620px;

            height: 415px;;

            display: -ms-grid;

            -ms-grid-columns: 5px(200px 5px ) [ 3 ];

            -ms-grid-rows: 5px(200px 5px ) [ 2 ];

            border: 1px solid red;

        }

        .item {

            width: 200px;

            height: 200px;

            line-height: 200px;

            text-align: center;;

            border: 1px solid deepskyblue;

        }

        .item:nth-child(odd){

            background: cornflowerblue;

            color:white;

        }

        .item:nth-child(even){

            background: darkslategray;

            color:white;

        }

        .container .item:first-child {

            -ms-grid-column: 2;

            -ms-grid-row: 2;

        }

        .container .item:nth-child(2) {

            -ms-grid-column: 4;

            -ms-grid-row: 2;

        }

        .container .item:nth-child(3) {

            -ms-grid-column: 6;

            -ms-grid-row: 2;

        }

        .container .item:nth-child(4) {

            -ms-grid-column: 2;

            -ms-grid-row: 4;

        }

        .container .item:nth-child(5) {

            -ms-grid-column: 4;

            -ms-grid-row: 4;

        }

        .container .item:nth-child(6) {

            -ms-grid-column: 6;

            -ms-grid-row: 4;

        }

        .container .item:nth-child(7) {

            -ms-grid-column: 2;

            -ms-grid-row: 6;

        }

    </style>

</head>

<body>

<div class='container' data-bind='foreach:people'>

    <div class='item' data-bind='text:item'>

    </div>

</div>

</body>

</html>

ms-grid layout的更多相关文章

  1. CSS3 GRID LAYOUT

    CSS3 GRID LAYOUT http://www.w3cplus.com/blog/tags/356.html 中国首个开源 HTML5 跨屏前端框架 http://amazeui.org/

  2. iphone Dev 开发实例9:Create Grid Layout Using UICollectionView in iOS 6

    In this tutorial, we will build a simple app to display a collection of recipe photos in grid layout ...

  3. Unity3D 使用 UI 的 Grid Layout Group 组件。

    1.首先创建一个容器,用于存放列表项的内容. 这里使用 Panel 来做为容器. 这里要注意! “Grid Layout Group”是要增加在容器的游戏对象里. 同时,只有容器对象的子对象才有排列效 ...

  4. WPF笔记(2.4 Grid)——Layout

    原文:WPF笔记(2.4 Grid)--Layout 第一章已经简单介绍过这个容器,这一节详细介绍.Grid一般是用表格(Grid.Row 和Grid.Column )的,比StackPanel更细致 ...

  5. flexbox与grid layout的区别

    flexbox是一种针对一维的局部布局,以轴为核心的弹性布局. grid layout是二维的更加全面的网格布局,

  6. CSS: Grid Layout Module

    Grid Layout The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, mak ...

  7. [Grid Layout] Use the repeat function to efficiently write grid-template values

    We can use the repeat() function if we have repeating specifications for columns and rows. With the  ...

  8. [Grid Layout] Describe a grid layout using named grid lines

    We can use named grid lines to describe our grid layout. Let’s see how to apply this to our grid-tem ...

  9. [Grid Layout] Specify a grid gutter size with grid-gap

    It’s beautifully straightforward to add a gutter to our grid layout. Let’s apply one with grid-gap.

  10. [CSS] Get up and running with CSS Grid Layout

    We’ll discuss the display values pertinent to CSS Grid Layout – grid, inline-grid, and subgrid. Then ...

随机推荐

  1. Fragment+Activity传递数据

    自己经常使用的知识点,每次到要用的时候都还要再查一次才能懂得使用,终于体会到总结的必要性了. Activity传递数据给Fragment Bundle bundle_fragment=new Bund ...

  2. ios代理设计模式

    代理设计模式的作用:     1.A对象监听B对象的一些行为,A成为B的代理     2.B对象想告诉A对象一些事情,A成为B的代理   代理设计模式的总结:     如果你想监听别人的一些行为,那么 ...

  3. 通过pod导入第三方框架

    项目导入第三方框架的时候,如果直接拖到项目中的话还需要去修改某些设置以及导入头文件等,当项目比较大的时候这个方法就比较笨拙了,我们可以通过pod来简化这写流程: 在使用pod之前我们需要安装Cocoa ...

  4. 关于SWT/JFace的事件模型的四种方式

    事件的4种写法 1.匿名内部类方式的写法 2.命名内部类的写法 3.外部类写法 4.实现监听接口的写法 第一种用匿名内部类的方法: public class HelloWorld { private ...

  5. 你了解C语言中的关键字volatile吗？

    我们在学习C语言的32个关键字时,大家都不太注意volatile这个关键字,volatile是一个类型修饰符.volatile的中文意思是“易变的”.那么在程序中我们在什么情况下才使用他呢?我们在分析 ...

  6. Java获取 JVM 运行信息

    import java.lang.management.ClassLoadingMXBean; import java.lang.management.ManagementFactory; impor ...

  7. ADB无线连接

    注意:PC和手机在同一个局域网 背景:很长的时候手机线不够用,连接线还是不爽,偶尔会掉,平时可能手机会被拿走,重现crash的问题,不能很友好的使用DDMS,自己找了一些文章,ADB无线连接,实验成功 ...

  8. [转载]Ubuntu 14.04设置固定ip

    参考链接: ubuntu14.04设置静态ip Ubuntu10.10的网络配置 (总结的比较好些) 由于我的虚拟机中的Ubuntu 14.04中,只安装了一个gitlab,gitlab中配置了固定i ...

  9. golang 依赖控制反转（IoC）

    主流开发语言,为了达到项目间的低耦合,都会借助IoC框架来实现.即抽象和实现分离,使用抽象层,不用关心这些抽象层的具体实现:抽象层的实现,可以独立实现.现在比较流行的领域驱动设计(ddd),为了达到将 ...

  10. spark stream初探

    spark带了一个NetworkWordCount测试程序,用以统计来自某TCP连接的单词输入: /usr/local/spark/bin/run-example streaming.NetworkW ...