Metro UI CSS 学习笔记之Tiles组件

虾米姐 阅读:629 2021-03-31 22:45:12 评论:0

Tiles 组件简介:

Tiles是你应用程序子模块的表现方式。你的内容显示在Tile中,理想状态下这些东西是可以定期更新的,特别是你的内容是实时的,这样更新可以与用户更好的交流。 Tiles 可以文本和图像的组合一起显示,也可以以一枚徽章的状态来显示。 Tile是一个区块,可以放在任何容器内。

Tile的默认尺寸大小是150x150像素。 Tile尺寸也可以添加子类来增加更多的对象: .double(-vertical).triple(-vertical),.quadro(-vertical).

可以对Tile设置已选择状态:"selected"。你也可以通过添加类名.bg-color-*来改变Tile的背景色。

Tiles 语法定义:

     <div class="tile"></div> 
    <div class="tile double"></div> 
    <div class="tile selected"></div> 
    <div class="tile bg-color-orange"></div>

Metro UI CSS 案例Demo

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
    <!--metro UI css 样式文件(组件基础)--> 
    <link href="css/metro-bootstrap.css" rel="stylesheet"> 
    <link href="css/metro-bootstrap-responsive.css" rel="stylesheet"> 
    <!--metro UI css 样式文件(组件基础)--> 
    <link href="css/modern.css" rel="stylesheet"> 
    <link href="css/modern-responsive.css" rel="stylesheet"> 
 
    <!--加载jquery js 文件--> 
    <script src="js/jquery/jquery.min.js"></script> 
    <script src="js/jquery/jquery.widget.min.js"></script> 
    <!--加载metro js 文件--> 
    <script src="js/metro/metro.min.js"></script> 
 
    <title>Modern UI CSS 学习笔记</title> 
 
 
 
</head> 
<body class="modern-ui" style="background: #f1f1f1"> 
 
<div class="page"> 
    <div class="page-header"> 
        <div class="page-header-content"> 
            <h3>Metro UI CSS样式文件之 Tiles组件</h3> 
        </div> 
    </div> 
 
    <div class="page-region"> 
        <div class="page-region-content"> 
            <p>Tiles 基本样式</p> 
 
            <div class="clearfix"> 
                <div class="tile"></div> 
                <div class="tile double"></div> 
                <div class="tile selected"></div> 
                <div class="tile bg-color-orange"></div> 
            </div> 
 
        </div> 
    </div> 
</div> 
 
</body> 
</html>
效果展示:



Tile内容

Tile可以使用类名.tile-content将内容放置在子容器中。类名.tile-content顶部和底部有10px的内距,距左边和右边有15px的内距。

Tile 语法定义:

   <div class="tile"> 
        <div class="tile-content"> 
            ...content here... 
        </div> 
    </div>

Metro UI CSS 案例Demo

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
    <!--metro UI css 样式文件(组件基础)--> 
    <link href="css/metro-bootstrap.css" rel="stylesheet"> 
    <link href="css/metro-bootstrap-responsive.css" rel="stylesheet"> 
    <!--metro UI css 样式文件(组件基础)--> 
    <link href="css/modern.css" rel="stylesheet"> 
    <link href="css/modern-responsive.css" rel="stylesheet"> 
 
    <!--加载jquery js 文件--> 
    <script src="js/jquery/jquery.min.js"></script> 
    <script src="js/jquery/jquery.widget.min.js"></script> 
    <!--加载metro js 文件--> 
    <script src="js/metro/metro.min.js"></script> 
 
    <title>Modern UI CSS 学习笔记</title> 
 
 
 
</head> 
<body class="modern-ui" style="background: #f1f1f1"> 
 
