<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js lt-ie10" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
<title>Klassio - Responsive Business/Portfolio Theme</title>
<!-- Included CSS Files -->
<link rel="stylesheet" href="stylesheets/foundation.css">
<link rel="stylesheet" href="stylesheets/app.css">
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
<script src="../../html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<header>
<div class="row">
<div id="logo">
<a href="index.html"><h1>Klassio</h1></a>
</div>
<ul id="social-networks">
<li><a href="#" class="dribble">Dribble</a></li>
<li><a href="#" class="facebook">Facebook</a></li>
<li><a href="#" class="twitter">Twitter</a></li>
<li><a href="#" class="flickr">Flickr</a></li>
</ul>
<div id="phone">Ph.: 123-012-0123</div>
<nav>
<ul id="primary-nav" class="sf-menu">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="features.html">Features</a>
<ul>
<li><a href="ui-elements.html">UI Elements</a></li>
<li><a href="typography.html">Grid & Typography</a></li>
<li><a href="features.html">Buttons, Tabs & Slider</a></li>
</ul>
</li>
<li><a href="portfolio.html">Portfolio</a>
<ul>
<li><a href="portfolio.html">Three Column Portfolio</a></li>
<li><a href="portfolio-4-column.html">Four Column Portfolio</a></li>
<li><a href="portfolio-single.html">Single Portfolio</a></li>
</ul>
</li>
<li><a href="blog.html">Blog</a>
<ul>
<li><a href="blog-single.html">Single Post</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
<!-- END .sf-menu navigation -->
<div class="clearfix"></div>
</nav>
<!-- END nav -->
</div>
<!-- END .row -->
</header><!-- END header -->
<div id="heading-wrapper" class="heading-image">
<div class="hs-loading"><span>Loading...</span></div>
<div class="hs-content row">
<h1 class="title"><span class="bgc">Layouts <small>with love.</small></span></h1>
<h2 class="title"><span class="bgc">The Grid & Typography</span></h2>
</div>
<img src="images/demo/15.jpg" alt="" class="bg"/>
</div>
<!-- END #heading-wrapper -->
<div id="content-wrapper" class="row">
<h3>Typography</h3>
<hr/>
<div class="row">
<div class="six columns">
<h1>Heading 1</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel neque lacus, vitae interdum metus. Vestibulum at nulla ac est fermentum.
</p>
<h2>Heading 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel neque lacus, vitae interdum metus. Vestibulum at nulla ac est fermentum.
</p>
<h3>Heading 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel neque lacus, vitae interdum metus. Vestibulum at nulla ac est fermentum.
</p>
<h4>Heading 4</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel neque lacus, vitae interdum metus. Vestibulum at nulla ac est fermentum.
</p>
<h5>Heading 5</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel neque lacus, vitae interdum metus. Vestibulum at nulla ac est fermentum.
</p>
<h6>Heading 6</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel neque lacus, vitae interdum metus.
</p>
<hr/>
</div>
<div class="six columns">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <img src="images/demo/thumb-7.jpg" alt="" width="150" class="left">Donec vel neque lacus, vitae interdum metus. Vestibulum at nulla ac est fermentum vehicula et id leo. Donec viverra quam eu metus auctor id bibendum erat interdum. Nam sit amet justo nisl, non feugiat erat. Suspendisse venenatis turpis nisl.
</p>
<p>
<img src="images/demo/thumb-3.jpg" alt="" width="130" class="right">Vestibulum blandit, ante consequat congue euismod, eros neque ullamcorper nibh, porttitor hendrerit leo leo eget enim. Vestibulum ac nisi quam, ac eleifend nulla. Integer sem massa, rutrum quis placerat in, feugiat eu diam. Phasellus tincidunt fermentum velit.
</p>
<br/>
<p>
Images or anything can be aligned using <strong>.left</strong> or <strong>.right</strong> classes.
</p>
<hr/>
<h3 class="subheader">Heading 3 with .subheader</h3>
<h4 class="subheader">Heading 4 with .subheader</h4>
<h5 class="subheader">Heading 5 with .subheader</h5>
<hr/>
</div>
</div>
<h3>The Grid</h3>
<h4 class="subheader">The Grid lets you quickly put together page layouts for mobile devices and the desktop. You don't need two different sites - the Grid is built to create a rock-solid experience on all kinds of devices with the exact same markup.</h4>
<hr/>
<h4>The Basics</h4>
<p>
The grid is built around three key elements: containers, rows, and columns. Containers create base padding for the page; rows create a max-width and contain the columns; and columns create the final structure. Everything on your page that you don't give a specific structural style to should be within a container, row and column.
</p>
<p>
What you need to know is that <strong>columns don't have a fixed width:</strong> they can vary based on the resolution of the screen, or the size of the window (try scaling down this window to see what we mean). Design with that in mind.
</p>
<script src="../../snipt.net/embed/3b3c66062f90d4cdf9d5e1f7b61c8ce8"></script>
<hr/>
<h4>Nesting Support</h4>
<p>
In the Grid you can nest columns down as far as you'd like. Just embed rows inside columns and go from there. Each embedded row can contain up to 12 columns.
</p>
<script src="../../snipt.net/embed/00599221b2f133b974b012dbe0ed001e"></script>
<hr/>
<h4>Examples</h4>
<p>
Take this page for example - we've set up this page by containing this section in eight columns, and the sidebar in four. When the screen is larger than iPad resolution you'll see them laid out normally - smaller than that and columns become 100% width objects for mobile devices.
</p>
<p>
Below you can see how the rows and columns come together. All columns are inside a row and for this we've colored the rows and columns for visibility. You can also see how nesting works - this example is inside an eight column container, but below we have all 12 columns to use. You can nest them down quite a ways before the percentage widths become absurdly small.
</p>
<div class="row">
<div class="six columns">
<h5>.six.columns</h5>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eros sapien, laoreet eget aliquam nec, egestas a eros. <hr/>
</div>
<div class="six columns">
<h5>.six.columns</h5>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eros sapien, laoreet eget aliquam nec, egestas a eros. <hr/>
</div>
</div>
<div class="row">
<div class="four columns">
<h5>.four.columns</h5>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eros sapien. <hr/>
</div>
<div class="four columns">
<h5>.four.
H57_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip （76个子文件） 
H57 stylesheets 
foundation.css 61KB app.css 18KB
portfolio.html 13KB default.htm 11KB portfolio-single.html 10KB features.html 25KB typography.html 28KB blog-single.html 16KB ui-elements.html 19KB index.html 11KB contact.html 7KB about.html 10KB images patterns 
bg2.png 5KB bg4.png 101KB bg1.png 40KB orbit slider-controls.png 455B misc custom-form-sprites.png 620B input-bg-outset.png 11KB modal-gloss.png 3KB input-bg.png 3KB logo.png 1KB demo 
thumb-11.jpg 26KB thumb-14.jpg 24KB 2.jpg 134KB big-4.jpg 40KB thumb-6.jpg 24KB thumb-8.jpg 23KB 13.jpg 116KB big-2.jpg 87KB 14.jpg 74KB 6.jpg 141KB 15.jpg 89KB 1.jpg 113KB big-3.jpg 44KB thumb-4.jpg 33KB thumb-3.jpg 21KB comment-2.jpg 918B big-1.jpg 70KB thumb-2.jpg 21KB thumb-1.jpg 33KB comment-1.jpg 420B thumb-5.jpg 28KB thumb-12.jpg 21KB big-5.jpg 29KB thumb-15.jpg 17KB thumb-7.jpg 39KB 3.jpg 130KB 7.jpg 336KB thumb-10.jpg 23KB 9.jpg 256KB comment-3.jpg 1KB 4.jpg 283KB thumb-9.jpg 32KB social lastfm.png 3KB myspace.png 3KB vimeo.png 3KB tumblr.png 3KB delicious.png 3KB flickr.png 3KB forrst.png 3KB stumbleupon.png 3KB RSS.png 3KB twitter.png 3KB technorati.png 3KB facebook.png 3KB linkedin.png 3KB digg.png 3KB dribble.png 3KB javascripts app.js 7KB jquery.min.js 92KB foundation.js 22KB modernizr.foundation.js 6KB plugins.js 20KB bgslider.jquery.js 8KB portfolio-4-column.html 11KB blog.html 20KB资源评论
