Metro UI CSS 学习笔记之Tiles组件
虾米姐
阅读：574
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的内距。
<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.
<!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对像设置特定的参数，例如：direction, duration 和period，data-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>效果展示:
声明
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。