<div class="page"> 
    <div class="page-header"> 
        <div class="page-header-content"> 
            <h3>Metro UI CSS样式文件之 Tiles组件</h3> 
        </div> 
    </div> 
 
    <div class="page-region"> 
        <div class="page-region-content"> 
            <p>Tiles 基本样式</p> 
 
            <div class="clearfix"> 
                <div class="tile"></div> 
                <div class="tile double"></div> 
                <div class="tile selected"></div> 
                <div class="tile bg-color-orange"></div> 
            </div> 
 
            <p>Tiles 内容</p> 
            <div class="clearfix"> 
                <div class="tile double bg-color-green"> 
                    <div class="tile-content"> 
                        <h2>mattberg@live.com</h2> 
                        <h5>Re: Wedding Annoucement!</h5> 
                        <p> 
                            Congratulations! I'm really excited to celebrate with you all. Thanks for... 
                        </p> 
                    </div> 
                    <div class="brand"> 
                        <div class="badge">12</div> 
                        <img src="images/Mail128.png" class="icon"> 
                    </div> 
                </div> 
                <div class="tile bg-color-red icon"> 
                    <b class="check"></b> 
                    <div class="tile-content"> 
                        <img src="images/Market128.png"> 
                    </div> 
                    <div class="brand"> 
                        <span class="name">Store</span> 
                        <span class="badge">6</span> 
                    </div> 
                </div> 
                <div class="tile double bg-color-blueDark"> 
                    <div class="tile-content"> 
                        <img class="place-right" src="images/michael.jpg"> 
                        <h4 style="margin-bottom: 5px;">michael_angiulo</h4> 
                        <p> 
                            I just saw Thor last night. It was awesome! I think you'd love it. 
                        </p><h5>RT @julie_green</h5> 
                        <p></p> 
                    </div> 
                    <div class="brand"> 
                        <span class="name">Tweet@rama</span> 
                    </div> 
                </div> 
            </div> 
 
 
 
        </div> 
    </div> 
</div> 
 
</body> 
</html>
效果展示:

Tiles内容内置的子类

Tiles内容在子块可使用的类名: .icon.image.image-set.image-slider.

Metro UI CSS 案例Demo

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
    <!--metro UI css 样式文件(组件基础)--> 
    <link href="css/metro-bootstrap.css" rel="stylesheet"> 
    <link href="css/metro-bootstrap-responsive.css" rel="stylesheet"> 
    <!--metro UI css 样式文件(组件基础)--> 
    <link href="css/modern.css" rel="stylesheet"> 
    <link href="css/modern-responsive.css" rel="stylesheet"> 
 
    <!--加载jquery js 文件--> 
    <script src="js/jquery/jquery.min.js"></script> 
    <script src="js/jquery/jquery.widget.min.js"></script> 
    <!--加载metro js 文件--> 
    <script src="js/metro/metro.min.js"></script> 
 
    <title>Modern UI CSS 学习笔记</title> 
 
 
 
</head> 
<body class="modern-ui" style="background: #f1f1f1"> 
 
<div class="page"> 
    <div class="page-header"> 
        <div class="page-header-content"> 
            <h3>Metro UI CSS样式文件之 Tiles组件</h3> 
        </div> 
    </div> 
 
    <div class="page-region"> 
        <div class="page-region-content"> 
            <p>Tiles 基本样式</p> 
 
            <div class="clearfix"> 
                <div class="tile"></div> 
                <div class="tile double"></div> 
                <div class="tile selected"></div> 
                <div class="tile bg-color-orange"></div> 
            </div> 
 
            <p>Tiles 内容</p> 
            <div class="clearfix"> 
                <div class="tile double bg-color-green"> 
                    <div class="tile-content"> 
                        <h2>mattberg@live.com</h2> 
                        <h5>Re: Wedding Annoucement!</h5> 
                        <p> 
                            Congratulations! I'm really excited to celebrate with you all. Thanks for... 
                        </p> 
                    </div> 
                    <div class="brand"> 
                        <div class="badge">12</div> 
                        <img src="images/Mail128.png" class="icon"> 
                    </div> 
                </div> 
                <div class="tile bg-color-red icon"> 
                    <b class="check"></b> 
                    <div class="tile-content"> 
                        <img src="images/Market128.png"> 
                    </div> 
                    <div class="brand"> 
                        <span class="name">Store</span> 
                        <span class="badge">6</span> 
                    </div> 
                </div> 
                <div class="tile double bg-color-blueDark"> 
                    <div class="tile-content"> 
                        <img class="place-right" src="images/michael.jpg"> 
                        <h4 style="margin-bottom: 5px;">michael_angiulo</h4> 
                        <p> 
                            I just saw Thor last night. It was awesome! I think you'd love it. 
                        </p><h5>RT @julie_green</h5> 
                        <p></p> 
                    </div> 
                    <div class="brand"> 
                        <span class="name">Tweet@rama</span> 
                    </div> 
                </div> 
            </div> 
 
            <p>Tiles内容内置的子类</p> 
            <div class="grid"> 
                <div class="row"> 
                    <div class="span2"> 
                        <h5>字类名<code>.icon</code></h5> 
                        <div class="tile icon"> 
                            <div class="tile-content"> 
                                <img src="images/armor.png"> 
                            </div> 
                        </div> 
                    </div> 
                    <div class="span4"> 
                        <h5>子类名<code>.image</code></h5> 
                        <div class="tile double image"> 
                            <div class="tile-content"> 
                                <img alt="" src="images/5.jpg"> 
                            </div> 
                        </div> 
                    </div> 
 
                    <div class="span4"> 
                        <h5>子类名<code>.image-set</code></h5> 
                        <div class="tile double image-set"> 
                            <div class="tile-content"> 
                                <img alt="" src="images/1.jpg"> 
                            </div> 
                            <div class="tile-content"> 
                                <img alt="" src="images/2.jpg"> 
                            </div> 
                            <div class="tile-content"> 
                                <img alt="" src="images/3.jpg"> 
                            </div> 
                            <div class="tile-content"> 
                                <img alt="" src="images/4.jpg"> 
                            </div> 
                            <div class="tile-content"> 
                                <img alt="" src="images/5.jpg"> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
            </div> 
 
        </div> 
    </div> 
