灰色简洁风格企业网站静态页面模板

模板描述：灰色简洁风格 外卖 企业网站，灰色简洁风格的外卖企业网站模板html模板下载

代码部署教程

1. 引入CSS

<link rel=”stylesheet” href=”css/normalize.css”>
<link rel=”stylesheet” href=”css/foundation.min.css”>

<link rel=”stylesheet” href=”css/superfish.css”>

<link rel=”stylesheet” href=”css/stylesheet.css”>

<link rel=”stylesheet” href=”js/slider/flexslider.css”>

<link href=’http://fonts.useso.com/css?family=Roboto:400,100,300,500,700′ rel=’stylesheet’ type=’text/css’>

<link rel=”stylesheet” href=”css/ie-fixes.css”>

2. 引入JS

<script src=”js/vendor/custom.modernizr.js”></script>

<script src=”js/jquery.min.js”></script>

<script src=”js/hoverIntent.js”></script>

<script src=”js/superfish.js”></script>

<script src=”js/slider/jquery.flexslider-min.js”></script>

3. HTML代码

<div class=”row outterWrapper”>
<div class=”columns large-12″>

<div class=”row header-row”>

<div class=”columns header-inner large-12″>

<a href=”index.html”>

<img src=”images/logo.png” alt=””>

</a>

</div>

</div>

<div class=”row menu-row”>

<div class=”columns top-menu large-12 top-nav”>

<nav>

<section>

<ul class=”sf-menu”>

<li class=”active”>

<a href=”index.html”>

Home</a>

</li>

<li>

<a href=”about.html”>

About us</a>

</li>

<li>

<a href=”blog.html”>

Blog</a>

</li>

<li>

<a href=”gallery.html”>

Gallery</a>

</li>

<li class=”has-dropdown”>

<a href=”services.html”>

Services</a>

<ul class=”dropdown”>

<li class=”has-dropdown”>

<a href=”#”>

Dropdown Level 1a</a>

<ul class=”dropdown”>

<li>

<a href=”#”>

Dropdown Level 2a</a>

</li>

<li>

<a href=”#”>

Dropdown Level 2b</a>

</li>

</ul>

</li>

<li>

<a href=”#”>

Dropdown Level 1b</a>

</li>

<li>

<a href=”#”>

Dropdown Level 1c</a>

</li>

<li>

<a href=”#”>

Dropdown Level 1d</a>

</li>

<li>

<a href=”#”>

See all &rarr;</a>

</li>

</ul>

</li>

<li>

<a href=”testimonials.html”>

Testimonials</a>

</li>

<li>

<a href=”contact.html”>

Contact Us</a>

</li>

</ul>

</section>

</nav>

</div>

</div>

<div class=”row small-top-menu”>

<div class=”columns large-12 plr0 top-nav”>

<form name=”dropdown” action=”#”>

<nav>

<section>

<select name=”selected” id=”target” accesskey=”E” onChange=”goToNewPage(document.dropdown.selected)”>

<option value=”index.html”>

home</option>

<option value=”about.html”>

about us</option>

<option value=”blog.html”>

blog</option>

<option value=”gallery.html”>

gallery</option>

<option value=”services.html”>

services</option>

<option value=”contact.html”>

contact us</option>

<option value=”testimonials.html”>

testimonials</option>

</select>

</section>

</nav>

</form>

</div>

</div>

</div>

<div class=”columns large-12″>

<div class=”row flexslider-row”>

<div class=”columns large-12 flexslider-inner”>

<div class=”row”>

<div class=”columns large-6″>

<ul class=”slides”>

<li>

<img src=”images/slide.jpg” alt=””>

</li>

</ul>

</div>

<div class=”columns large-6 slider-text-box”>

<h2>

Professional and best features</h2>

<h4>

Get your business online psence</h4>

<p>

