<!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.
前端静态模板-响应式大气企业ui组件模板-学生作业毕设实训素材.zip
版权申诉
60 浏览量
2022-04-07
22:13:26
上传
评论
收藏 2.56MB ZIP 举报
前端静态模板-响应式大气企业ui组件模板-学生作业毕设实训素材.zip （80个子文件） 
响应式大气企业ui组件模板 images misc 
input-bg.png 3KB modal-gloss.png 3KB custom-form-sprites.png 620B input-bg-outset.png 11KB social tumblr.png 3KB linkedin.png 3KB RSS.png 3KB stumbleupon.png 3KB delicious.png 3KB dribble.png 3KB digg.png 3KB twitter.png 3KB facebook.png 3KB forrst.png 3KB flickr.png 3KB lastfm.png 3KB vimeo.png 3KB myspace.png 3KB technorati.png 3KB logo.png 1KB demo 
thumb-10.jpg 23KB 15.jpg 89KB 14.jpg 74KB 2.jpg 134KB 1.jpg 113KB 6.jpg 141KB thumb-9.jpg 32KB 3.jpg 130KB thumb-3.jpg 21KB thumb-14.jpg 24KB comment-3.jpg 1KB thumb-7.jpg 39KB big-2.jpg 87KB big-1.jpg 70KB 4.jpg 283KB thumb-12.jpg 21KB thumb-1.jpg 33KB big-3.jpg 44KB thumb-11.jpg 26KB thumb-2.jpg 21KB 13.jpg 116KB thumb-15.jpg 17KB big-5.jpg 29KB thumb-5.jpg 28KB 9.jpg 256KB comment-1.jpg 420B 7.jpg 336KB thumb-4.jpg 33KB big-4.jpg 40KB thumb-8.jpg 23KB thumb-6.jpg 24KB comment-2.jpg 918B patterns bg2.png 5KB bg4.png 101KB bg1.png 40KB orbit slider-controls.png 455B
contact -1.html 7KB typography.html 28KB javascripts 
jquery.min.js 92KB plugins.js 20KB modernizr.foundation.js 6KB foundation.js 22KB app.js 7KB bgslider.jquery.js 8KB default.htm 11KB index.html 11KB case.html 8KB features.html 25KB blog.html 20KB stylesheets app.css 18KB foundation-1.css 56KB app-1.css 1KB foundation.css 61KB portfolio.html 13KB portfolio-4-column.html 11KB blog-single.html 16KB portfolio-single.html 10KB about.html 10KB ui-elements.html 19KB contact.html 7KB资源评论
