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:居中

  • 相关阅读:
    JSON解析之——Android
    Xml解析之——Java/Android/Python
    Design Pattern —— Singleton
    设计模式(10)--观察者模式
    设计模式(9)--建造者模式
    设计模式(8)--外观模式
    设计模式(7)--模板模式
    设计模式(6)--原型模式
    设计模式(5)--工厂模式
    设计模式(4)--代理模式
  • 原文地址:https://www.cnblogs.com/xyxpython/p/6166437.html
Copyright © 2011-2022 走看看