Amet sagittis aliquam non parturient magnis porttitor cum scelerisque magna in,turpis integer! Nunc, porta, ultricies aliquam turpis sociis in sociis mus.Amet sagittis aliquam non parturient magnis porttitor cum scelerisque magna in, turpis integer! Nunc, porta, ultricies aliquam tu sociis in velit sociis mus Amet sagittis aliquam non parturient magnis porttitor cum scelerisque magna in, turpis integer! Nunc, porta, ultricie aliquam turpis sociis in velit sociis mus </p>

<a class=”button callToAction”>

Take A Demo Tour</a>

</div>

</div>

</div>

</div>

<div class=”row feature-box-row”>

<div class=”columns large-12 feature-box-inner”>

<div class=”row”>

<div class=”columns large-4 small-4 feature-img pr20″>

<a href=”#”>

<img src=”images/fresh-parsley.jpg” alt=””>

</a>

<a href=”#”>

<h4>

Search engine optimization</h4>

</a>

<p>

Dis! Amet, aliquam ultricies ultricies in pellentesque est dictumst risus placerat nec, ac ac sed, ridiculus tincidunt, nec. </p>

<div class=”center”>

<a href=”#” class=”morebutton”>

read more</a>

</div>

</div>

<div class=”columns large-4 small-4 feature-img pr20″>

<a href=”#”>

<img src=”images/fresh-parsley.jpg” alt=””>

</a>

<a href=”#”>

<h4>

Search engine optimization</h4>

</a>

<p>

Dis! Amet, aliquam ultricies ultricies in pellentesque est dictumst risus placerat nec, ac ac sed, ridiculus tincidunt, nec. </p>

<div class=”center”>

<a href=”#” class=”morebutton”>

read more</a>

</div>

</div>

<div class=”columns large-4 small-4 feature-img”>

<a href=”#”>

<img src=”images/fresh-parsley.jpg” alt=””>

</a>

<a href=”#”>

<h4>

Search engine optimization</h4>

</a>

<p>

Dis! Amet, aliquam ultricies ultricies in pellentesque est dictumst risus placerat nec, ac ac sed, ridiculus tincidunt, nec. </p>

<div class=”center”>

<a href=”#” class=”morebutton”>

read more</a>

</div>

</div>

</div>

</div>

</div>

<div class=”row service-box-row”>

<div class=”columns large-12 service-box-inner”>

<div class=”row”>

<div class=”columns large-12 service-img pr20″>

<h2 class=”title”>

Checkout Our Services</h2>

<p>

Dis! Amet, aliquam ultricies ultricies in cras pellentesque est dictumst risus placerat est nec, ac ac sed, ridiculus tincidunt, nec. Lacus, risus aliquet lacus Dis! Amet, aliquam ultricies ultricies in cras pellentesque est dictumst risus placerat est nec, ac ac sed, ridiculus tincidunt, nec. Lacus, risus aliquet lacus Dis! Amet, aliquam ultricies ultricies in cras pellentesque est dictumst risus placerat est nec, ac ac sed, ridiculus tincidunt, nec. Lacus, risus aliquet lacus Dis! Amet, aliquam ultricies ultricies in cras pellentesque est dictumst risus placerat est nec, ac ac sed, ridiculus tincidunt, nec. Lacus, risus aliquet lacus </p>

</div>

</div>

<div class=”row”>

<div class=”columns large-4 feature-img pr20″>

<a href=”#”>

<h4>

Search engine optimization</h4>

</a>

<ul class=”bullet service-benefits-list”>

<li>

ed do eiusmod tempor incididunt ut doloremque</li>

<li>

At vero eos et accusamus et iusto laudantium</li>

<li>

Itaque earum rerum tenetu sapiente accusamus</li>

<li>

ed do eiusmod tempor incididunt ut do eiusmod</li>

<li>

At vero eos et accusamus et iusto accusamus</li>

<li>

Itaque earum rerum tenetu sapiente rerum vero</li>

</ul>

