zoukankan      html  css  js  c++  java
  • 静态页面复习--网格嵌套练习

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.css" media="screen" title="no title" charset="utf-8">
        </head>
        <body>
            <div class="ui inverted vertical very padded center aligned segment">
                <div class="ui three column grid container">
                    <div class="column">
                        <div class="ui two column grid ">
                            <div class="column">
                                <div class="ui vertical inverted blue center aligned segment">
                                    <i class="shopping bag massive icon"></i>
                                </div>
                            </div>
                            <div class="column">
                                <div class="ui vertical inverted green center aligned segment">
                                    <i class="game massive icon"></i>
                                </div>
                            </div>
    
                        </div>
                    </div>
                    <div class="column">
                        <div class="ui vertical inverted orange center aligned segment">
                            <i class="users massive icon"></i>
                        </div>
                    </div>
                    <div class="column">
                        <div class="ui vertical inverted blue center aligned segment">
                            <i class="cloud massive icon"></i>
                        </div>
                    </div>
    
    
                    <!--  ====================first line=================  -->
    
    
                    <div class="column">
                        <div class="ui two column grid">
                            <div class="column">
                                <div class="ui vertical inverted purple center aligned segment">
                                    <i class="map outline massive massive icon"></i>
                                </div>
                            </div>
                            <div class="column">
                                <div class="ui vertical inverted blue center aligned segment">
                                    <i class="internet explorer massive icon"></i>
                                </div>
                            </div>
    
                        </div>
                    </div>
                    <div class="column">
                        <div class="ui vertical inverted red center aligned segment">
                            <i class="file image outline massive icon"></i>
                        </div>
                    </div>
                    <div class="column">
                        <div class="ui vertical inverted green center aligned segment">
                            <i class="calendar outline massive icon"></i>
                        </div>
                    </div>
    
    
                    <!--  ====================second line=================  -->
    
    
    
                    <div class="column">
                        <div class="ui vertical inverted green center aligned segment">
                            <i class="mail massive icon"></i>
                        </div>
                    </div>
                    <div class="column">
                        <div class="ui vertical inverted purple center aligned segment">
                            <i class="headphone massive icon"></i>
                        </div>
                    </div>
    
                    <div class="column">
                        <div class="ui two column grid">
                            <div class="column">
                                <div class="ui vertical inverted orange center aligned segment">
                                    <i class="toggle right massive icon"></i>
                                </div>
                            </div>
                            <div class="column">
                                <div class="ui vertical inverted blue center aligned segment">
                                    <i class="cloud massive icon"></i>
                                </div>
                            </div>
    
                        </div>
                    </div>
    
    
                </div>
            </div>
    
        </body>
    </html>

    新用到的样式:

    center aligned:居中

  • 相关阅读:
    JVM -- Full GC触发条件总结以及解决策略
    java实现-图的相关操作
    Integer的intValue()方法
    Java transient关键字
    Redis 单线程模型介绍
    String类的intern()方法 -- 重用String对象,节省内存消耗
    数据库阿里连接池 druid配置详解
    redis 实现发布/订阅模式
    Redis实现队列
    redis 实现分布式锁
  • 原文地址:https://www.cnblogs.com/xyxpython/p/6166437.html
Copyright © 2011-2022 走看看