</div> 
 
</body> 
</html>
效果展示:



Tile滑块控件

使用tile-slider,你需要在你的页面</head> 前加上tile-slider.js并在Title对像中添加自定义属性data-role="tile-slider" 。 也可以为Tile对像设置特定的参数,例如:directionduration 和perioddata-param-direction(duration, period)

Metro UI CSS 案例Demo

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
    <!--metro UI css 样式文件(组件基础)--> 
    <link href="css/metro-bootstrap.css" rel="stylesheet"> 
    <link href="css/metro-bootstrap-responsive.css" rel="stylesheet"> 
    <!--metro UI css 样式文件(组件基础)--> 
    <link href="css/modern.css" rel="stylesheet"> 
    <link href="css/modern-responsive.css" rel="stylesheet"> 
 
    <!--加载jquery js 文件--> 
    <script src="js/jquery/jquery.min.js"></script> 
    <script src="js/jquery/jquery.widget.min.js"></script> 
    <!--加载metro js 文件--> 
    <script src="js/metro/metro.min.js"></script> 
    <!--加载第三方js 文件--> 
    <script src="js/modern/tile-slider.js"></script> 
    <title>Modern UI CSS 学习笔记</title> 
 
 
 
</head> 
<body class="modern-ui" style="background: #f1f1f1"> 
 
