教育科技公司网站静态页面模板下载

代码部署教程

1. 引入CSS

<link href="styles/style.css" rel="stylesheet" type="text/css">
<link href="styles/framework.css" rel="stylesheet" type="text/css">
<link href="styles/owl.theme.css" rel="stylesheet" type="text/css">
<link href="styles/swipebox.css" rel="stylesheet" type="text/css">
<link href="styles/font-awesome.css" rel="stylesheet" type="text/css">
<link href="styles/animate.css" rel="stylesheet" type="text/css">

2. 引入JS

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jqueryui.js"></script>
<script type="text/javascript" src="scripts/framework.plugins.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>

3. HTML代码

<div id="ploader">
<div id="status">
<p class="center-text">
Loading the content…
<em>Loading depends on your connection speed!</em>
</p>
</div>
</div>
<div class="all-elements">
<div class="snap-drawers">
<!– Left Sidebar –>
<div class="snap-drawer snap-drawer-left">
<a href="index.html" class="selected-item"><i class="fa fa-home"></i>Home</a>
<a href="page-features.html"><i class="fa fa-cog"></i>Features</a>
<a href="page-media.html"><i class="fa fa-picture-o"></i>Media</a>
<a href="page-blog.html"><i class="fa fa-pencil"></i>Blog</a>
<a href="contact.html"><i class="fa fa-envelope-o"></i>Contact</a>
<a href="#"><i class="fa fa-facebook"></i>Like Us</a>
<a href="#"><i class="fa fa-twitter"></i>Follow Us</a>
<a href="#"><i class="fa fa-google-plus"></i>Follow us</a>
<a href="#" class="show-share-bottom"><i class="fa fa-retweet"></i>Share</a>
<a href="#" class="sidebar-close"><i class="fa fa-times"></i>Close</a>
</div>
</div>
<div class="header">
<a href="#" class="main-logo"></a>
<a href="#" class="open-menu"><i class="fa fa-navicon"></i></a>
<a href="contact.html" class="open-mail"><i class="fa fa-envelope-o"></i></a>
<a href="tel:+1 234 567 890" class="open-call"><i class="fa fa-phone"></i></a>
</div>
<a href="#" class="footer-ball"><i class="fa fa-navicon"></i></a>
<!– Page Content–>
<div id="content" class="snap-content">
<div class="slider-container full-bottom">
<div class="homepage-slider" data-snap-ignore="true">
<div>
<div class="overlay"></div>
<div class="homepage-slider-caption homepage-left-caption">
<h2>Swipe me!</h2>
<p>Hope you enjoy our latest item!</p>
</div>
<img src="images/pictures/3.jpg" class="responsive-image" alt="img">
</div>
<div>
<div class="overlay"></div>
<div class="homepage-slider-caption homepage-center-caption">
<h2>Slider</h2>
<p>Our slider is awesome!</p>
</div>
<img src="images/pictures/5.jpg" class="responsive-image" alt="img">
</div>
<div>
<div class="overlay"></div>
<div class="homepage-slider-caption homepage-right-caption">
<h2>Responsive</h2>
<p>And it’s fully responsive!</p>
</div>
<img src="images/pictures/6.jpg" class="responsive-image" alt="img">
</div>
</div>
</div>
<div class="content">
<div class="container no-bottom">
<h2>Welcome, stranger!</h2>
<p>
A user experience, design focused template, created to make using as easy and
as beautiful as possible even on huge screens!
</p>
</div>
<div class="decoration"></div>
<div class="content-heading full-bottom">
<h2>Services</h2>
<em>some awesome services we provide</em>
<i class="fa fa-cog"></i>
</div>
<div class="decoration"></div>
<div class="container no-bottom">
<!– Page Columns–>
<div class="one-half-responsive">
<p class="thumb-left no-bottom">
<img src="images/pictures/1s.jpg" alt="img">
<strong>Mobile app feel </strong>
<em><br>Lorem Ipsum is simply dummy text of the printing and typeset. </em>
</p>
<div class="thumb-clear"></div>
</div>
<div class="decoration hide-if-responsive"></div>
<div class="one-half-responsive last-column">
<p class="thumb-right no-bottom">
<img src="images/pictures/2s.jpg" alt="img">
<strong>Elite Quality Product</strong>
<em><br>Lorem Ipsum is simply dummy text of the printing and typeset. </em>
</p>
<div class="thumb-clear"></div>
</div>
<div class="decoration hide-if-responsive"></div>
<div class="one-half-responsive">
<p class="thumb-left no-bottom">
<img src="images/pictures/3s.jpg" alt="img">
<strong>Mobile and Tablet</strong>
<em><br>Lorem Ipsum is simply dummy text of the printing and typeset. </em>
</p>
<div class="thumb-clear"></div>
</div>
<div class="decoration hide-if-responsive"></div>
<div class="one-half-responsive last-column">
<p class="thumb-right no-bottom">
<img src="images/pictures/4s.jpg" alt="img">
<strong>Smooth transitions</strong>
<em><br>Lorem Ipsum is simply dummy text of the printing and typeset. </em>
</p>
<div class="thumb-clear"></div>
</div>
</div>
<div class="decoration"></div>
<div class="content-heading full-bottom">
<h2>Meet the Staff</h2>
<em>some awesome services we provide</em>
<i class="fa fa-user"></i>
</div>
<div class="decoration"></div>
<div class="container">
<a href="#" class="next-staff"></a>
<a href="#" class="pv-staff"></a>
<div class="staff-slider" data-snap-ignore="true">
<div>
<div class="staff-item">
<img src="images/pictures/1s.jpg" alt="img">
<h4>John Doe</h4>
<em>Web Designer</em>
<strong>We love quotes, and sometimes it’s annoying to see tons of them that you need to scroll to!</strong>
<a href="#" class="button button-red center-button">Call</a>
</div>
</div>
<div>
<div class="staff-item">
<img src="images/pictures/2s.jpg" alt="img">
<h4>Jane Hidden</h4>
<em>Front End Developer</em>
<strong>We love quotes, and sometimes it’s annoying to see tons of them that you need to scroll to!</strong>
<a href="#" class="button button-green center-button">Text</a>
</div>
</div>
<div>
<div class="staff-item">
<img src="images/pictures/3s.jpg" alt="img">
<h4>Johanna Pear</h4>
<em>Business Manager</em>
<strong>We love quotes, and sometimes it’s annoying to see tons of them that you need to scroll to!</strong>
<a href="#" class="button button-blue center-button">Mail</a>
</div>
</div>
<div>
<div class="staff-item">
<img src="images/pictures/4s.jpg" alt="img">
<h4>Mike Grape</h4>
<em>Web Designer</em>
<strong>We love quotes, and sometimes it’s annoying to see tons of them that you need to scroll to!</strong>
<a href="#" class="button button-dark center-button">Read More</a>
</div>
</div>
<div>
<div class="staff-item">
<img src="images/pictures/5s.jpg" alt="img">
<h4>Victor Leaf</h4>
<em>Front End Developer</em>
<strong>We love quotes, and sometimes it’s annoying to see tons of them that you need to scroll to!</strong>
<a href="#" class="button button-orange center-button">Facebook</a>
</div>
</div>
<div>
<div class="staff-item">
<img src="images/pictures/6s.jpg" alt="img">
<h4>Snow White</h4>
<em>Business Manager</em>
<strong>We love quotes, and sometimes it’s annoying to see tons of them that you need to scroll to!</strong>
<a href="#" class="button button-yellow center-button">Twitter</a>
</div>
</div>
</div>
</div>
<div class="decoration"></div>
<div class="copyrights">Collect from <a href="http://www.cxvn.com//" >免费模板</a></div>
<div class="content-heading full-bottom">
<h2>Featured Project</h2>
<em>some awesome services we provide</em>
<i class="fa fa-star"></i>
</div>
<div class="decoration"></div>
<div class="container">
<div class="one-half-responsive">
<img src="images/mobile1.png" alt="img" class="responsive-image">
</div>
<div class="one-half-responsive last-column">
<h2 class="center-if-mobile no-bottom">Awesome project title</h2>
<em class="center-if-mobile small-text half-bottom">Awesome project subtitle</em>
<p class="center-if-mobile no-bottom">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in quam mauris.
Nam condimentum convallis lectus, ac tempus massa eleifend sit amet. Ut nec orci
ut urna mollis elementum a et diam. Donec varius orci a convallis convallis.
</p>
</div>
</div>
<div class="decoration"></div>
<div class="content-heading full-bottom">
<h2>Customer Reviews</h2>
<em>some awesome services we provide</em>
<i class="fa fa-quote-right"></i>
</div>
<div class="decoration"></div>
<div class="quote-slider full-bottom" data-snap-ignore="true">
<div>
<h4>
Great all around product, with some of the best documentation I have ever seen. Really thorough and easy to follow!
Also the support responsiveness is really fantastic. Extremely happy with everything. Thanks again!
</h4>
<a href="#">ChrisPizzoDesign – ThemeForest</a>
</div>
<div>
<h4>
Exceptional theme. Completely customisable, the best customer service I’ve ever had from a theme/plugin. Not only are
they fast but polite and don’t make you feel like a doofus even when you are probably being one.
</h4>
<a href="#">larzick27 – ThemeForest</a>
</div>
<div>
<h4>
One of the best themes I’ve used so far and is very well documented, coded and very clean. Got it intergrated with
wordpss in less than an hour! But this is an amazing template built with a load of features!
</h4>
<a href="#">ramseycosay18 – ThemeForest</a>
</div>
</div>
<div class="decoration"></div>
<div class="content-heading full-bottom">
<h2>More Works</h2>
<em>some awesome services we provide</em>
<i class="fa fa-camera"></i>
</div>
<div class="decoration"></div>
<ul class="gallery square-thumb">
<li><a class="swipebox" href="images/pictures/1.jpg" title="An awesome gallery!"><img src="images/pictures/1s.jpg" alt="img" /></a></li>
<li><a class="swipebox" href="images/pictures/2.jpg" title="An awesome gallery!"><img src="images/pictures/2s.jpg" alt="img" /></a></li>
<li><a class="swipebox" href="images/pictures/3.jpg" title="An awesome gallery!"><img src="images/pictures/3s.jpg" alt="img" /></a></li>
<li><a class="swipebox" href="images/pictures/4.jpg" title="An awesome gallery!"><img src="images/pictures/4s.jpg" alt="img" /></a></li>
<li><a class="swipebox" href="images/pictures/5.jpg" title="An awesome gallery!"><img src="images/pictures/5s.jpg" alt="img" /></a></li>
<li><a class="swipebox" href="images/pictures/6.jpg" title="An awesome gallery!"><img src="images/pictures/6s.jpg" alt="img" /></a></li>
<li><a class="swipebox" href="images/pictures/7.jpg" title="An awesome gallery!"><img src="images/pictures/7s.jpg" alt="img" /></a></li>
<li><a class="swipebox" href="images/pictures/8.jpg" title="An awesome gallery!"><img src="images/pictures/8s.jpg" alt="img" /></a></li>
<li><a class="swipebox" href="images/pictures/1.jpg" title="An awesome gallery!"><img src="images/pictures/1s.jpg" alt="img" /></a></li>
<li><a class="swipebox" href="images/pictures/2.jpg" title="An awesome gallery!"><img src="images/pictures/2s.jpg" alt="img" /></a></li>
<li><a class="swipebox" href="images/pictures/3.jpg" title="An awesome gallery!"><img src="images/pictures/3s.jpg" alt="img" /></a></li>
<li><a class="swipebox" href="images/pictures/4.jpg" title="An awesome gallery!"><img src="images/pictures/4s.jpg" alt="img" /></a></li>
</ul>
<div class="decoration"></div>
</div>
<!– Page Footer–>
<div class="footer">
<p class="center-text">Copyright 2015. All rights reserved. More Templates <a href="http://www.cxvn.com//" target="_blank" title="模板之家">模板之家</a> – Collect from <a href="http://www.cxvn.com//" title="网页模板" target="_blank">网页模板</a>
</p>
<div class="footer-socials half-bottom">
<a href="#" class="footer-facebook"><i class="fa fa-facebook"></i></a>
<a href="#" class="footer-twitter"><i class="fa fa-twitter"></i></a>
<a href="#" class="footer-transparent"></a>
<a href="#" class="footer-share show-share-bottom"><i class="fa fa-share-alt"></i></a>
<a href="#" class="footer-up"><i class="fa fa-angle-up"></i></a>
</div>
</div>
</div>
<div class="share-bottom">
<h2>Share Page</h2>
<div class="share-socials-bottom">
<a href="">
<i class="fa fa-facebook facebook-color"></i>
Facebook
</a>
<a href="">
<i class="fa fa-twitter twitter-color"></i>
Twitter
</a>
<a href="">
<i class="fa fa-google-plus google-color"></i>
Google
</a>
<a href="">
<i class="fa fa-pinterest-p pinterest-color"></i>
Pinterest
</a>
<a href="sms:">
<i class="fa fa-comment-o sms-color"></i>
Text
</a>
<a href="">
<i class="fa fa-envelope-o mail-color"></i>
Email
</a>
</div>
<a href="#" class="close-share-bottom">Close</a>
</div>
</div>

下载地址

立即下载