Metro UI CSS 学习笔记之Tiles组件
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"
效果展示:
.brand
or .tile-status
放在子容器之中。 Tile 状态也可以修改背景颜色,例如使用类名.bg-color-*
<!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>
效果展示:
<!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.作者投稿可能会经我们编辑修改或补充。