<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gbk" />
<meta name="author" content="www.frebsite.nl" />
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
<title>仿Ocean微官网触屏版html5响应式手机wap网站模板下载关于我们-懒人模板【http://www.lanrenmb.com/HTML5/】</title>
<link href="img/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/jquery.mmenu.all.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mmenu.min.all.js"></script>
<script type="text/javascript" src="js/jquery.flexslider.js"></script>
<script type="text/javascript" src="js/jquery.easy-pie-chart.js"></script>
<script type="text/javascript" src="js/o-script.js"></script>
</head>
<body class="o-page">
<div id="page">
<div id="header">
<a href="#menu"></a>
<span id="Logo" class="svg">
<img src="img/logo.svg" />
</span>
<a class="backBtn" href="javascript:history.back();"></a>
</div>
<div class="subHeader"><i class="i-about i-small"></i>Ocean/About</div>
<div id="content">
<div class="o-team">
<div class="o-team-person">
<img src="img/team/1-th.jpg" />
<h4>John Doe</h4>
<div class="h-line50"></div>
<p><span class="c-red">Lorem ipsum</span> is simply dummy text</p>
<div class="o-person-content">
<img src="img/team/1.jpg" />
<h4>John Doe</h4>
<p><span class="c-red">Lorem ipsum</span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<div class="socialMedia">
<a href="#" class="ico-facebook" title="facebook">facebook</a>
<a href="#" class="ico-twitter" title="twittertwitter">twitter</a>
<a href="#" class="ico-linkedin" title="linkedin">linkedin</a>
</div>
<h3 class="a-skills">Skills</h3>
<span class="chart green" data-percent="86">
<span class="percent">86</span>
<h3>HTML</h3>
</span>
<span class="chart orange" data-percent="56">
<span class="percent">56</span>
<h3>CSS</h3>
</span>
<span class="chart red" data-percent="36">
<span class="percent">36</span>
<h3>jQuery</h3>
</span>
</div>
</div>
<div class="o-team-person">
<img src="img/team/2-th.jpg" />
<h4>John Doe</h4>
<div class="h-line50"></div>
<p><span class="c-red">Lorem ipsum</span> is simply dummy text</p>
<div class="o-person-content">
<img src="img/team/2.jpg" />
<h4>John Doe</h4>
<p><span class="c-red">Lorem ipsum</span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<div class="socialMedia">
<a href="#" class="ico-facebook" title="facebook">facebook</a>
<a href="#" class="ico-twitter" title="twittertwitter">twitter</a>
<a href="#" class="ico-linkedin" title="linkedin">linkedin</a>
<a href="#" class="ico-gplus" title="gplus">gplus</a>
<a href="#" class="ico-youtube" title="youtube">youtube</a>
</div>
<h3 class="a-skills">Skills</h3>
<span class="chart green" data-percent="80">
<span class="percent">80</span>
<h3>HTML</h3>
</span>
<span class="chart orange" data-percent="85">
<span class="percent">85</span>
<h3>CSS</h3>
</span>
<span class="chart red" data-percent="52">
<span class="percent">52</span>
<h3>jQuery</h3>
</span>
</div>
</div>
<div class="o-team-person">
<img src="img/team/3-th.jpg" />
<h4>John Doe</h4>
<div class="h-line50"></div>
<p><span class="c-red">Lorem ipsum</span> is simply dummy text</p>
<div class="o-person-content">
<img src="img/team/3.jpg" />
<h4>John Doe</h4>
<p><span class="c-red">Lorem ipsum</span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<div class="socialMedia">
<a href="#" class="ico-facebook" title="facebook">facebook</a>
<a href="#" class="ico-twitter" title="twittertwitter">twitter</a>
<a href="#" class="ico-linkedin" title="linkedin">linkedin</a>
<a href="#" class="ico-gplus" title="gplus">gplus</a>
<a href="#" class="ico-youtube" title="youtube">youtube</a>
<a href="#" class="ico-tumblr" title="tumblr">tumblr</a>
<a href="#" class="ico-pinterest" title="pinterest">pinterest</a>
</div>
<h3 class="a-skills">Skills</h3>
<span class="chart green" data-percent="56">
<span class="percent">56</span>
<h3>HTML</h3>
</span>
<span class="chart orange" data-percent="40">
<span class="percent">40</span>
<h3>CSS</h3>
</span>
<span class="chart red" data-percent="65">
<span class="percent">65</span>
<h3>jQuery</h3>
</span>
</div>
</div>
</div>
<div id="o-person-details-pane">
<div class="o-person-details">
</div>
</div>
</div>
<div class="block">
Explore our site
</div>
<div class="exploreSiteFullPane">
<a href="index.html" class="explorePane">
<span class="i-pane i-blue">
<i class="i-home"></i>
</span>
<h4>Home</h4>
</a>
<a href="#" class="explorePane active middle">
<span class="i-pane i-blue">
<i class="i-about"></i>
</span>
<h4>About</h4>
</a>
<a href="blog.html" class="explorePane">
<span class="i-pane i-blue">
<i class="i-blog"></i>
</span>
<h4>Blog</h4>
</a>
<a href="gallery.html" class="explorePane">
<span class="i-pane i-blue">
<i class="i-gallery"></i>
</span>
<h4>Gallery</h4>
</a>
<a href="shortcodes.html" class="explorePane middle">
<span class="i-pane i-blue">
<i class="i-shortcodes"></i>
</span>
<h4>Shortcodes</h4>
</a>
<a href="contact.html" class="explorePane">
<span class="i-pane i-blue">
<i class="i-contact"></i>
</span>
<h4>Contact</h4>
</a>
</div>
<nav id="menu">
<ul>
<li>
<a href="index.html">
<i class="i-home i-small"></i>Home
</a>
</li>
<li class="Selected">
<a href="about.html">
<i class="i-about i-small"></i>About
</a>
</li>
<li>
<a href="blog.html">
<i class="i-blog i-small"></i>Blog
</a>
<ul>
<li><a href="blog-single-post.html">First Post</a></li>
<li>
<a href="blog-single-post.html">Second Post</a>
</li>
</ul>
</li>
<li>
<a href="gallery.html">
<i class="i-gallery i-small"></i>Gallery
</a>
</li>
<li>
<a href="shortcodes.html">
<i class="i-shortcodes i-small"></i>Shortcodes
</a>
</li>
<li>
<a href="contact.html">
<i class="i-contact i-small"></i>Contact
</a>
</li>
</ul>
</nav>
</div>
</body>
</html>
基于HTML实现的仿Ocean微官网触屏版html5响应式手机wap网站模板下载(css+html+js+图样).zip （54个子文件） 
QQͼƬ20140429232725.png 194KB QQͼƬ20140429232721.png 177KB
js 
jquery.flexslider.js 51KB o-script.js 3KB jquery.easy-pie-chart.js 6KB jquery.mmenu.min.all.js 23KB photoswipe code.photoswipe.jquery-3.0.4.min.js 75KB klass.min.js 1KB jquery.mobile-1.0rc2.min.js 78KB gmap3.min.js 28KB jquery.min.js 93KB QQͼƬ20140429232715.png 365KB
blog-single-post.html 5KB img team 
2-th.jpg 5KB 2.jpg 18KB 3-th.jpg 10KB 1.jpg 45KB 1-th.jpg 8KB 3.jpg 52KB
logo.svg 3KB gallery 2-th.jpg 8KB 3-th.jpg 9KB 4-th.jpg 10KB 1-th.jpg 8KB blog 2.jpg 63KB 1.jpg 30KB 3.jpg 64KB css style.css 16KB flexslider.css 5KB jquery.mmenu.all.css 41KB foundation.css 83KB photoswipe photoswipe.css 3KB photoswipe-icons_402x.png 5KB photoswipe-icons.png 3KB
photoswipe-loader.gif 3KB jquery.mobile-1.0rc2.min.css 48KB fonts flexslider-icon.woff 1KB flexslider-icon.eot 2KB icons.svg 31KB flexslider-icon.eot@ 2KB flexslider-icon.ttf 2KB flexslider-icon.svg 1KB phoneicon.svg 962B QQͼƬ20140429232749.png 108KB index.html 5KB contact.html 3KB about.html 8KB QQͼƬ20140429232746.png 248KB shortcodes.html 6KB blog.html 4KB QQͼƬ20140429232753.png 85KB QQͼƬ20140429232729.png 337KB QQͼƬ20140429232741.png 341KB gallery.html 5KB资源评论