<div class="page"> 
    <div class="page-header"> 
        <div class="page-header-content"> 
            <h3>Metro UI CSS样式文件之 Tiles组件</h3> 
        </div> 
    </div> 
 
    <div class="page-region"> 
        <div class="page-region-content"> 
            <p>Tiles 基本样式</p> 
 
            <div class="clearfix"> 
                <div class="tile"></div> 
                <div class="tile double"></div> 
                <div class="tile selected"></div> 
                <div class="tile bg-color-orange"></div> 
            </div> 
 
            <p>Tiles 内容</p> 
            <div class="clearfix"> 
                <div class="tile double bg-color-green"> 
                    <div class="tile-content"> 
                        <h2>mattberg@live.com</h2> 
                        <h5>Re: Wedding Annoucement!</h5> 
                        <p> 
                            Congratulations! I'm really excited to celebrate with you all. Thanks for... 
                        </p> 
                    </div> 
                    <div class="brand"> 
                        <div class="badge">12</div> 
                        <img src="images/Mail128.png" class="icon"> 
                    </div> 
                </div> 
                <div class="tile bg-color-red icon"> 
                    <b class="check"></b> 
                    <div class="tile-content"> 
                        <img src="images/Market128.png"> 
                    </div> 
                    <div class="brand"> 
                        <span class="name">Store</span> 
                        <span class="badge">6</span> 
                    </div> 
                </div> 
                <div class="tile double bg-color-blueDark"> 
                    <div class="tile-content"> 
                        <img class="place-right" src="images/michael.jpg"> 
                        <h4 style="margin-bottom: 5px;">michael_angiulo</h4> 
                        <p> 
                            I just saw Thor last night. It was awesome! I think you'd love it. 
                        </p><h5>RT @julie_green</h5> 
                        <p></p> 
                    </div> 
                    <div class="brand"> 
                        <span class="name">Tweet@rama</span> 
                    </div> 
                </div> 
            </div> 
 
            <p>Tiles内容内置的子类</p> 
            <div class="grid"> 
                <div class="row"> 
                    <div class="span2"> 
                        <h5>字类名<code>.icon</code></h5> 
                        <div class="tile icon"> 
                            <div class="tile-content"> 
                                <img src="images/armor.png"> 
                            </div> 
                        </div> 
                    </div> 
                    <div class="span4"> 
                        <h5>子类名<code>.image</code></h5> 
                        <div class="tile double image"> 
                            <div class="tile-content"> 
                                <img alt="" src="images/5.jpg"> 
                            </div> 
                        </div> 
                    </div> 
 
                    <div class="span4"> 
                        <h5>子类名<code>.image-set</code></h5> 
                        <div class="tile double image-set"> 
                            <div class="tile-content"> 
                                <img alt="" src="images/1.jpg"> 
                            </div> 
                            <div class="tile-content"> 
                                <img alt="" src="images/2.jpg"> 
                            </div> 
                            <div class="tile-content"> 
                                <img alt="" src="images/3.jpg"> 
                            </div> 
                            <div class="tile-content"> 
                                <img alt="" src="images/4.jpg"> 
                            </div> 
                            <div class="tile-content"> 
                                <img alt="" src="images/5.jpg"> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
            </div> 
 
 
            <p>Tile滑块插件</p> 
            <div data-role="tile-slider" class="tile double image-slider"> 
                <div class="tile-content" style="position: absolute; left: 0px; top: -57.7693px;"> 
                    <img alt="" src="images/1.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 0px; top: 92.2307px;"> 
                    <img alt="" src="images/2.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 0px; top: -150px;"> 
                    <img alt="" src="images/3.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 0px; top: -150px;"> 
                    <img alt="" src="images/4.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 0px; top: -150px;"> 
                    <img alt="" src="images/5.jpg"> 
                </div> 
            </div> 
 
            <div data-param-period="3000" data-param-direction="left" data-role="tile-slider" class="tile double image-slider"> 
                <div class="tile-content" style="position: absolute; left: -310px; top: 0px;"> 
                    <img alt="" src="images/1.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: -310px; top: 0px;"> 
                    <img alt="" src="images/2.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: -310px; top: 0px;"> 
                    <img alt="" src="images/3.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: -113.548px; top: 0px;"> 
                    <img alt="" src="images/4.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 196.452px; top: 0px;"> 
                    <img alt="" src="images/5.jpg"> 
                </div> 
            </div> 
 
            <div data-param-period="3000" data-param-direction="down" data-role="tile-slider" class="tile double image-slider"> 
                <div class="tile-content" style="position: absolute; left: 0px; top: 150px;"> 
                    <img alt="" src="images/1.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 0px; top: 150px;"> 
                    <img alt="" src="images/2.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 0px; top: 150px;"> 
                    <img alt="" src="images/3.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 0px; top: 47.4342px;"> 
                    <img alt="" src="images/4.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 0px; top: -102.566px;"> 
                    <img alt="" src="images/5.jpg"> 
                </div> 
            </div> 
 
            <div data-param-duration="3000" data-param-period="3000" data-param-direction="right" data-role="tile-slider" class="tile double image-slider"> 
                <div class="tile-content" style="position: absolute; left: 310px; top: 0px;"> 
                    <img alt="" src="images/1.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 310px; top: 0px;"> 
                    <img alt="" src="images/2.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 310px; top: 0px;"> 
                    <img alt="" src="images/3.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 0px; top: 0px;"> 
                    <img alt="" src="images/4.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: -310px; top: 0px;"> 
                    <img alt="" src="images/5.jpg"> 
                </div> 
            </div> 
 
            <div data-param-period="3000" data-role="tile-slider" class="tile double bg-color-green"> 
                <div class="tile-content" style="position: absolute; left: 0px; top: 150px;"> 
                    <h2>mattberg@live.com</h2> 
                    <h5>Re: Wedding Annoucement!</h5> 
                    <p> 
                        Congratulations! I'm really excited to celebrate with you all. Thanks for... 
                    </p> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 0px; top: 0px;"> 
                    <h2>tina@live.com</h2> 
                    <h5>Re: Wedding Annoucement!</h5> 
                    <p> 
                        Huh! Waw!!! I'm really excited to celebrate with you all. Thanks for... 
                    </p> 
                </div> 
                <div class="brand"> 
                    <div class="badge">12</div> 
                    <img src="images/Mail128.png" class="icon"> 
                </div> 
            </div> 
 
        </div> 
    </div> 
</div> 
 
</body> 
</html>

默认参数值:

  • Duration - 1000ms
  • Period - 2000ms
  • Direction - "up"

效果展示:


Tile 状态:
Tile 状态(品牌信息)可以使用类名.brand or .tile-status放在子容器之中。 Tile 状态也可以修改背景颜色,例如使用类名.bg-color-*

