devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Metro UI CSS 学习笔记之Tiles组件_字体 sd tile

作者：很楠不爱3 | 2024-03-18 18:55:56

赞

踩

字体 sd tile

Tiles 组件简介：

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

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

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

Tiles 语法定义： 

  1.      <div class="tile"></div>
  2.     <div class="tile double"></div>
  3.     <div class="tile selected"></div>
  4.     <div class="tile bg-color-orange"></div>

Metro UI CSS 案例Demo

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  6.     <!--metro UI css 样式文件(组件基础)-->
  7.     <link href="css/metro-bootstrap.css" rel="stylesheet">
  8.     <link href="css/metro-bootstrap-responsive.css" rel="stylesheet">
  9.     <!--metro UI css 样式文件(组件基础)-->
  10.     <link href="css/modern.css" rel="stylesheet">
  11.     <link href="css/modern-responsive.css" rel="stylesheet">
  12.  
  13.     <!--加载jquery js 文件-->
  14.     <script src="js/jquery/jquery.min.js"></script>
  15.     <script src="js/jquery/jquery.widget.min.js"></script>
  16.     <!--加载metro js 文件-->
  17.     <script src="js/metro/metro.min.js"></script>
  18.  
  19.     <title>Modern UI CSS 学习笔记</title>
  20.  
  21.  
  22.  
  23. </head>
  24. <body class="modern-ui" style="background: #f1f1f1">
  25.  
  26. <div class="page">
  27.     <div class="page-header">
  28.         <div class="page-header-content">
  29.             <h3>Metro UI CSS样式文件之 Tiles组件</h3>
  30.         </div>
  31.     </div>
  32.  
  33.     <div class="page-region">
  34.         <div class="page-region-content">
  35.             <p>Tiles 基本样式</p>
  36.  
  37.             <div class="clearfix">
  38.                 <div class="tile"></div>
  39.                 <div class="tile double"></div>
  40.                 <div class="tile selected"></div>
  41.                 <div class="tile bg-color-orange"></div>
  42.             </div>
  43.  
  44.         </div>
  45.     </div>
  46. </div>
  47.  
  48. </body>
  49. </html>
效果展示：



Tile内容

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

Tile 语法定义： 

  1.    <div class="tile">
  2.         <div class="tile-content">
  3.             ...content here...
  4.         </div>
  5.     </div>

Metro UI CSS 案例Demo 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  6.     <!--metro UI css 样式文件(组件基础)-->
  7.     <link href="css/metro-bootstrap.css" rel="stylesheet">
  8.     <link href="css/metro-bootstrap-responsive.css" rel="stylesheet">
  9.     <!--metro UI css 样式文件(组件基础)-->
  10.     <link href="css/modern.css" rel="stylesheet">
  11.     <link href="css/modern-responsive.css" rel="stylesheet">
  12.  
  13.     <!--加载jquery js 文件-->
  14.     <script src="js/jquery/jquery.min.js"></script>
  15.     <script src="js/jquery/jquery.widget.min.js"></script>
  16.     <!--加载metro js 文件-->
  17.     <script src="js/metro/metro.min.js"></script>
  18.  
  19.     <title>Modern UI CSS 学习笔记</title>
  20.  
  21.  
  22.  
  23. </head>
  24. <body class="modern-ui" style="background: #f1f1f1">
  25.  
  26. <div class="page">
  27.     <div class="page-header">
  28.         <div class="page-header-content">
  29.             <h3>Metro UI CSS样式文件之 Tiles组件</h3>
  30.         </div>
  31.     </div>
  32.  
  33.     <div class="page-region">
  34.         <div class="page-region-content">
  35.             <p>Tiles 基本样式</p>
  36.  
  37.             <div class="clearfix">
  38.                 <div class="tile"></div>
  39.                 <div class="tile double"></div>
  40.                 <div class="tile selected"></div>
  41.                 <div class="tile bg-color-orange"></div>
  42.             </div>
  43.  
  44.             <p>Tiles 内容</p>
  45.             <div class="clearfix">
  46.                 <div class="tile double bg-color-green">
  47.                     <div class="tile-content">
  48.                         <h2>mattberg@live.com</h2>
  49.                         <h5>Re: Wedding Annoucement!</h5>
  50.                         <p>
  51.                             Congratulations! I'm really excited to celebrate with you all. Thanks for...
  52.                         </p>
  53.                     </div>
  54.                     <div class="brand">
  55.                         <div class="badge">12</div>
  56.                         <img src="images/Mail128.png" class="icon">
  57.                     </div>
  58.                 </div>
  59.                 <div class="tile bg-color-red icon">
  60.                     <b class="check"></b>
  61.                     <div class="tile-content">
  62.                         <img src="images/Market128.png">
  63.                     </div>
  64.                     <div class="brand">
  65.                         <span class="name">Store</span>
  66.                         <span class="badge">6</span>
  67.                     </div>
  68.                 </div>
  69.                 <div class="tile double bg-color-blueDark">
  70.                     <div class="tile-content">
  71.                         <img class="place-right" src="images/michael.jpg">
  72.                         <h4 style="margin-bottom: 5px;">michael_angiulo</h4>
  73.                         <p>
  74.                             I just saw Thor last night. It was awesome! I think you'd love it.
  75.                         </p><h5>RT @julie_green</h5>
  76.                         <p></p>
  77.                     </div>
  78.                     <div class="brand">
  79.                         <span class="name">Tweet@rama</span>
  80.                     </div>
  81.                 </div>
  82.             </div>
  83.  
  84.  
  85.  
  86.         </div>
  87.     </div>
  88. </div>
  89.  
  90. </body>
  91. </html>