<a class=”button callToAction”>

Get Free Qoutation</a>

</div>

<div class=”columns large-4 feature-img pr20″>

<a href=”#”>

<h4>

Search engine optimization</h4>

</a>

<ul class=”bullet service-benefits-list”>

<li>

ed do eiusmod tempor incididunt ut doloremque</li>

<li>

At vero eos et accusamus et iusto laudantium</li>

<li>

Itaque earum rerum tenetu sapiente accusamus</li>

<li>

ed do eiusmod tempor incididunt ut do eiusmod</li>

<li>

At vero eos et accusamus et iusto accusamus</li>

<li>

Itaque earum rerum tenetu sapiente rerum vero</li>

</ul>

<a class=”button callToAction”>

Get Free Qoutation</a>

</div>

<div class=”columns large-4 feature-img”>

<a href=”#”>

<h4>

Search engine optimization</h4>

</a>

<ul class=”bullet service-benefits-list”>

<li>

ed do eiusmod tempor incididunt ut doloremque</li>

<li>

At vero eos et accusamus et iusto laudantium</li>

<li>

Itaque earum rerum tenetu sapiente accusamus</li>

<li>

ed do eiusmod tempor incididunt ut do eiusmod</li>

<li>

At vero eos et accusamus et iusto accusamus</li>

<li>

Itaque earum rerum tenetu sapiente rerum vero</li>

</ul>

<a class=”button callToAction”>

Get Free Qoutation</a>

</div>

</div>

</div>

</div>

</div>

<div class=”columns footer”>

<div class=”row”>

<div class=”columns large-12 footer-inner”>

<div class=”row”>

<div class=”columns large-3″>

<h4>

Subscribe To Our Newsletter</h4>

</div>

<div class=”columns large-9″>

<form action=”#” method=”post”>

<div class=”row”>

<div class=”columns large-4″>

<input type=”email” value=”” name=”EMAIL” class=”email” placeholder=”email address” required>

</div>

<div class=”columns large-4″>

<input type=”text” value=”” name=”name” class=”email” placeholder=”name” required>

</div>

<div class=”columns large-4″>

<input type=”submit” value=”Subscribe” name=”subscribe” class=”button”>

</div>

</div>

</form>

</div>

</div>

</div>

</div>

</div>

<div class=”columns footer-meta”>

<div class=”row”>

<div class=”columns large-12 footer-meta-inner”>

<div class=”row”>

<div class=”columns large-12″>

<span class=”email”>

email@domain.com</span>

<span class=”divider”>

|</span>

<span class=”tel”>

1800-726-192</span>

<span class=”divider”>

|</span>

<span class=”address”>

255, Willson Street, Caulfield, Melbourne</span>

</div>

</div>

<div class=”row”>

<div class=”columns large-12″>

Copyright &copy; 2015.Company name All rights reserved.<a target=”_blank” href=”http://www.cxvn.com//”>

www.freemoban.com</a>

</div>

</div>

<div class=”row”>

<div class=”columns large-12″>

<a href=”#” class=”media facebook”>

</a>

<a href=”#” class=”media twitter”>

</a>

<a href=”#” class=”media reddit”>

</a>

<a href=”#” class=”media youtube”>

</a>

</div>

</div>

</div>

</div>

</div>

</div>

<p>

<a class=”loader” href=”#inline_content”>

</a>

</p>

<script>

Modernizr.load({
test: Modernizr.placeholder,
nope: ‘js/placeholder.min.js’
});
function goToNewPage() {
if (document.getElementById(‘target’).value) {
window.location.href = document.getElementById(‘target’).value;
}
}
</script>

<script>

$(document).ready(function () {
$(‘ul.sf-menu’).superfish({
animation: {
height: ‘show’
},
delay: 400
});
$(function () {
$(‘input, textarea’).placeholder();
});
$(‘.flexslider’).flexslider();
});
</script>

下载地址

立即下载