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

  • 相关阅读:
    关于OutputStream的write方法FAQ(from bbs.csdn.net)
    【Java】对文件或文件夹进行重命名
    [复习] JAVA 遍历目录 (递归调用和非递归)
    [科普]关于文件头的那些事
    Intellij IDEA和EclipsE之间的的全面对比
    为什么43%前端开发者想学Vue.js
    Chrome调试ECMAScript之断点debug技巧大全!
    如何Vue-cli开始使用在Vue.js项目中启动TDD(测试驱动开发)
    toString() 和 (String) 以及 valueOf() 三者的对照关系[java]
    java打印和重写toString
  • 原文地址:https://www.cnblogs.com/xyxpython/p/6166437.html
Copyright © 2011-2022 走看看