效果展示：

Tiles内容内置的子类

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

Metro UI CSS 案例Demo 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  6.     <!--metro UI css 样式文件(组件基础)-->
  7.     <link href="css/metro-bootstrap.css" rel="stylesheet">
  8.     <link href="css/metro-bootstrap-responsive.css" rel="stylesheet">
  9.     <!--metro UI css 样式文件(组件基础)-->
  10.     <link href="css/modern.css" rel="stylesheet">
  11.     <link href="css/modern-responsive.css" rel="stylesheet">
  12.  
  13.     <!--加载jquery js 文件-->
  14.     <script src="js/jquery/jquery.min.js"></script>
  15.     <script src="js/jquery/jquery.widget.min.js"></script>
  16.     <!--加载metro js 文件-->
  17.     <script src="js/metro/metro.min.js"></script>
  18.  
  19.     <title>Modern UI CSS 学习笔记</title>
  20.  
  21.  
  22.  
  23. </head>
  24. <body class="modern-ui" style="background: #f1f1f1">
  25.  
  26. <div class="page">
  27.     <div class="page-header">
  28.         <div class="page-header-content">
  29.             <h3>Metro UI CSS样式文件之 Tiles组件</h3>
  30.         </div>
  31.     </div>
  32.  
  33.     <div class="page-region">
  34.         <div class="page-region-content">
  35.             <p>Tiles 基本样式</p>
  36.  
  37.             <div class="clearfix">
  38.                 <div class="tile"></div>
  39.                 <div class="tile double"></div>
  40.                 <div class="tile selected"></div>
  41.                 <div class="tile bg-color-orange"></div>
  42.             </div>
  43.  
  44.             <p>Tiles 内容</p>
  45.             <div class="clearfix">
  46.                 <div class="tile double bg-color-green">
  47.                     <div class="tile-content">
  48.                         <h2>mattberg@live.com</h2>
  49.                         <h5>Re: Wedding Annoucement!</h5>
  50.                         <p>
  51.                             Congratulations! I'm really excited to celebrate with you all. Thanks for...
  52.                         </p>
  53.                     </div>
  54.                     <div class="brand">
  55.                         <div class="badge">12</div>
  56.                         <img src="images/Mail128.png" class="icon">
  57.                     </div>
  58.                 </div>
  59.                 <div class="tile bg-color-red icon">
  60.                     <b class="check"></b>
  61.                     <div class="tile-content">
  62.                         <img src="images/Market128.png">
  63.                     </div>
  64.                     <div class="brand">
  65.                         <span class="name">Store</span>
  66.                         <span class="badge">6</span>
  67.                     </div>
  68.                 </div>
  69.                 <div class="tile double bg-color-blueDark">
  70.                     <div class="tile-content">
  71.                         <img class="place-right" src="images/michael.jpg">
  72.                         <h4 style="margin-bottom: 5px;">michael_angiulo</h4>
  73.                         <p>
  74.                             I just saw Thor last night. It was awesome! I think you'd love it.
  75.                         </p><h5>RT @julie_green</h5>
  76.                         <p></p>
  77.                     </div>
  78.                     <div class="brand">
  79.                         <span class="name">Tweet@rama</span>
  80.                     </div>
  81.                 </div>
  82.             </div>
  83.  
  84.             <p>Tiles内容内置的子类</p>
  85.             <div class="grid">
  86.                 <div class="row">
  87.                     <div class="span2">
  88.                         <h5>字类名<code>.icon</code></h5>
  89.                         <div class="tile icon">
  90.                             <div class="tile-content">
  91.                                 <img src="images/armor.png">
  92.                             </div>
  93.                         </div>
  94.                     </div>
  95.                     <div class="span4">
  96.                         <h5>子类名<code>.image</code></h5>
  97.                         <div class="tile double image">
  98.                             <div class="tile-content">
  99.                                 <img alt="" src="images/5.jpg">
  100.                             </div>
  101.                         </div>
  102.                     </div>
  103.  
  104.                     <div class="span4">
  105.                         <h5>子类名<code>.image-set</code></h5>
  106.                         <div class="tile double image-set">
  107.                             <div class="tile-content">
  108.                                 <img alt="" src="images/1.jpg">
  109.                             </div>
  110.                             <div class="tile-content">
  111.                                 <img alt="" src="images/2.jpg">
  112.                             </div>
  113.                             <div class="tile-content">
  114.                                 <img alt="" src="images/3.jpg">
  115.                             </div>
  116.                             <div class="tile-content">
  117.                                 <img alt="" src="images/4.jpg">
  118.                             </div>
  119.                             <div class="tile-content">
  120.                                 <img alt="" src="images/5.jpg">
  121.                             </div>
  122.                         </div>
  123.                     </div>
  124.                 </div>
  125.             </div>
  126.  
  127.         </div>
  128.     </div>
  129. </div>
  130.  
  131. </body>
  132. </html>
效果展示:



Tile滑块控件

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

