<!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.
没有合适的资源?快使用搜索试试~ 我知道了~
HTML+CSS+JS精品网页模板H57.rar
共76个文件
jpg:32个
png:24个
html:11个
0 下载量 72 浏览量
2024-05-08
22:09:45
上传
评论
收藏 2.54MB RAR 举报
温馨提示
HTML+CSS+JS精品网页模板,设置导航条、轮翻效果,鼠标滑动效果,自动弹窗,点击事件、链接等功能;适用于大学生期末大作业或公司网页的设计制作。响应式网页,可以根据不同的设备屏幕大小自动调整页面布局; 支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改; 支持包括IE、Firefox、Chrome、Safari主流浏览器浏览; 下载文件解压缩,用Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件打开,只需更改源代码中的文字和图片可直接使用。图片的命名和格式需要与原图片的名字和格式一致,其他的无需更改。如碰到HTML5+CSS+JS等专业技术问题,以及需要对应行业的模板等相关源码、模板、资料、教程等,随时联系博主咨询。 网页设计和制作、大学生网页课程设计、期末大作业、毕业设计、网页模板,网页成品源代码等,5000+套Web案例源码,主题涵盖各行各业,关注作者联系获取更多源码; 更多优质网页博文、网页模板移步查阅我的CSDN主页:angella.blog.csdn.net。
资源推荐
资源详情
资源评论
收起资源包目录
HTML+CSS+JS精品网页模板H57.rar (76个子文件)
HTML+CSS+JS精品网页模板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
共 76 条
- 1
资源评论
仙女网页制作
- 粉丝: 3966
- 资源: 173
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功