Metro UI CSS 案例Demo
<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
    <!--metro UI css 样式文件(组件基础)--> 
    <link href="css/metro-bootstrap.css" rel="stylesheet"> 
    <link href="css/metro-bootstrap-responsive.css" rel="stylesheet"> 
    <!--metro UI css 样式文件(组件基础)--> 
    <link href="css/modern.css" rel="stylesheet"> 
    <link href="css/modern-responsive.css" rel="stylesheet"> 
 
    <!--加载jquery js 文件--> 
    <script src="js/jquery/jquery.min.js"></script> 
    <script src="js/jquery/jquery.widget.min.js"></script> 
    <!--加载metro js 文件--> 
    <script src="js/metro/metro.min.js"></script> 
    <!--加载第三方js 文件--> 
    <script src="js/modern/tile-slider.js"></script> 
    <title>Modern UI CSS 学习笔记</title> 
 
 
 
</head> 
<body class="modern-ui" style="background: #f1f1f1"> 
 
<div class="page"> 
    <div class="page-header"> 
        <div class="page-header-content"> 
            <h3>Metro UI CSS样式文件之 Tiles组件</h3> 
        </div> 
    </div> 
 
    <div class="page-region"> 
        <div class="page-region-content"> 
            <p>Tile状态</p> 
            <div class="grid"> 
                <div class="row"> 
 
                    <div class="span4"> 
                        <div class="tile double"> 
                            <div class="brand"> 
                                <div class="badge">10</div> 
                                <div class="name">Mail</div> 
                            </div> 
                        </div> 
                    </div> 
 
                    <div class="span4"> 
                        <div class="tile double bg-color-green"> 
                            <div class="brand"> 
                                <div class="badge">12</div> 
                                <img src="./images/Mail128.png" class="icon"> 
                            </div> 
                        </div> 
                    </div> 
 
                    <div class="span4"> 
                        <div class="tile double bg-color-pink"> 
                            <div class="brand"> 
                                <div class="name">Photos</div> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
            </div> 
            <p>Tiles 基本样式</p> 
 
            <div class="clearfix"> 
                <div class="tile"></div> 
                <div class="tile double"></div> 
                <div class="tile selected"></div> 
                <div class="tile bg-color-orange"></div> 
            </div> 
 
            <p>Tiles 内容</p> 
            <div class="clearfix"> 
                <div class="tile double bg-color-green"> 
                    <div class="tile-content"> 
                        <h2>mattberg@live.com</h2> 
                        <h5>Re: Wedding Annoucement!</h5> 
                        <p> 
                            Congratulations! I'm really excited to celebrate with you all. Thanks for... 
                        </p> 
                    </div> 
                    <div class="brand"> 
                        <div class="badge">12</div> 
                        <img src="images/Mail128.png" class="icon"> 
                    </div> 
                </div> 
                <div class="tile bg-color-red icon"> 
                    <b class="check"></b> 
                    <div class="tile-content"> 
                        <img src="images/Market128.png"> 
                    </div> 
                    <div class="brand"> 
                        <span class="name">Store</span> 
                        <span class="badge">6</span> 
                    </div> 
                </div> 
                <div class="tile double bg-color-blueDark"> 
                    <div class="tile-content"> 
                        <img class="place-right" src="images/michael.jpg"> 
                        <h4 style="margin-bottom: 5px;">michael_angiulo</h4> 
                        <p> 
                            I just saw Thor last night. It was awesome! I think you'd love it. 
                        </p><h5>RT @julie_green</h5> 
                        <p></p> 
                    </div> 
                    <div class="brand"> 
                        <span class="name">Tweet@rama</span> 
                    </div> 
                </div> 
            </div> 
 
            <p>Tiles内容内置的子类</p> 
            <div class="grid"> 
                <div class="row"> 
                    <div class="span2"> 
                        <h5>字类名<code>.icon</code></h5> 
                        <div class="tile icon"> 
                            <div class="tile-content"> 
                                <img src="images/armor.png"> 
                            </div> 
                        </div> 
                    </div> 
                    <div class="span4"> 
                        <h5>子类名<code>.image</code></h5> 
                        <div class="tile double image"> 
                            <div class="tile-content"> 
                                <img alt="" src="images/5.jpg"> 
                            </div> 
                        </div> 
                    </div> 
 
                    <div class="span4"> 
                        <h5>子类名<code>.image-set</code></h5> 
                        <div class="tile double image-set"> 
                            <div class="tile-content"> 
                                <img alt="" src="images/1.jpg"> 
                            </div> 
                            <div class="tile-content"> 
                                <img alt="" src="images/2.jpg"> 
                            </div> 
                            <div class="tile-content"> 
                                <img alt="" src="images/3.jpg"> 
                            </div> 
                            <div class="tile-content"> 
                                <img alt="" src="images/4.jpg"> 
                            </div> 
                            <div class="tile-content"> 
                                <img alt="" src="images/5.jpg"> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
            </div> 
 
 
            <p>Tile滑块插件</p> 
            <div data-role="tile-slider" class="tile double image-slider"> 
                <div class="tile-content" style="position: absolute; left: 0px; top: -57.7693px;"> 
                    <img alt="" src="images/1.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 0px; top: 92.2307px;"> 
                    <img alt="" src="images/2.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 0px; top: -150px;"> 
                    <img alt="" src="images/3.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 0px; top: -150px;"> 
                    <img alt="" src="images/4.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 0px; top: -150px;"> 
                    <img alt="" src="images/5.jpg"> 
                </div> 
            </div> 
 
            <div data-param-period="3000" data-param-direction="left" data-role="tile-slider" class="tile double image-slider"> 
                <div class="tile-content" style="position: absolute; left: -310px; top: 0px;"> 
                    <img alt="" src="images/1.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: -310px; top: 0px;"> 
                    <img alt="" src="images/2.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: -310px; top: 0px;"> 
                    <img alt="" src="images/3.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: -113.548px; top: 0px;"> 
                    <img alt="" src="images/4.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 196.452px; top: 0px;"> 
                    <img alt="" src="images/5.jpg"> 
                </div> 
            </div> 
 
            <div data-param-period="3000" data-param-direction="down" data-role="tile-slider" class="tile double image-slider"> 
                <div class="tile-content" style="position: absolute; left: 0px; top: 150px;"> 
                    <img alt="" src="images/1.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 0px; top: 150px;"> 
                    <img alt="" src="images/2.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 0px; top: 150px;"> 
                    <img alt="" src="images/3.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 0px; top: 47.4342px;"> 
                    <img alt="" src="images/4.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 0px; top: -102.566px;"> 
                    <img alt="" src="images/5.jpg"> 
                </div> 
            </div> 
 
            <div data-param-duration="3000" data-param-period="3000" data-param-direction="right" data-role="tile-slider" class="tile double image-slider"> 
                <div class="tile-content" style="position: absolute; left: 310px; top: 0px;"> 
                    <img alt="" src="images/1.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 310px; top: 0px;"> 
                    <img alt="" src="images/2.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 310px; top: 0px;"> 
                    <img alt="" src="images/3.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 0px; top: 0px;"> 
                    <img alt="" src="images/4.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: -310px; top: 0px;"> 
                    <img alt="" src="images/5.jpg"> 
                </div> 
            </div> 
 
            <div data-param-period="3000" data-role="tile-slider" class="tile double bg-color-green"> 
                <div class="tile-content" style="position: absolute; left: 0px; top: 150px;"> 
                    <h2>mattberg@live.com</h2> 
                    <h5>Re: Wedding Annoucement!</h5> 
                    <p> 
                        Congratulations! I'm really excited to celebrate with you all. Thanks for... 
                    </p> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 0px; top: 0px;"> 
                    <h2>tina@live.com</h2> 
                    <h5>Re: Wedding Annoucement!</h5> 
                    <p> 
                        Huh! Waw!!! I'm really excited to celebrate with you all. Thanks for... 
                    </p> 
                </div> 
                <div class="brand"> 
                    <div class="badge">12</div> 
                    <img src="images/Mail128.png" class="icon"> 
                </div> 
            </div> 
 
 
 
        </div> 
    </div> 