Metro UI CSS 案例Demo

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  6.     <!--metro UI css 样式文件(组件基础)-->
  7.     <link href="css/metro-bootstrap.css" rel="stylesheet">
  8.     <link href="css/metro-bootstrap-responsive.css" rel="stylesheet">
  9.     <!--metro UI css 样式文件(组件基础)-->
  10.     <link href="css/modern.css" rel="stylesheet">
  11.     <link href="css/modern-responsive.css" rel="stylesheet">
  12.  
  13.     <!--加载jquery js 文件-->
  14.     <script src="js/jquery/jquery.min.js"></script>
  15.     <script src="js/jquery/jquery.widget.min.js"></script>
  16.     <!--加载metro js 文件-->
  17.     <script src="js/metro/metro.min.js"></script>
  18.     <!--加载第三方js 文件-->
  19.     <script src="js/modern/tile-slider.js"></script>
  20.     <title>Modern UI CSS 学习笔记</title>
  21.  
  22.  
  23.  
  24. </head>
  25. <body class="modern-ui" style="background: #f1f1f1">
  26.  
  27. <div class="page">
  28.     <div class="page-header">
  29.         <div class="page-header-content">
  30.             <h3>Metro UI CSS样式文件之 Tiles组件</h3>
  31.         </div>
  32.     </div>
  33.  
  34.     <div class="page-region">
  35.         <div class="page-region-content">
  36.             <p>Tiles 基本样式</p>
  37.  
  38.             <div class="clearfix">
  39.                 <div class="tile"></div>
  40.                 <div class="tile double"></div>
  41.                 <div class="tile selected"></div>
  42.                 <div class="tile bg-color-orange"></div>
  43.             </div>
  44.  
  45.             <p>Tiles 内容</p>
  46.             <div class="clearfix">
  47.                 <div class="tile double bg-color-green">
  48.                     <div class="tile-content">
  49.                         <h2>mattberg@live.com</h2>
  50.                         <h5>Re: Wedding Annoucement!</h5>
  51.                         <p>
  52.                             Congratulations! I'm really excited to celebrate with you all. Thanks for...
  53.                         </p>
  54.                     </div>
  55.                     <div class="brand">
  56.                         <div class="badge">12</div>
  57.                         <img src="images/Mail128.png" class="icon">
  58.                     </div>
  59.                 </div>
  60.                 <div class="tile bg-color-red icon">
  61.                     <b class="check"></b>
  62.                     <div class="tile-content">
  63.                         <img src="images/Market128.png">
  64.                     </div>
  65.                     <div class="brand">
  66.                         <span class="name">Store</span>
  67.                         <span class="badge">6</span>
  68.                     </div>
  69.                 </div>
  70.                 <div class="tile double bg-color-blueDark">
  71.                     <div class="tile-content">
  72.                         <img class="place-right" src="images/michael.jpg">
  73.                         <h4 style="margin-bottom: 5px;">michael_angiulo</h4>
  74.                         <p>
  75.                             I just saw Thor last night. It was awesome! I think you'd love it.
  76.                         </p><h5>RT @julie_green</h5>
  77.                         <p></p>
  78.                     </div>
  79.                     <div class="brand">
  80.                         <span class="name">Tweet@rama</span>
  81.                     </div>
  82.                 </div>
  83.             </div>
  84.  
  85.             <p>Tiles内容内置的子类</p>
  86.             <div class="grid">
  87.                 <div class="row">
  88.                     <div class="span2">
  89.                         <h5>字类名<code>.icon</code></h5>
  90.                         <div class="tile icon">
  91.                             <div class="tile-content">
  92.                                 <img src="images/armor.png">
  93.                             </div>
  94.                         </div>
  95.                     </div>
  96.                     <div class="span4">
  97.                         <h5>子类名<code>.image</code></h5>
  98.                         <div class="tile double image">
  99.                             <div class="tile-content">
  100.                                 <img alt="" src="images/5.jpg">
  101.                             </div>
  102.                         </div>
  103.                     </div>
  104.  
  105.                     <div class="span4">
  106.                         <h5>子类名<code>.image-set</code></h5>
  107.                         <div class="tile double image-set">
  108.                             <div class="tile-content">
  109.                                 <img alt="" src="images/1.jpg">
  110.                             </div>
  111.                             <div class="tile-content">
  112.                                 <img alt="" src="images/2.jpg">
  113.                             </div>
  114.                             <div class="tile-content">
  115.                                 <img alt="" src="images/3.jpg">
  116.                             </div>
  117.                             <div class="tile-content">
  118.                                 <img alt="" src="images/4.jpg">
  119.                             </div>
  120.                             <div class="tile-content">
  121.                                 <img alt="" src="images/5.jpg">
  122.                             </div>
  123.                         </div>
  124.                     </div>
  125.                 </div>
  126.             </div>
  127.  
  128.  
  129.             <p>Tile滑块插件</p>
  130.             <div data-role="tile-slider" class="tile double image-slider">
  131.                 <div class="tile-content" style="position: absolute; left: 0px; top: -57.7693px;">
  132.                     <img alt="" src="images/1.jpg">
  133.                 </div>
  134.                 <div class="tile-content" style="position: absolute; left: 0px; top: 92.2307px;">
  135.                     <img alt="" src="images/2.jpg">
  136.                 </div>
  137.                 <div class="tile-content" style="position: absolute; left: 0px; top: -150px;">
  138.                     <img alt="" src="images/3.jpg">
  139.                 </div>
  140.                 <div class="tile-content" style="position: absolute; left: 0px; top: -150px;">
  141.                     <img alt="" src="images/4.jpg">
  142.                 </div>
  143.                 <div class="tile-content" style="position: absolute; left: 0px; top: -150px;">
  144.                     <img alt="" src="images/5.jpg">
  145.                 </div>
  146.             </div>
  147.  
  148.             <div data-param-period="3000" data-param-direction="left" data-role="tile-slider" class="tile double image-slider">
  149.                 <div class="tile-content" style="position: absolute; left: -310px; top: 0px;">
  150.                     <img alt="" src="images/1.jpg">
  151.                 </div>
  152.                 <div class="tile-content" style="position: absolute; left: -310px; top: 0px;">
  153.                     <img alt="" src="images/2.jpg">
  154.                 </div>
  155.                 <div class="tile-content" style="position: absolute; left: -310px; top: 0px;">
  156.                     <img alt="" src="images/3.jpg">
  157.                 </div>
  158.                 <div class="tile-content" style="position: absolute; left: -113.548px; top: 0px;">
  159.                     <img alt="" src="images/4.jpg">
  160.                 </div>
  161.                 <div class="tile-content" style="position: absolute; left: 196.452px; top: 0px;">
  162.                     <img alt="" src="images/5.jpg">
  163.                 </div>
  164.             </div>
  165.  
  166.             <div data-param-period="3000" data-param-direction="down" data-role="tile-slider" class="tile double image-slider">
  167.                 <div class="tile-content" style="position: absolute; left: 0px; top: 150px;">
  168.                     <img alt="" src="images/1.jpg">
  169.                 </div>
  170.                 <div class="tile-content" style="position: absolute; left: 0px; top: 150px;">
  171.                     <img alt="" src="images/2.jpg">
  172.                 </div>
  173.                 <div class="tile-content" style="position: absolute; left: 0px; top: 150px;">
  174.                     <img alt="" src="images/3.jpg">
  175.                 </div>
  176.                 <div class="tile-content" style="position: absolute; left: 0px; top: 47.4342px;">
  177.                     <img alt="" src="images/4.jpg">
  178.                 </div>
  179.                 <div class="tile-content" style="position: absolute; left: 0px; top: -102.566px;">
  180.                     <img alt="" src="images/5.jpg">
  181.                 </div>
  182.             </div>
  183.  
  184.             <div data-param-duration="3000" data-param-period="3000" data-param-direction="right" data-role="tile-slider" class="tile double image-slider">
  185.                 <div class="tile-content" style="position: absolute; left: 310px; top: 0px;">
  186.                     <img alt="" src="images/1.jpg">
  187.                 </div>
  188.                 <div class="tile-content" style="position: absolute; left: 310px; top: 0px;">
  189.                     <img alt="" src="images/2.jpg">
  190.                 </div>
  191.                 <div class="tile-content" style="position: absolute; left: 310px; top: 0px;">
  192.                     <img alt="" src="images/3.jpg">
  193.                 </div>
  194.                 <div class="tile-content" style="position: absolute; left: 0px; top: 0px;">
  195.                     <img alt="" src="images/4.jpg">
  196.                 </div>
  197.                 <div class="tile-content" style="position: absolute; left: -310px; top: 0px;">
  198.                     <img alt="" src="images/5.jpg">
  199.                 </div>
  200.             </div>
  201.  
  202.             <div data-param-period="3000" data-role="tile-slider" class="tile double bg-color-green">
  203.                 <div class="tile-content" style="position: absolute; left: 0px; top: 150px;">
  204.                     <h2>mattberg@live.com</h2>
  205.                     <h5>Re: Wedding Annoucement!</h5>
  206.                     <p>
  207.                         Congratulations! I'm really excited to celebrate with you all. Thanks for...
  208.                     </p>
  209.                 </div>
  210.                 <div class="tile-content" style="position: absolute; left: 0px; top: 0px;">
  211.                     <h2>tina@live.com</h2>
  212.                     <h5>Re: Wedding Annoucement!</h5>
  213.                     <p>
  214.                         Huh! Waw!!! I'm really excited to celebrate with you all. Thanks for...
  215.                     </p>
  216.                 </div>
  217.                 <div class="brand">
  218.                     <div class="badge">12</div>
  219.                     <img src="images/Mail128.png" class="icon">
  220.                 </div>
  221.             </div>
  222.  
  223.         </div>
  224.     </div>
  225. </div>
  226.  
  227. </body>
  228. </html>

