<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/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/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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<div id="bodypat">
<section id="container">
<div id="colorchanger">
<a href="?theme=blue" class="cblue cbox" title="Blue Theme"><span class="blue">Blue</span></a>
<a href="?theme=red" class="cred cbox" title="Red Theme"><span class="red">Red</span></a>
<a href="?theme=green" class="cgreen cbox" title="Green Theme"><span class="green">Green</span></a>
<a href="?theme=magenta" class="cmagenta cbox" title="Magenta Theme"><span class="magenta">Magenta</span></a>
<a href="?theme=purple" class="cpurple cbox" title="Purple Theme"><span class="purple">Purple</span></a>
<a href="?theme=teal" class="cteal cbox" title="Teal Theme"><span class="teal">Teal</span></a>
<a href="?theme=lime" class="clime cbox" title="Lime Theme"><span class="lime">Lime</span></a>
<a href="?theme=brown" class="cbrown cbox" title="Brown Theme"><span class="brown">Brown</span></a>
<a href="?theme=pink" class="cpink cbox" title="Pink Theme"><span class="pink">Pink</span></a>
<a href="?theme=mango" class="cmango cbox" title="Mango Theme"><span class="mango">Mango</span></a>
<h4>Theme Color Selector</h4>
</div>
<!-- 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 -->
<!-- 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/articles/article1_right.png" alt="Article 1" />
</div>
<div class="live-back">
<img class="live-img" src="images/articles/article1_left.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">
<div class="article-img">
<div class="flexslider postslide">
<ul class="slides">
<li>
<img class="tile-pre-img" src="images/articles/article1.png" alt="Article 1" />
</li>
<li>
<img class="tile-pre-img" src="images/articles/article1a.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 g
矩阵排列HTML网页模板是一款插画风格的HTML响应网站模板。_html网站模板_网页源码移动端前端_H5模板_自适应.rar （311个子文件） 
style.css 58KB style-blue.css 1KB style-purple.css 1KB style-teal.css 1KB style-brown.css 1KB style-pink.css 1KB style-lime.css 1KB style-red.css 1KB style-mango.css 1KB style-magenta.css 1KB style-green.css 1KB Thumbs.db 111KB Thumbs.db 14KB Thumbs.db 12KB Thumbs.db 11KB Thumbs.db 3KB
blank.gif 43B blank.gif 43B
index.html 27KB features-content.html 23KB singleblogpost-1.html 21KB portfoliotile-small.html 19KB singleportfolio.html 18KB portfoliotile-large.html 15KB portfoliotile-medium.html 15KB blogtile-large.html 15KB blogtile-medium.html 15KB bloglist.html 15KB portfoliolist.html 13KB features-columns.html 11KB aboutus.html 10KB contact.html 9KB features-main.html 8KB
contact.jpg 440KB contact.jpg 440KB background3.jpg 335KB background2.jpg 257KB background1.jpg 224KB p3.jpg 176KB p3.jpg 176KB background.jpg 175KB p2.jpg 169KB p2.jpg 169KB background4.jpg 162KB p5.jpg 153KB p5.jpg 153KB p1.jpg 145KB p1.jpg 145KB p4.jpg 140KB p4.jpg 140KB aboutus.jpg 84KB aboutus.jpg 84KB video1.jpg 52KB video1.jpg 52KB MetroJs.lt.js 60KB jquery.fancybox-1.3.4.js 28KB jquery.flexslider-min.js 16KB css3-mediaqueries.js 16KB jquery.easing.1.3.js 8KB javascript.js 8KB jquery.masonry.min.js 5KB hoverintent.js 4KB jquery.lavalamp-0.2.0.min.js 3KB organictabs.jquery.js 3KB
item6.png 286KB item6.png 286KB slideimg1.png 229KB contact.png 225KB article1a.png 224KB article1a.png 224KB tiles.png 222KB tiles.png 222KB item1_full.png 218KB item1_full.png 218KB slideimg3.png 195KB slideimg3.png 195KB article1.png 193KB article1.png 193KB item4.png 180KB item4.png 180KB responsive.png 173KB item8.png 171KB slideimg1.png 169KB item5.png 161KB item5.png 161KB item6_large.png 148KB item6_large.png 148KB article5_bl.png 144KB article5_bl.png 144KB customizability.png 136KB customizability.png 136KB article4_bl.png 131KB article4_bl.png 131KB item6_pl.png 129KB item6_pl.png 129KB featurescontent.png 129KB featurescontent.png 129KB article4_large.png 128KB article4_large.png 128KB responsive.png 118KB共 311 条
- 1
- 2
- 3
- 4
资源评论
dunming_6725413
- 粉丝: 20
- 资源: 6947
最新资源
- HTML5实现好看的骑马俱乐部网站源码.zip
- HTML5实现好看的企业邮箱业务网站模板.zip
- HTML5实现好看的汽车改装维修车行网站源码2.zip
- HTML5实现好看的汽车改装维修车行网站源码.zip
- HTML5实现好看的汽车经销商网页源码.zip
- HTML5实现好看的汽车清洗美容公司网站源码.zip
- HTML5实现好看的汽车清洗美容连锁网站源码.zip
- HTML5实现好看的汽车美容洗车店网站模板.zip
- HTML5实现好看的汽车运输公司网站源码.zip
- HTML5实现好看的汽车自驾游网站源码.zip
- HTML5实现好看的汽车修理厂网站源码.zip
- 电动汽车蒙特卡洛模拟一充二充三充，快充慢充蒙特卡洛模拟日充电功率 可自行修改日充电数量的比例，可自行修改快充慢充功率，所见即所得，生成功率预测曲线，功率需求上下限曲线，matlab程序有注释
- HTML5实现好看的浅色清爽美食网站源码.zip
- HTML5实现好看的潜水运动响应式网站源码.zip
- HTML5实现好看的汽车租赁平台网页模板.zip
- HTML5实现好看的清爽博客自媒体网站模板.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
