<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>Matrix - Responsive Tile-Based Template</title>
<link href="style.css" title="style" rel="stylesheet" type="text/css" />
<link id="clink" href="css/style-blue.css" title="style" rel="stylesheet" type="text/css" media="screen"/>
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script src="scripts/jquery.masonry.min.js" type="text/javascript"></script>
<script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="scripts/MetroJs.lt.js" type="text/javascript"></script>
<script src="scripts/jquery.fancybox-1.3.4.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/jquery.flexslider-min.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/hoverintent.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/jquery.jplayer.min.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/organictabs.jquery.js" type="text/javascript" charset="utf-8"></script>
<!--[if lt IE 9]>
<style type="text/css">
@import url("style-ie8.css");
</style>
<script src="scripts/css3-mediaqueries.js" type="text/javascript" charset="utf-8"></script>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
document.createElement('hgroup');
</script>
<![endif]-->
<script src="scripts/javascript.js" type="text/javascript"></script>
<script src="scripts/mediaplayer.js" type="text/javascript"></script>
</head>
<body>
<div id="bodypat">
<section id="container">
<!-- BEGIN HEADER -->
<header class="clearfix">
<!-- BEGIN LOGO -->
<a id="headerlink" href="#" title="home"><img id="logo" src="images/logo.png" alt="logo"/><span id="sitename">Matrix</span></a>
<!-- END LOGO -->
<!-- BEGIN NAVIGATION -->
<nav>
<ul id="nav" class="clearfix">
<!-- Menu Item 1 -->
<li class="current"><a href="index.html" title="Home"><span>Home</span></a></li>
<!-- Menu Item 2 -->
<li>
<a href="#" title="Portfolio"><span>Portfolio</span></a>
<ul>
<li><a href="portfoliotile-large.html" title="Portfolio"><span>Tile - Large</span></a></li>
<li><a href="portfoliotile-medium.html" title="Portfolio"><span>Tile - Medium</span></a></li>
<li><a href="portfoliotile-small.html" title="Portfolio"><span>Tile - Small</span></a></li>
<li><a href="portfoliolist.html" title="Portfolio"><span>Portfolio List</span></a></li>
<li><a href="singleportfolio.html" title="Portfolio"><span>Single Item</span></a></li>
</ul>
</li>
<!-- Menu Item 3 -->
<li><a href="#" title="Blog"><span>Blog</span></a>
<ul>
<li><a href="blogtile-large.html" title="Blog"><span>Tile - Large</span></a></li>
<li><a href="blogtile-medium.html" title="Blog"><span>Tile - Medium</span></a></li>
<li><a href="bloglist.html" title="Blog List"><span>Blog List</span></a></li>
<li><a href="singleblogpost-1.html" title="Article 1"><span>Single Post</span></a></li>
</ul>
</li>
<!-- Menu Item 4 -->
<li>
<a href="#" title="Features"><span>Features</span></a>
<ul>
<li><a href="features-main.html" title="Features"><span>Main Features</span></a></li>
<li><a href="features-columns.html" title="Features"><span>Columns</span></a></li>
<li><a href="features-content.html" title="Features"><span>Content Area</span></a></li>
</ul>
</li>
<!-- Menu Item 5 -->
<li><a href="aboutus.html" title="About"><span>About</span></a></li>
<!-- Menu Item 6 -->
<li><a href="contact.html" title="Contact"><span>Contact</span></a></li>
</ul>
</nav>
<!-- END NAVIGATION -->
</header>
<!-- END HEADER -->
<!-- BEGIN MAIN PAGE CONTENT -->
<section class="mainpage">
<!-- BEGIN TOGGLE CONTENT -->
<div class="toggle-button"><span class="toggle-indicator">+</span></div>
<div class="toggle-content close">
<div class="flexslider mainslide">
<ul class="slides">
<li>
<img src="images/slideimg1.png" alt="Responsive" />
<p class="flex-title">Responsive</p>
</li>
<li>
<img src="images/slideimg2.png" alt="Tile Design" />
<p class="flex-title">Tile Design</p>
</li>
<li>
<img src="images/slideimg3.png" alt="Customizability" />
<p class="flex-title">Customizability</p>
</li>
</ul>
</div><!-- end .flexslider -->
<div class="quote-bg1"><div class="quote-w">Hello! This is a Metro UI-inspired template which brings a new web-browsing experience to the users. To further improve it, feedbacks are greatly welcomed!</div></div>
</div><!-- end .toggle-content -->
<!-- END TOGGLE CONTENT -->
</section><!-- end #mainpage -->
<div id="loader"></div><!-- loader image for AJAX -->
<section id="mainpage-mos">
<!-- BEGIN TILE CONTENT -->
<section id="content-mos" class="centered clearfix">
<!-- Tile 1 -->
<a href="#article-1" class="lightbox" rel="section">
<div class="tile large live" data-stops="0,25%,50%,75%,100%" data-speed="3000" data-delay="0" data-direction="horizontal" data-stack="true">
<div class="live-front">
<img class="live-img" src="images/placeholder/large_blank.png" alt="Article 1"/>
</div>
<div class="live-back">
<img class="live-img" src="images/placeholder/large_blank.png" alt="Article 1"/>
</div>
<span class="tile-date redtxt"><span class="date">09</span><span class="month">July</span></span>
<span class="tile-cat red">Illustration</span>
</div>
</a>
<!-- Lightbox Article Preview -->
<div class="tile-pre">
<article id="article-1" class="lb-article" data-lbcolor="#e61400">
<div class="article-img">
<div class="flexslider postslide">
<ul class="slides">
<li>
<img class="tile-pre-img" src="images/placeholder/blog_pre_blank.png" alt="Article 1" />
</li>
<li>
<img class="tile-pre-img" src="images/placeholder/blog_pre_blank.png" alt="Article 1" />
</li>
</ul>
</div>
</div>
<div class="article-date redtxt"><span class="date">09</span><span class="month">July</span></div>
<h1 class="lb-title"><a href="singleblogpost-1.html">This is the title of Article 1</a></h1>
<span class="postcat redtxt">Illustration</span>
<div class="lb-excerpt">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sagittis sollicitudin aliquet. Nullam ut sapien eros, aliquet gravida turpis. Cras nec risus magna. Morbi laoreet molestie odio sed ultrices. Maecenas eget elit orci. Etiam rhoncus urna vitae neque accumsan et vehicula dolor varius. Praesent tellus velit.</p>
<p><a class="exp-button" href="singleblogpost-1.html">Read More →</a></p>
</div>
</article>
</div>
<!-- Tile 2 -->
<a href="#article-2" class="lightbox" rel="section">
<div class="tile medium live" data-stops="0,75%,100%" data-speed="750" data-delay="1500">
<div class="live-front">
<img class="live-img" src="images/placeholder/medium_blank.png" alt="Article 2" />
</div>
<div class="live-back">
<img class="live-img" src="images/placeholder/medium_blank.png" alt="Article 2" />
</div>
<span class="tile-date limetxt"><span class="date">06</span><span class="mon
仿win8磁贴响应式图片展示html5模板_黑色 灰色 .rar （220个子文件） 
style.css 69KB style.css 69KB style-blue.css 1KB style-blue.css 1KB style-magenta.css 1KB style-green.css 1KB style-purple.css 1KB style-pink.css 1KB style-brown.css 1KB style-teal.css 1KB style-lime.css 1KB style-mango.css 1KB style-red.css 1KB style-magenta.css 1KB style-green.css 1KB style-purple.css 1KB style-pink.css 1KB style-brown.css 1KB style-teal.css 1KB style-lime.css 1KB style-mango.css 1KB style-red.css 1KB style-ie8.css 1KB style-ie8.css 1KB style-ie9.css 732B style-ie9.css 732B
loader.gif 13KB loader.gif 13KB blank.gif 43B blank.gif 43B
index.html 26KB index.html 26KB features-content.html 21KB features-content.html 21KB singleblogpost-1.html 19KB singleblogpost-1.html 19KB portfoliotile-small.html 18KB portfoliotile-small.html 18KB singleportfolio.html 17KB singleportfolio.html 17KB blogtile-medium.html 14KB blogtile-medium.html 14KB blogtile-large.html 14KB blogtile-large.html 14KB portfoliotile-medium.html 14KB portfoliotile-medium.html 14KB portfoliotile-large.html 14KB portfoliotile-large.html 14KB bloglist.html 14KB bloglist.html 14KB index2.html 13KB index2.html 13KB portfoliolist.html 12KB portfoliolist.html 12KB features-columns.html 10KB features-columns.html 10KB aboutus.html 9KB aboutus.html 9KB contact.html 8KB contact.html 8KB features-main.html 7KB features-main.html 7KB jquery.min.js 89KB jquery.min.js 89KB MetroJs.lt.js 61KB MetroJs.lt.js 61KB jquery.jplayer.min.js 43KB jquery.jplayer.min.js 43KB jquery.fancybox-1.3.4.js 29KB jquery.fancybox-1.3.4.js 29KB jquery.flexslider-min.js 16KB jquery.flexslider-min.js 16KB css3-mediaqueries.js 16KB css3-mediaqueries.js 16KB javascript.js 12KB javascript.js 12KB jquery.easing.1.3.js 8KB jquery.easing.1.3.js 8KB jquery.masonry.min.js 5KB jquery.masonry.min.js 5KB hoverintent.js 4KB hoverintent.js 4KB organictabs.jquery.js 3KB organictabs.jquery.js 3KB mediaplayer.js 580B mediaplayer.js 580B
tiles.png 222KB tiles.png 222KB slideimg3.png 195KB slideimg3.png 195KB customizability.png 136KB customizability.png 136KB responsive.png 118KB responsive.png 118KB slideimg1.png 96KB slideimg1.png 96KB slideimg2.png 66KB slideimg2.png 66KB social.png 18KB social.png 18KB共 220 条
- 1
- 2
- 3
资源评论
紫微前端
- 粉丝: 4490
- 资源: 871
最新资源
- 【年度调薪】年度薪酬预算执行情况报告.xls
- 【年度调薪】调薪考核表.xls
- 【年度调薪】调薪矩阵表(HR总监绝密).xls
- 【年度调薪】度员工调薪登记表.xlsx
- 【年度调薪】薪资等级结构表.xls
- 【年度调薪】调薪调岗流程表格.xls
- 【年度调薪】部门年度薪资调整套级审批表.xlsx
- 【年度调薪】调薪流程.xlsx
- 【年度调薪】年度员工调薪登记表.xlsx
- 【年度调薪】员工调薪评估.xlsx
- 【年度调薪】员工加薪明细表.xlsx
- 【年度调薪】员工调薪记录表.xlsx
- 【年度调薪】HR疑难操作之调岗调薪（实务篇）.doc
- 【年度调薪】工资评定调薪方案.doc
- 【年度调薪】年度调薪方案.doc
- 【年度调薪】调岗调薪操作技巧.doc
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