</div> 
 
</body> 
</html>
效果展示:


Tile 状态之徽章:
一个徽章可以显示的是1-99的数字也可以是图形。徽章都是定位在Tile区块的右下角位置。 Metro UI CSS 支持Windows 8内置的主要徽章: activity, alert, available, away, busy, newMessage, paused, playing, unavailable, error and attention。默认徽章的背景色是蓝色,但我们也可以修改的。

Metro UI CSS 案例Demo
<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
    <!--metro UI css 样式文件(组件基础)--> 
    <link href="css/metro-bootstrap.css" rel="stylesheet"> 
    <link href="css/metro-bootstrap-responsive.css" rel="stylesheet"> 
    <!--metro UI css 样式文件(组件基础)--> 
    <link href="css/modern.css" rel="stylesheet"> 
    <link href="css/modern-responsive.css" rel="stylesheet"> 
 
    <!--加载jquery js 文件--> 
    <script src="js/jquery/jquery.min.js"></script> 
    <script src="js/jquery/jquery.widget.min.js"></script> 
    <!--加载metro js 文件--> 
    <script src="js/metro/metro.min.js"></script> 
    <!--加载第三方js 文件--> 
    <script src="js/modern/tile-slider.js"></script> 
    <title>Modern UI CSS 学习笔记</title> 
 
 
 
