ms-grid layout

最新推荐文章于 2021-08-02 16:31:00 发布

weixin_34127717

最新推荐文章于 2021-08-02 16:31:00 发布

阅读量146

点赞数

原文链接：http://www.cnblogs.com/Mr-Joe/p/3200725.html

版权

<!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>

转载于:https://www.cnblogs.com/Mr-Joe/p/3200725.html

weixin_34127717

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ms-grid layout

<!DOCTYPE html><html><head> <title></title> <script src="js/jq.js"></script> <script src="js/ko.js"></script> <scri...
复制链接

扫一扫

ms-grid layout

“相关推荐”对你有帮助么？