响应式大气企业ui组件模板.zip资源-CSDN文库

共80个文件

jpg：32个

png：24个

html：13个

版权申诉

58 浏览量 2021-09-24 19:09:36 上传评论收藏 2.55MB ZIP 举报

资源详情

资源评论

资源推荐

收起资源包目录

响应式大气企业ui组件模板.zip （80个子文件）

default.htm 11KB

typography.html 28KB

portfolio.html 13KB

images

orbit

slider-controls.png 455B

demo

4.jpg 283KB

thumb-15.jpg 17KB

thumb-8.jpg 23KB

big-2.jpg 87KB

14.jpg 74KB

thumb-12.jpg 21KB

comment-3.jpg 1KB

big-1.jpg 70KB

thumb-6.jpg 24KB

thumb-7.jpg 39KB

comment-2.jpg 918B

thumb-4.jpg 33KB

thumb-5.jpg 28KB

15.jpg 89KB

13.jpg 116KB

comment-1.jpg 420B

thumb-2.jpg 21KB

big-4.jpg 40KB

3.jpg 130KB

thumb-11.jpg 26KB

thumb-9.jpg 32KB

6.jpg 141KB

thumb-10.jpg 23KB

1.jpg 113KB

7.jpg 336KB

9.jpg 256KB

big-3.jpg 44KB

thumb-1.jpg 33KB

thumb-3.jpg 21KB

big-5.jpg 29KB

thumb-14.jpg 24KB

2.jpg 134KB

logo.png 1KB

patterns

bg1.png 40KB

bg4.png 101KB

bg2.png 5KB

misc

modal-gloss.png 3KB

custom-form-sprites.png 620B

input-bg-outset.png 11KB

input-bg.png 3KB

social

twitter.png 3KB

RSS.png 3KB

delicious.png 3KB

digg.png 3KB

linkedin.png 3KB

facebook.png 3KB

lastfm.png 3KB

technorati.png 3KB

stumbleupon.png 3KB

tumblr.png 3KB

forrst.png 3KB

dribble.png 3KB

myspace.png 3KB

vimeo.png 3KB

flickr.png 3KB

blog.html 20KB

javascripts

app.js 7KB

bgslider.jquery.js 8KB

foundation.js 22KB

jquery.min.js 92KB

plugins.js 20KB

modernizr.foundation.js 6KB

contact.html 7KB

stylesheets

app-1.css 1KB

foundation.css 61KB

app.css 18KB

foundation-1.css 56KB

about.html 10KB

contact -1.html 7KB

index.html 11KB

case.html 8KB

portfolio-4-column.html 11KB

ui-elements.html 19KB

features.html 25KB

portfolio-single.html 10KB

blog-single.html 16KB

<!doctype html>      <html lang="en">  <head> <meta charset="utf-8" />  <meta name="viewport" content="width=device-width" /> <title>Klassio - Responsive Business/Portfolio Theme</title>  <link rel="stylesheet" href="stylesheets/foundation.css"> <link rel="stylesheet" href="stylesheets/app.css">   </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>  <div class="clearfix"></div> </nav>  </div>  </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>  <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.