码迷,mamicode.com
首页 > 其他好文 > 详细

网格嵌套练习

时间:2016-12-13 07:32:22      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:ssi   har   orange   style   href   out   icon   code   title   

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

技术分享

网格嵌套练习

标签:ssi   har   orange   style   href   out   icon   code   title   

原文地址:http://www.cnblogs.com/xyxpython/p/6166437.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!