默认参数值:

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

效果展示：


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

Metro UI CSS 案例Demo 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  6.     <!--metro UI css 样式文件(组件基础)-->
  7.     <link href="css/metro-bootstrap.css" rel="stylesheet">
  8.     <link href="css/metro-bootstrap-responsive.css" rel="stylesheet">
  9.     <!--metro UI css 样式文件(组件基础)-->
  10.     <link href="css/modern.css" rel="stylesheet">
  11.     <link href="css/modern-responsive.css" rel="stylesheet">
  12.  
  13.     <!--加载jquery js 文件-->
  14.     <script src="js/jquery/jquery.min.js"></script>
  15.     <script src="js/jquery/jquery.widget.min.js"></script>
  16.     <!--加载metro js 文件-->
  17.     <script src="js/metro/metro.min.js"></script>
  18.     <!--加载第三方js 文件-->
  19.     <script src="js/modern/tile-slider.js"></script>
  20.     <title>Modern UI CSS 学习笔记</title>
  21.  
  22.  
  23.  
  24. </head>
  25. <body class="modern-ui" style="background: #f1f1f1">
  26.  
  27. <div class="page">
  28.     <div class="page-header">
  29.         <div class="page-header-content">
  30.             <h3>Metro UI CSS样式文件之 Tiles组件</h3>
  31.         </div>
  32.     </div>
  33.  
  34.     <div class="page-region">
  35.         <div class="page-region-content">
  36.             <p>Tile状态</p>
  37.             <div class="grid">
  38.                 <div class="row">
  39.  
  40.                     <div class="span4">
  41.                         <div class="tile double">
  42.                             <div class="brand">
  43.                                 <div class="badge">10</div>
  44.                                 <div class="name">Mail</div>
  45.                             </div>
  46.                         </div>
  47.                     </div>
  48.  
  49.                     <div class="span4">
  50.                         <div class="tile double bg-color-green">
  51.                             <div class="brand">
  52.                                 <div class="badge">12</div>
  53.                                 <img src="./images/Mail128.png" class="icon">
  54.                             </div>
  55.                         </div>
  56.                     </div>
  57.  
  58.                     <div class="span4">
  59.                         <div class="tile double bg-color-pink">
  60.                             <div class="brand">
  61.                                 <div class="name">Photos</div>
  62.                             </div>
  63.                         </div>
  64.                     </div>
  65.                 </div>
  66.             </div>
  67.             <p>Tiles 基本样式</p>
  68.  
  69.             <div class="clearfix">
  70.                 <div class="tile"></div>
  71.                 <div class="tile double"></div>
  72.                 <div class="tile selected"></div>
  73.                 <div class="tile bg-color-orange"></div>
  74.             </div>
  75.  
  76.             <p>Tiles 内容</p>
  77.             <div class="clearfix">
  78.                 <div class="tile double bg-color-green">
  79.                     <div class="tile-content">
  80.                         <h2>mattberg@live.com</h2>
  81.                         <h5>Re: Wedding Annoucement!</h5>
  82.                         <p>
  83.                             Congratulations! I'm really excited to celebrate with you all. Thanks for...
  84.                         </p>
  85.                     </div>
  86.                     <div class="brand">
  87.                         <div class="badge">12</div>
  88.                         <img src="images/Mail128.png" class="icon">
  89.                     </div>
  90.                 </div>
  91.                 <div class="tile bg-color-red icon">
  92.                     <b class="check"></b>
  93.                     <div class="tile-content">
  94.                         <img src="images/Market128.png">
  95.                     </div>
  96.                     <div class="brand">
  97.                         <span class="name">Store</span>
  98.                         <span class="badge">6</span>
  99.                     </div>
  100.                 </div>
  101.                 <div class="tile double bg-color-blueDark">
  102.                     <div class="tile-content">
  103.                         <img class="place-right" src="images/michael.jpg">
  104.                         <h4 style="margin-bottom: 5px;">michael_angiulo</h4>
  105.                         <p>
  106.                             I just saw Thor last night. It was awesome! I think you'd love it.
  107.                         </p><h5>RT @julie_green</h5>
  108.                         <p></p>
  109.                     </div>
  110.                     <div class="brand">
  111.                         <span class="name">Tweet@rama</span>
  112.                     </div>
  113.                 </div>
  114.             </div>
  115.  
  116.             <p>Tiles内容内置的子类</p>
  117.             <div class="grid">
  118.                 <div class="row">
  119.                     <div class="span2">
  120.                         <h5>字类名<code>.icon</code></h5>
  121.                         <div class="tile icon">
  122.                             <div class="tile-content">
  123.                                 <img src="images/armor.png">
  124.                             </div>
  125.                         </div>
  126.                     </div>
  127.                     <div class="span4">
  128.                         <h5>子类名<code>.image</code></h5>
  129.                         <div class="tile double image">
  130.                             <div class="tile-content">
  131.                                 <img alt="" src="images/5.jpg">
  132.                             </div>
  133.                         </div>
  134.                     </div>
  135.  
  136.                     <div class="span4">
  137.                         <h5>子类名<code>.image-set</code></h5>
  138.                         <div class="tile double image-set">
  139.                             <div class="tile-content">
  140.                                 <img alt="" src="images/1.jpg">
  141.                             </div>
  142.                             <div class="tile-content">
  143.                                 <img alt="" src="images/2.jpg">
  144.                             </div>
  145.                             <div class="tile-content">
  146.                                 <img alt="" src="images/3.jpg">
  147.                             </div>
  148.                             <div class="tile-content">
  149.                                 <img alt="" src="images/4.jpg">
  150.                             </div>
  151.                             <div class="tile-content">
  152.                                 <img alt="" src="images/5.jpg">
  153.                             </div>
  154.                         </div>
  155.                     </div>
  156.                 </div>
  157.             </div>
  158.  
  159.  
  160.             <p>Tile滑块插件</p>
  161.             <div data-role="tile-slider" class="tile double image-slider">
  162.                 <div class="tile-content" style="position: absolute; left: 0px; top: -57.7693px;">
  163.                     <img alt="" src="images/1.jpg">
  164.                 </div>
  165.                 <div class="tile-content" style="position: absolute; left: 0px; top: 92.2307px;">
  166.                     <img alt="" src="images/2.jpg">
  167.                 </div>
  168.                 <div class="tile-content" style="position: absolute; left: 0px; top: -150px;">
  169.                     <img alt="" src="images/3.jpg">
  170.                 </div>
  171.                 <div class="tile-content" style="position: absolute; left: 0px; top: -150px;">
  172.                     <img alt="" src="images/4.jpg">
  173.                 </div>
  174.                 <div class="tile-content" style="position: absolute; left: 0px; top: -150px;">
  175.                     <img alt="" src="images/5.jpg">
  176.                 </div>
  177.             </div>
  178.  
  179.             <div data-param-period="3000" data-param-direction="left" data-role="tile-slider" class="tile double image-slider">
  180.                 <div class="tile-content" style="position: absolute; left: -310px; top: 0px;">
  181.                     <img alt="" src="images/1.jpg">
  182.                 </div>
  183.                 <div class="tile-content" style="position: absolute; left: -310px; top: 0px;">
  184.                     <img alt="" src="images/2.jpg">
  185.                 </div>
  186.                 <div class="tile-content" style="position: absolute; left: -310px; top: 0px;">
  187.                     <img alt="" src="images/3.jpg">
  188.                 </div>
  189.                 <div class="tile-content" style="position: absolute; left: -113.548px; top: 0px;">
  190.                     <img alt="" src="images/4.jpg">
  191.                 </div>
  192.                 <div class="tile-content" style="position: absolute; left: 196.452px; top: 0px;">
  193.                     <img alt="" src="images/5.jpg">
  194.                 </div>
  195.             </div>
  196.  
  197.             <div data-param-period="3000" data-param-direction="down" data-role="tile-slider" class="tile double image-slider">
  198.                 <div class="tile-content" style="position: absolute; left: 0px; top: 150px;">
  199.                     <img alt="" src="images/1.jpg">
  200.                 </div>
  201.                 <div class="tile-content" style="position: absolute; left: 0px; top: 150px;">
  202.                     <img alt="" src="images/2.jpg">
  203.                 </div>
  204.                 <div class="tile-content" style="position: absolute; left: 0px; top: 150px;">
  205.                     <img alt="" src="images/3.jpg">
  206.                 </div>
  207.                 <div class="tile-content" style="position: absolute; left: 0px; top: 47.4342px;">
  208.                     <img alt="" src="images/4.jpg">
  209.                 </div>
  210.                 <div class="tile-content" style="position: absolute; left: 0px; top: -102.566px;">
  211.                     <img alt="" src="images/5.jpg">
  212.                 </div>
  213.             </div>
  214.  
  215.             <div data-param-duration="3000" data-param-period="3000" data-param-direction="right" data-role="tile-slider" class="tile double image-slider">
  216.                 <div class="tile-content" style="position: absolute; left: 310px; top: 0px;">
  217.                     <img alt="" src="images/1.jpg">
  218.                 </div>
  219.                 <div class="tile-content" style="position: absolute; left: 310px; top: 0px;">
  220.                     <img alt="" src="images/2.jpg">
  221.                 </div>
  222.                 <div class="tile-content" style="position: absolute; left: 310px; top: 0px;">
  223.                     <img alt="" src="images/3.jpg">
  224.                 </div>
  225.                 <div class="tile-content" style="position: absolute; left: 0px; top: 0px;">
  226.                     <img alt="" src="images/4.jpg">
  227.                 </div>
  228.                 <div class="tile-content" style="position: absolute; left: -310px; top: 0px;">
  229.                     <img alt="" src="images/5.jpg">
  230.                 </div>
  231.             </div>
  232.  
  233.             <div data-param-period="3000" data-role="tile-slider" class="tile double bg-color-green">
  234.                 <div class="tile-content" style="position: absolute; left: 0px; top: 150px;">
  235.                     <h2>mattberg@live.com</h2>
  236.                     <h5>Re: Wedding Annoucement!</h5>
  237.                     <p>
  238.                         Congratulations! I'm really excited to celebrate with you all. Thanks for...
  239.                     </p>
  240.                 </div>
  241.                 <div class="tile-content" style="position: absolute; left: 0px; top: 0px;">
  242.                     <h2>tina@live.com</h2>
  243.                     <h5>Re: Wedding Annoucement!</h5>
  244.                     <p>
  245.                         Huh! Waw!!! I'm really excited to celebrate with you all. Thanks for...
  246.                     </p>
  247.                 </div>
  248.                 <div class="brand">
  249.                     <div class="badge">12</div>
  250.                     <img src="images/Mail128.png" class="icon">
  251.                 </div>
  252.             </div>
  253.  
  254.  
  255.  
  256.         </div>
  257.     </div>
  258. </div>
  259.  
  260. </body>
  261. </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
 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  6.     <!--metro UI css 样式文件(组件基础)-->
  7.     <link href="css/metro-bootstrap.css" rel="stylesheet">
  8.     <link href="css/metro-bootstrap-responsive.css" rel="stylesheet">
  9.     <!--metro UI css 样式文件(组件基础)-->
  10.     <link href="css/modern.css" rel="stylesheet">
  11.     <link href="css/modern-responsive.css" rel="stylesheet">
  12.  
  13.     <!--加载jquery js 文件-->
  14.     <script src="js/jquery/jquery.min.js"></script>
  15.     <script src="js/jquery/jquery.widget.min.js"></script>
  16.     <!--加载metro js 文件-->
  17.     <script src="js/metro/metro.min.js"></script>
  18.     <!--加载第三方js 文件-->
  19.     <script src="js/modern/tile-slider.js"></script>
  20.     <title>Modern UI CSS 学习笔记</title>
  21.  
  22.  
  23.  
  24. </head>
  25. <body class="modern-ui" style="background: #f1f1f1">
  26.  
  27. <div class="page">
  28.     <div class="page-header">
  29.         <div class="page-header-content">
  30.             <h3>Metro UI CSS样式文件之 Tiles组件</h3>
  31.         </div>
  32.     </div>
  33.  
  34.     <div class="page-region">
  35.         <div class="page-region-content">
  36.             <p>Tile 徽章</p>
  37.             <div class="clearfix">
  38.                 <div class="tile">
  39.                     <div class="tile-status">
  40.                         <div class="badge bg-color-blue">99</div>
  41.                     </div>
  42.                 </div>
  43.                 <div class="tile">
  44.                     <div class="tile-status">
  45.                         <div class="badge activity"></div>
  46.                     </div>
  47.                 </div>
  48.                 <div class="tile">
  49.                     <div class="brand">
  50.                         <div class="badge alert"></div>
  51.                     </div>
  52.                 </div>
  53.                 <div class="tile">
  54.                     <div class="brand">
  55.                         <div class="badge available"></div>
  56.                     </div>
  57.                 </div>
  58.                 <div class="tile">
  59.                     <div class="brand">
  60.                         <div class="badge away"></div>
  61.                     </div>
  62.                 </div>
  63.                 <div class="tile">
  64.                     <div class="brand">
  65.                         <div class="badge busy"></div>
  66.                     </div>
  67.                 </div>
  68.                 <div class="tile">
  69.                     <div class="brand">
  70.                         <div class="badge newMessage"></div>
  71.                     </div>
  72.                 </div>
  73.                 <div class="tile">
  74.                     <div class="brand">
  75.                         <div class="badge paused"></div>
  76.                     </div>
  77.                 </div>
  78.                 <div class="tile">
  79.                     <div class="brand">
  80.                         <div class="badge playing"></div>
  81.                     </div>
  82.                 </div>
  83.                 <div class="tile">
  84.                     <div class="brand">
  85.                         <div class="badge unavailable"></div>
  86.                     </div>
  87.                 </div>
  88.                 <div class="tile">
  89.                     <div class="brand">
  90.                         <div class="badge error"></div>
  91.                     </div>
  92.                 </div>
  93.                 <div class="tile">
  94.                     <div class="brand">
  95.                         <div class="badge attention"></div>
  96.                     </div>
  97.                 </div>
  98.             </div>
  99.             <p>Tile状态</p>
  100.             <div class="grid">
  101.                 <div class="row">
  102.  
  103.                     <div class="span4">
  104.                         <div class="tile double">
  105.                             <div class="brand">
  106.                                 <div class="badge">10</div>
  107.                                 <div class="name">Mail</div>
  108.                             </div>
  109.                         </div>
  110.                     </div>
  111.  
  112.                     <div class="span4">
  113.                         <div class="tile double bg-color-green">
  114.                             <div class="brand">
  115.                                 <div class="badge">12</div>
  116.                                 <img src="./images/Mail128.png" class="icon">
  117.                             </div>
  118.                         </div>
  119.                     </div>
  120.  
  121.                     <div class="span4">
  122.                         <div class="tile double bg-color-pink">
  123.                             <div class="brand">
  124.                                 <div class="name">Photos</div>
  125.                             </div>
  126.                         </div>
  127.                     </div>
  128.                 </div>
  129.             </div>
  130.             <p>Tiles 基本样式</p>
  131.  
  132.             <div class="clearfix">
  133.                 <div class="tile"></div>
  134.                 <div class="tile double"></div>
  135.                 <div class="tile selected"></div>
  136.                 <div class="tile bg-color-orange"></div>
  137.             </div>
  138.  
  139.             <p>Tiles 内容</p>
  140.             <div class="clearfix">
  141.                 <div class="tile double bg-color-green">
  142.                     <div class="tile-content">
  143.                         <h2>mattberg@live.com</h2>
  144.                         <h5>Re: Wedding Annoucement!</h5>
  145.                         <p>
  146.                             Congratulations! I'm really excited to celebrate with you all. Thanks for...
  147.                         </p>
  148.                     </div>
  149.                     <div class="brand">
  150.                         <div class="badge">12</div>
  151.                         <img src="images/Mail128.png" class="icon">
  152.                     </div>
  153.                 </div>
  154.                 <div class="tile bg-color-red icon">
  155.                     <b class="check"></b>
  156.                     <div class="tile-content">
  157.                         <img src="images/Market128.png">
  158.                     </div>
  159.                     <div class="brand">
  160.                         <span class="name">Store</span>
  161.                         <span class="badge">6</span>
  162.                     </div>
  163.                 </div>
  164.                 <div class="tile double bg-color-blueDark">
  165.                     <div class="tile-content">
  166.                         <img class="place-right" src="images/michael.jpg">
  167.                         <h4 style="margin-bottom: 5px;">michael_angiulo</h4>
  168.                         <p>
  169.                             I just saw Thor last night. It was awesome! I think you'd love it.
  170.                         </p><h5>RT @julie_green</h5>
  171.                         <p></p>
  172.                     </div>
  173.                     <div class="brand">
  174.                         <span class="name">Tweet@rama</span>
  175.                     </div>
  176.                 </div>
  177.             </div>
  178.  
  179.             <p>Tiles内容内置的子类</p>
  180.             <div class="grid">
  181.                 <div class="row">
  182.                     <div class="span2">
  183.                         <h5>字类名<code>.icon</code></h5>
  184.                         <div class="tile icon">
  185.                             <div class="tile-content">
  186.                                 <img src="images/armor.png">
  187.                             </div>
  188.                         </div>
  189.                     </div>
  190.                     <div class="span4">
  191.                         <h5>子类名<code>.image</code></h5>
  192.                         <div class="tile double image">
  193.                             <div class="tile-content">
  194.                                 <img alt="" src="images/5.jpg">
  195.                             </div>
  196.                         </div>
  197.                     </div>
  198.  
  199.                     <div class="span4">
  200.                         <h5>子类名<code>.image-set</code></h5>
  201.                         <div class="tile double image-set">
  202.                             <div class="tile-content">
  203.                                 <img alt="" src="images/1.jpg">
  204.                             </div>
  205.                             <div class="tile-content">
  206.                                 <img alt="" src="images/2.jpg">
  207.                             </div>
  208.                             <div class="tile-content">
  209.                                 <img alt="" src="images/3.jpg">
  210.                             </div>
  211.                             <div class="tile-content">
  212.                                 <img alt="" src="images/4.jpg">
  213.                             </div>
  214.                             <div class="tile-content">
  215.                                 <img alt="" src="images/5.jpg">
  216.                             </div>
  217.                         </div>
  218.                     </div>
  219.                 </div>
  220.             </div>
  221.  
  222.  
  223.             <p>Tile滑块插件</p>
  224.             <div data-role="tile-slider" class="tile double image-slider">
  225.                 <div class="tile-content" style="position: absolute; left: 0px; top: -57.7693px;">
  226.                     <img alt="" src="images/1.jpg">
  227.                 </div>
  228.                 <div class="tile-content" style="position: absolute; left: 0px; top: 92.2307px;">
  229.                     <img alt="" src="images/2.jpg">
  230.                 </div>
  231.                 <div class="tile-content" style="position: absolute; left: 0px; top: -150px;">
  232.                     <img alt="" src="images/3.jpg">
  233.                 </div>
  234.                 <div class="tile-content" style="position: absolute; left: 0px; top: -150px;">
  235.                     <img alt="" src="images/4.jpg">
  236.                 </div>
  237.                 <div class="tile-content" style="position: absolute; left: 0px; top: -150px;">
  238.                     <img alt="" src="images/5.jpg">
  239.                 </div>
  240.             </div>
  241.  
  242.             <div data-param-period="3000" data-param-direction="left" data-role="tile-slider" class="tile double image-slider">
  243.                 <div class="tile-content" style="position: absolute; left: -310px; top: 0px;">
  244.                     <img alt="" src="images/1.jpg">
  245.                 </div>
  246.                 <div class="tile-content" style="position: absolute; left: -310px; top: 0px;">
  247.                     <img alt="" src="images/2.jpg">
  248.                 </div>
  249.                 <div class="tile-content" style="position: absolute; left: -310px; top: 0px;">
  250.                     <img alt="" src="images/3.jpg">
  251.                 </div>
  252.                 <div class="tile-content" style="position: absolute; left: -113.548px; top: 0px;">
  253.                     <img alt="" src="images/4.jpg">
  254.                 </div>
  255.                 <div class="tile-content" style="position: absolute; left: 196.452px; top: 0px;">
  256.                     <img alt="" src="images/5.jpg">
  257.                 </div>
  258.             </div>
  259.  
  260.             <div data-param-period="3000" data-param-direction="down" data-role="tile-slider" class="tile double image-slider">
  261.                 <div class="tile-content" style="position: absolute; left: 0px; top: 150px;">
  262.                     <img alt="" src="images/1.jpg">
  263.                 </div>
  264.                 <div class="tile-content" style="position: absolute; left: 0px; top: 150px;">
  265.                     <img alt="" src="images/2.jpg">
  266.                 </div>
  267.                 <div class="tile-content" style="position: absolute; left: 0px; top: 150px;">
  268.                     <img alt="" src="images/3.jpg">
  269.                 </div>
  270.                 <div class="tile-content" style="position: absolute; left: 0px; top: 47.4342px;">
  271.                     <img alt="" src="images/4.jpg">
  272.                 </div>
  273.                 <div class="tile-content" style="position: absolute; left: 0px; top: -102.566px;">
  274.                     <img alt="" src="images/5.jpg">
  275.                 </div>
  276.             </div>
  277.  
  278.             <div data-param-duration="3000" data-param-period="3000" data-param-direction="right" data-role="tile-slider" class="tile double image-slider">
  279.                 <div class="tile-content" style="position: absolute; left: 310px; top: 0px;">
  280.                     <img alt="" src="images/1.jpg">
  281.                 </div>
  282.                 <div class="tile-content" style="position: absolute; left: 310px; top: 0px;">
  283.                     <img alt="" src="images/2.jpg">
  284.                 </div>
  285.                 <div class="tile-content" style="position: absolute; left: 310px; top: 0px;">
  286.                     <img alt="" src="images/3.jpg">
  287.                 </div>
  288.                 <div class="tile-content" style="position: absolute; left: 0px; top: 0px;">
  289.                     <img alt="" src="images/4.jpg">
  290.                 </div>
  291.                 <div class="tile-content" style="position: absolute; left: -310px; top: 0px;">
  292.                     <img alt="" src="images/5.jpg">
  293.                 </div>
  294.             </div>
  295.  
  296.             <div data-param-period="3000" data-role="tile-slider" class="tile double bg-color-green">
  297.                 <div class="tile-content" style="position: absolute; left: 0px; top: 150px;">
  298.                     <h2>mattberg@live.com</h2>
  299.                     <h5>Re: Wedding Annoucement!</h5>
  300.                     <p>
  301.                         Congratulations! I'm really excited to celebrate with you all. Thanks for...
  302.                     </p>
  303.                 </div>
  304.                 <div class="tile-content" style="position: absolute; left: 0px; top: 0px;">
  305.                     <h2>tina@live.com</h2>
  306.                     <h5>Re: Wedding Annoucement!</h5>
  307.                     <p>
  308.                         Huh! Waw!!! I'm really excited to celebrate with you all. Thanks for...
  309.                     </p>
  310.                 </div>
  311.                 <div class="brand">
  312.                     <div class="badge">12</div>
  313.                     <img src="images/Mail128.png" class="icon">
  314.                 </div>
  315.             </div>
  316.  
  317.  
  318.  
  319.         </div>
  320.     </div>
  321. </div>
  322.  
  323. </body>
  324. </html>

效果展示:

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/265110
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号