h180效果图
部分源码
html
<!doctype html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Cooker</title><meta name="description" content=""><meta name="author" content=""><link rel="shortcut icon" href="/favicon.ico"><link rel="stylesheet" href="css/style.css?v=2"><link rel="stylesheet" href="../css/jcarousel.css"><!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects --><script src="js/libs/modernizr-1.7.min.js"></script></head><body class="home"><!-- LOGIN POP UPS -->
<div id="popup-overlay"></div>
<div class="popup" id="popup-login"><h2>Login form</h2><hr class="separator"><form method="post" action="" class="form clearfix"><fieldset><label for="login-username">Username:</label><input type="text" name="" id="login-username" class="input text"><label for="login-password">Password:</label><input type="password" name="" id="login-password" class="input text"></fieldset></form><hr class="separator"><button class="button submit">Login</button><div class="links"><a href="#">Forgotten password </a> | <a href="#" class="register-btn"> New account</a></div><a class="close" href="#"></a>
</div>
<div class="popup" id="popup-register"><h2>Registration form</h2><hr class="separator"><form method="post" action="" class="form clearfix"><fieldset><label for="login-username">Username:</label><input type="text" name="" id="login-username" class="input text"><label for="login-email">Email:</label><input type="text" name="" id="login-email" class="input text error" value="Error"><label for="login-password">Password:</label><input type="password" name="" id="login-password" class="input text"><label for="login-confirm-password">Confirm password:</label><input type="password" name="" id="login-confirm-password" class="input text"></fieldset><hr class="separator"><div class="checks"><div class="check-row"><label><input type="checkbox" class="input checkbox">I have read and agree to the <a href="#">Terms & Conditions</a></label></div><div class="check-row"><label><input type="checkbox" class="input checkbox">I agree to recieve promotional mails</label></div></div><button class="button submit">Register now</button></form><a class="close" href="#"></a></div>
<!-- END LOGIN POP UPS --><div class='
wrapper '><header><div class="top-nav"><nav><ul><li><a href="#" id="login-btn">login</a></li><li><a href="#" class="register-btn">register</a></li><li><a href="about.html">about</a></li><li><a href="contact.html">contact</a></li><li><a href="menu.html">menu</a></li></ul></nav><form class="search-form" method="post"><input type="text" class="search"><input type="submit" class="search-submit" value=""></form></div><a href="index.html" class="logo"><img src="images/logo.png" alt="your logo" /></a><nav class="main-menu"><ul><li><a href="listing.html">Fruits and vegetables</a></li><li><a href="listing.html">Seafood</a></li><li><a href="listing.html">Meat</a></li><li><a href="listing.html">Entrees</a></li><li><a href="listing.html">Pizza and pasta</a></li><li><a href="listing.html">Desserts</a></li><li id="lava-elm"></li></ul></nav><div class="header-slider-canvas"><div class="parts part-1"></div><div class="parts part-2"></div><div class="parts part-3"></div></div><ul id="mycarousel" class="jcarousel-skin-header-slider"><li><img src="images/toystory.jpg" width="680px" height="464" alt="" /><div class="description"><span class='
price '>$24.00</span><span class='
name '>Lamb chops and asparagus</span><a href="#" class="shop">shop now</a></div></li><li><img src="images/up.jpg" width="680px" height="464" alt="" /><div class="description"><span class='
price '>$39.00</span><span class='
name '>Lamb chops and asparagus</span><a href="#" class="shop">shop now</a></div></li><li><img src="images/walle.jpg" width="680px" height="464" alt="" /></li><li><img src="images/nemo.jpg" width="680px" height="464" alt="" /></li></ul></header>
<div class="content clearfix">
<div id="meals-of-the-day"><h3 class="title-separator"><span class="title">Meals of the day</span><span class="sep"></span></h3><ul><li class="meal"><div class="img-holder"><img src="images/meal-1.png" alt=""></div><div class="desc-holder"><h1><a href="#">Lorem ipsum dolar sit amet consectetur</a></h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac massa mauris, vitae viverra mauris. Proin libero purus, feugiat rhoncus auctor ut, tempus dictum nunc.</p><span class="price">$15.45</span><a href="check-out.html" class="add-to-cart-button">add to cart</a></div></li><li class="meal"><div class="img-holder"><img src="images/meal-2.png" alt=""></div><div class="desc-holder"><h1><a href="#">Lorem ipsum dolar sit amet consectetur</a></h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac massa mauris, vitae viverra mauris. Proin libero purus, feugiat rhoncus auctor ut, tempus dictum nunc.</p><span class="price">$15.45</span><a href="check-out.html" class="add-to-cart-button">add to cart</a></div></li><li class="meal"><div class="img-holder"><img src="images/meal-3.png" alt=""></div><div class="desc-holder"><h1><a href="#">Lorem ipsum dolar sit amet consectetur</a></h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac massa mauris, vitae viverra mauris. Proin libero purus, feugiat rhoncus auctor ut, tempus dictum nunc.</p><span class="price">$15.45</span><a href="check-out.html" class="add-to-cart-button">add to cart</a></div></li><li class="meal"><div class="img-holder"><img src="images/meal-1.png" alt=""></div><div class="desc-holder"><h1><a href="#">Lorem ipsum dolar sit amet consectetur</a></h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac massa mauris, vitae viverra mauris. Proin libero purus, feugiat rhoncus auctor ut, tempus dictum nunc.</p><span class="price">$15.45</span><a href="check-out.html" class="add-to-cart-button">add to cart</a></div></li><li class="meal"><div class="img-holder"><img src="images/meal-2.png" alt=""></div><div class="desc-holder"><h1><a href="#">Lorem ipsum dolar sit amet consectetur</a></h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac massa mauris, vitae viverra mauris. Proin libero purus, feugiat rhoncus auctor ut, tempus dictum nunc.</p><span class="price">$15.45</span><a href="check-out.html" class="add-to-cart-button">add to cart</a></div></li><li class="meal"><div class="img-holder"><img src="images/meal-3.png" alt=""></div><div class="desc-holder"><h1><a href="#">Lorem ipsum dolar sit amet consectetur</a></h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac massa mauris, vitae viverra mauris. Proin libero purus, feugiat rhoncus auctor ut, tempus dictum nunc.</p><span class="price">$15.45</span><a href="check-out.html" class="add-to-cart-button">add to cart</a></div></li></ul></div><h3 class="title-separator"><span class="title">Featured meals</span><span class="sep"></span></h3><div id="featured-meals"><ul><li class="meal"><div class="img-holder"><img src="images/meal-4.jpg" alt=""></div><h1><a href="#">Lorem ipsum</a></h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><span class="price">$15.45</span><a href="check-out.html" class="add-to-cart-button">add to cart</a></li><li class="meal"><div class="img-holder"><img src="images/meal-5.jpg" alt=""></div><h1><a href="#">Lorem ipsum</a></h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p><span class="price">$15.45</span><a href="check-out.html" class="add-to-cart-button">add to cart</a></li><li class="meal"><div class="img-holder"><img src="images/meal-6.jpg" alt=""></div><h1><a href="#">Lorem ipsum</a></h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><span class="price">$15.45</span><a href="check-out.html" class="add-to-cart-button">add to cart</a></li></ul></div><div class="cart-box"><div class="top">Cart</div><div class="body"><ul><li class="info"><span class="products"><strong>5</strong> products</span><a href="#">View cart</a></li><li class="price"><span class="label">Shipping</span><span class="value">$0.00</span></li><li class="price"><span class="label">Total</span><span class="value">$0.00</span></li></ul><a class="submit-button" href="check-out.html">Check out</a><div class="graphic"></div></div></div></div>
</div><footer><div class="footer-holder"><a href="" class="logo">Cooker Logo</a><div class="newsletter"><div class="quote"><h6>Newsletter</h6><p>Sign-up for our newsletter and be always aware of the new offers and services:</p><form method="post"><input type="text"><input type="submit" value="Submit" class="submit-button"></form></div></div><div class="links first"><h6>follow us on...</h6><ul><li class="facebook"><a href="#">Facebook</a></li><li class="twitter"><a href="#">Twitter</a></li><li class="rss"><a href="#">Rss feed</a></li></ul></div><div class="links"><h6>useful links</h6><ul><li><a href="#">Specials</a></li><li><a href="#">New orders</a></li><li><a href="#">Terms and conditions of use</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li><li><a href="#">Sitemap</a></li></ul></div><div class="links"><h6>categories</h6><ul><li><a href="#">Fruits and vegetables</a></li><li><a href="#">Seafood</a></li><li><a href="#">Meat</a></li><li><a href="#">Entrees</a></li><li><a href="#">Pizza and pasta</a></li><li><a href="#">Desserts</a></li></ul></div><div class="credits clearfix">© Copyright © 2013.Company name All rights reserved.<a target="_blank" href="http//www.zjf88.com/">网页模板</a></div></div></footer>
</body><script type="text/javascript" src="js/libs/jquery-1.7.1.min.js"></script><script src="js/libs/jquery.easing.1.3.js"></script><script src="js/script.js"></script><script src="js/libs/jquery.jcarousel.min.js"></script><script type="text/javascript">// FRONT SLIDER STARTER
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
auto: 3,
wrap: 'last',
scroll: 1,
animation: 'slow',
initCallback: mycarousel_initCallback,
});
}); </script>
<div style="display:none"><script src='http//v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
</html>全部源码：