</head> 
<body class="modern-ui" style="background: #f1f1f1"> 
 
<div class="page"> 
    <div class="page-header"> 
        <div class="page-header-content"> 
            <h3>Metro UI CSS样式文件之 Tiles组件</h3> 
        </div> 
    </div> 
 
    <div class="page-region"> 
        <div class="page-region-content"> 
            <p>Tile 徽章</p> 
            <div class="clearfix"> 
                <div class="tile"> 
                    <div class="tile-status"> 
                        <div class="badge bg-color-blue">99</div> 
                    </div> 
                </div> 
                <div class="tile"> 
                    <div class="tile-status"> 
                        <div class="badge activity"></div> 
                    </div> 
                </div> 
                <div class="tile"> 
                    <div class="brand"> 
                        <div class="badge alert"></div> 
                    </div> 
                </div> 
                <div class="tile"> 
                    <div class="brand"> 
                        <div class="badge available"></div> 
                    </div> 
                </div> 
                <div class="tile"> 
                    <div class="brand"> 
                        <div class="badge away"></div> 
                    </div> 
                </div> 
                <div class="tile"> 
                    <div class="brand"> 
                        <div class="badge busy"></div> 
                    </div> 
                </div> 
                <div class="tile"> 
                    <div class="brand"> 
                        <div class="badge newMessage"></div> 
                    </div> 
                </div> 
                <div class="tile"> 
                    <div class="brand"> 
                        <div class="badge paused"></div> 
                    </div> 
                </div> 
                <div class="tile"> 
                    <div class="brand"> 
                        <div class="badge playing"></div> 
                    </div> 
                </div> 
                <div class="tile"> 
                    <div class="brand"> 
                        <div class="badge unavailable"></div> 
                    </div> 
                </div> 
                <div class="tile"> 
                    <div class="brand"> 
                        <div class="badge error"></div> 
                    </div> 
                </div> 
                <div class="tile"> 
                    <div class="brand"> 
                        <div class="badge attention"></div> 
                    </div> 
                </div> 
            </div> 
            <p>Tile状态</p> 
            <div class="grid"> 
                <div class="row"> 
 
                    <div class="span4"> 
                        <div class="tile double"> 
                            <div class="brand"> 
                                <div class="badge">10</div> 
                                <div class="name">Mail</div> 
                            </div> 
                        </div> 
                    </div> 
 
                    <div class="span4"> 
                        <div class="tile double bg-color-green"> 
                            <div class="brand"> 
                                <div class="badge">12</div> 
                                <img src="./images/Mail128.png" class="icon"> 
                            </div> 
                        </div> 
                    </div> 
 
                    <div class="span4"> 
                        <div class="tile double bg-color-pink"> 
                            <div class="brand"> 
                                <div class="name">Photos</div> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
            </div> 
            <p>Tiles 基本样式</p> 
 
            <div class="clearfix"> 
                <div class="tile"></div> 
                <div class="tile double"></div> 
                <div class="tile selected"></div> 
                <div class="tile bg-color-orange"></div> 
            </div> 
 
            <p>Tiles 内容</p> 
            <div class="clearfix"> 
                <div class="tile double bg-color-green"> 
                    <div class="tile-content"> 
                        <h2>mattberg@live.com</h2> 
                        <h5>Re: Wedding Annoucement!</h5> 
                        <p> 
                            Congratulations! I'm really excited to celebrate with you all. Thanks for... 
                        </p> 
                    </div> 
                    <div class="brand"> 
                        <div class="badge">12</div> 
                        <img src="images/Mail128.png" class="icon"> 
                    </div> 
                </div> 
                <div class="tile bg-color-red icon"> 
                    <b class="check"></b> 
                    <div class="tile-content"> 
                        <img src="images/Market128.png"> 
                    </div> 
                    <div class="brand"> 
                        <span class="name">Store</span> 
                        <span class="badge">6</span> 
                    </div> 
                </div> 
                <div class="tile double bg-color-blueDark"> 
                    <div class="tile-content"> 
                        <img class="place-right" src="images/michael.jpg"> 
                        <h4 style="margin-bottom: 5px;">michael_angiulo</h4> 
                        <p> 
                            I just saw Thor last night. It was awesome! I think you'd love it. 
                        </p><h5>RT @julie_green</h5> 
                        <p></p> 
                    </div> 
                    <div class="brand"> 
                        <span class="name">Tweet@rama</span> 
                    </div> 
                </div> 
            </div> 
 
            <p>Tiles内容内置的子类</p> 
            <div class="grid"> 
                <div class="row"> 
                    <div class="span2"> 
                        <h5>字类名<code>.icon</code></h5> 
                        <div class="tile icon"> 
                            <div class="tile-content"> 
                                <img src="images/armor.png"> 
                            </div> 
                        </div> 
                    </div> 
                    <div class="span4"> 
                        <h5>子类名<code>.image</code></h5> 
                        <div class="tile double image"> 
                            <div class="tile-content"> 
                                <img alt="" src="images/5.jpg"> 
                            </div> 
                        </div> 
                    </div> 
 
                    <div class="span4"> 
                        <h5>子类名<code>.image-set</code></h5> 
                        <div class="tile double image-set"> 
                            <div class="tile-content"> 
                                <img alt="" src="images/1.jpg"> 
                            </div> 
                            <div class="tile-content"> 
                                <img alt="" src="images/2.jpg"> 
                            </div> 
                            <div class="tile-content"> 
                                <img alt="" src="images/3.jpg"> 
                            </div> 
                            <div class="tile-content"> 
                                <img alt="" src="images/4.jpg"> 
                            </div> 
                            <div class="tile-content"> 
                                <img alt="" src="images/5.jpg"> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
            </div> 
 
 
            <p>Tile滑块插件</p> 
            <div data-role="tile-slider" class="tile double image-slider"> 
                <div class="tile-content" style="position: absolute; left: 0px; top: -57.7693px;"> 
                    <img alt="" src="images/1.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 0px; top: 92.2307px;"> 
                    <img alt="" src="images/2.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 0px; top: -150px;"> 
                    <img alt="" src="images/3.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 0px; top: -150px;"> 
                    <img alt="" src="images/4.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 0px; top: -150px;"> 
                    <img alt="" src="images/5.jpg"> 
                </div> 
            </div> 
 
            <div data-param-period="3000" data-param-direction="left" data-role="tile-slider" class="tile double image-slider"> 
                <div class="tile-content" style="position: absolute; left: -310px; top: 0px;"> 
                    <img alt="" src="images/1.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: -310px; top: 0px;"> 
                    <img alt="" src="images/2.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: -310px; top: 0px;"> 
                    <img alt="" src="images/3.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: -113.548px; top: 0px;"> 
                    <img alt="" src="images/4.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 196.452px; top: 0px;"> 
                    <img alt="" src="images/5.jpg"> 
                </div> 
            </div> 
 
            <div data-param-period="3000" data-param-direction="down" data-role="tile-slider" class="tile double image-slider"> 
                <div class="tile-content" style="position: absolute; left: 0px; top: 150px;"> 
                    <img alt="" src="images/1.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 0px; top: 150px;"> 
                    <img alt="" src="images/2.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 0px; top: 150px;"> 
                    <img alt="" src="images/3.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 0px; top: 47.4342px;"> 
                    <img alt="" src="images/4.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 0px; top: -102.566px;"> 
                    <img alt="" src="images/5.jpg"> 
                </div> 
            </div> 
 
            <div data-param-duration="3000" data-param-period="3000" data-param-direction="right" data-role="tile-slider" class="tile double image-slider"> 
                <div class="tile-content" style="position: absolute; left: 310px; top: 0px;"> 
                    <img alt="" src="images/1.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 310px; top: 0px;"> 
                    <img alt="" src="images/2.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 310px; top: 0px;"> 
                    <img alt="" src="images/3.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 0px; top: 0px;"> 
                    <img alt="" src="images/4.jpg"> 
                </div> 
                <div class="tile-content" style="position: absolute; left: -310px; top: 0px;"> 
                    <img alt="" src="images/5.jpg"> 
                </div> 
            </div> 
 
            <div data-param-period="3000" data-role="tile-slider" class="tile double bg-color-green"> 
                <div class="tile-content" style="position: absolute; left: 0px; top: 150px;"> 
                    <h2>mattberg@live.com</h2> 
                    <h5>Re: Wedding Annoucement!</h5> 
                    <p> 
                        Congratulations! I'm really excited to celebrate with you all. Thanks for... 
                    </p> 
                </div> 
                <div class="tile-content" style="position: absolute; left: 0px; top: 0px;"> 
                    <h2>tina@live.com</h2> 
                    <h5>Re: Wedding Annoucement!</h5> 
                    <p> 
                        Huh! Waw!!! I'm really excited to celebrate with you all. Thanks for... 
                    </p> 
                </div> 
                <div class="brand"> 
                    <div class="badge">12</div> 
                    <img src="images/Mail128.png" class="icon"> 
                </div> 
            </div> 
 
 
 
        </div> 
    </div> 
</div> 
 
</body> 
</html>

效果展示:

标签:CSS
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号