<!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. Android（java）学习笔记127：Android Studio新建工程中的build.gradle、settings.gradle

    随着信息化的快速发展,IT项目变得越来越复杂,通常都是由多个子系统共同协作完成.对于这种多系统.多项目的情况,很多构建工具都已经提供了不错的支持,像maven.ant.Gradle除了借鉴了ant或者 ...

  2. spring+ibatis环境搭建

    简单的spring+ibatis入门实例:ibatis是一种半自动化的持久层框架,它介于JDBC和hibernate之间,使用比较灵活. 一:目录结构 二:需要导入的jar包: 所有的第三方jar包都 ...

  3. Java基本排序

    长度为N的数组升序排序 一,冒泡排序 public class BubbleSort { private double[] data; public BubbleSort(double[] data) ...

  4. hadoop的mapreduce过程

    http://www.cnblogs.com/sharpxiajun/p/3151395.html 下面我从逻辑实体的角度讲解mapreduce运行机制,这些按照时间顺序包括:输入分片(input s ...

  5. JD（转载）

    时间:2012-9-11 地点:川大 我只能说第一家公司,不是一般的火爆.不得不吐槽一下: 京东宣讲完全没有计划,只看到个下午两点半宣讲,结果跑过去,下午两点是宣讲管培的.在川大外的德克士呆了一下午. ...

  6. Object-C中的内存管理小记

    //错解1:内存泄露 - (void)setObj:(Object *)newObj { obj = [newObj retain]; } 当新旧对象指向不同时,执行这段代码后,obj会指向另一个对象 ...

  7. FusionChart 导出图片 功能实现（转载）

    FusionChart 导出图片 功能实现(转载) http://www.cnblogs.com/jiagoushi/archive/2013/02/05/2893468.html 题目:精美Fusi ...

  8. IOS 高级开发 KVC（二）

    前一篇博客最后介绍了KVC 再json 转模型时遇到一些问题.今天接着来介绍KVC 的其他用法.其实我们在一开始的时候就一直再强调命名的重要性.命名规范是KVC 存活的基础.如果没有这个条件支撑,那么 ...

  9. [DP] LGTB 玩THD （复杂状态DP）

    LGTB 玩THD LGTB 最近在玩一个类似DOTA 的游戏名叫THD有一天他在守一座塔,对面的N 个小兵排成一列从近到远站在塔前面每个小兵有一定的血量hi,杀死后有一定的金钱gi每一秒,他都可以攻 ...

  10. Qt-获取主机网络信息之QNetworkInterface

    QNetworkInterface类提供了一个主机IP地址和网络接口的列表. QNetworkInterface表示了当前程序正在运行时与主机绑定的一个网络接口.每个网络接口可能包含0个或者多个IP地 ...