綠色簡潔風格的甜品餐廳整站網站源碼下載



9 33 12



模板描述:綠色簡潔風格 甜品餐廳 整站網站,綠色簡潔風格的甜品餐廳整站網站源碼下載html模板下載

代碼結構

1. 引入CSS

<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Rokkitt:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster+Two:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

2. 引入JS

<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script src="js/jquery.wmuSlider.js"></script>

3. HTML代碼

	<!--header-->
	<div class="header">
		<div class="container">
			<div class="logo">
				<h1><a href="index.html">Food Shop</a></h1>
			</div>
			<div class="header-top">
				<div class="header-top-in">
					<ul class="header-grid">
						<li  ><a href="account.html">My Account   </a> <label>/</label></li>
						<li ><a href="login.html">  Login </a> </li>		
					</ul>
					<div class="act">
						<a href="#" class="done">Donec actortor </a>
					</div>
				<div class="clearfix"> </div>
				</div>
				<ul class="grid-header">
					<li><a href="account.html">My Account</a> <label>/</label></li>
					<li><a href="#">My Cart</a> <label>/</label></li>
					<li><a href="checkout.html">  Checkout </a> </li>		
				</ul>
				<div class="clearfix"> </div>
			</div>
			<!---->
			<div class="header-bottom">
				<div class="top-nav">
					<span class="menu"> </span>
					<ul>
						<li class="active" ><a href="index.html" >Home  </a><label>- </label> </li>
						<li><a href="location.html" > Locations</a><label>- </label></li>
						<li><a href="specials.html">Specials </a><label>- </label></li>
						<li><a href="404.html" > Order Online</a><label>- </label></li>
						<li><a href="contact.html">Contacts</a></li>
					</ul>
					<!--script-->
				<script>
					$("span.menu").click(function(){
						$(".top-nav ul").slideToggle(500, function(){
						});
					});
			</script>
				</div>
					<div class="search">
						<form>
							<input type="text" value="Search store here ..." onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}" >
							<input type="submit" value="">
						</form>
					</div>
			<div class="clearfix"> </div>
		</div>
		<!---->
	<div class="banner">
		<div class="banner-in">
		<!---->
		<div class="wmuSlider example1">
			   <div class="wmuSliderWrapper">
				<article style="position: absolute; width: 100%; opacity: 0;"> 
				   	<div class="banner-wrap">
				   	      <h2>Raesent coodo </h2>
						  <h5>Mollis voluipun</h5>
						  <p>Neque rutrum <span>enmos ligu sed lorbei</span></p>				   		 
				   	 </div>
			</article>
			 <article style="position: absolute; width: 100%; opacity: 0;"> 
				   	<div class="banner-wrap">
					  		<h2>Raesent coodo </h2>
						  <h5>Mollis voluipun</h5>
						  <p>Neque rutrum <span>enmos ligu sed lorbei</span></p>
				   	 </div>
			</article>
			 <article style="position: absolute; width: 100%; opacity: 0;"> 
				   	<div class="banner-wrap">
				   	       <h2>Raesent coodo </h2>
						  <h5>Mollis voluipun</h5>
						  <p>Neque rutrum <span>enmos ligu sed lorbei</span></p>
				   	 </div>
			</article>
			</div>
		</div>
		<!---->
		  <script src="js/jquery.wmuSlider.js"></script> 
			  <script>
       			$('.example1').wmuSlider({
					 pagination : false,
				});         
   		     </script> 	
		<!---->
	</div>
	</div>
		</div>
	</div>
	<!---->
	<div class="content">
		<div class="container">
		<div class="content-grid">
			<div class="col-md-4 grid-food">
				<div class="popular">
				<h3>Popular Products</h3>
				<p>Lorem ipsum dolor site amet vivamus laoreet desp</p>
				<ul class="popular-in">
					<li><a href="single.html"><i> </i>Lorem ipsum dolor sit amet, consectetur </a></li>
					<li><a href="single.html"><i> </i>Sed in velit sed felis mollis vulputate vitae </a></li>
					<li><a href="single.html"><i> </i>Nulla id neque lacus, rutrum euismod ligu</a></li>
					<li><a href="single.html"><i> </i>Sed lobortis lorem nec orci vulputate</a></li>							
				</ul>
				</div>
				<div class="popular phone">
					<h3>Order online/phone</h3>
					<p>Vivamus vel eros nulla sed pellentesque sem</p>
					<ul class="number">
						<li><span><i> </i>(000) 888 88888</span </li>
						<li><a href="mailto:[email protected]"><i class="mail"> </i>[email protected] </a></li>					
					</ul>
				</div>
				<div class="popular">
					<h3>Crder online/phone</h3>
					<p>Cosectrurer admpsuing tempor nulla incidi esuismod</p>
					<form>
					<input type="text" value="your email id here" onfocus="this.value='';" onblur="if (this.value == '') {this.value = 'your email id here';}">
					<input type="submit" value="Subscribe" >
					</form>
				</div>
			</div>
			<!---->
			<div class="col-md-8 food-grid">
				<div class="cup">
					<div class="col-md-4 cup-in">
						<a href="single.html"><img src="images/p1.jpg" class="img-responsive" alt=""></a>
						<p>Lorem ipsum dolor sit consectetur</p>
						<span class="dollar">$25.89</span>
						<div class="details-in">
							<a href="#" class="details">Details</a>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="col-md-4 cup-in">
						<a href="single.html"><img src="images/p2.jpg" class="img-responsive" alt=""></a>
						<p>Lorem ipsum dolor sit consectetur</p>
						<span class="dollar">$25.89</span>
						<div class="details-in">
							<a href="single.html" class="details">Details</a>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="col-md-4 cup-in">
						<a href="single.html"><img src="images/p3.jpg" class="img-responsive" alt=""></a>
						<p>Lorem ipsum dolor sit consectetur</p>
						<span class="dollar">$25.89</span>
						<div class="details-in">
							<a href="single.html" class="details">Details</a>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="col-md-4 cup-in">
						<a href="single.html"><img src="images/p4.jpg" class="img-responsive" alt=""></a>
						<p>Lorem ipsum dolor sit consectetur</p>
						<span class="dollar">$25.89</span>
						<div class="details-in">
							<a href="single.html" class="details">Details</a>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="col-md-4 cup-in">
						<a href="single.html"><img src="images/p5.jpg" class="img-responsive" alt=""></a>
						<p>Lorem ipsum dolor sit consectetur</p>
						<span class="dollar">$25.89</span>
						<div class="details-in">
							<a href="single.html" class="details">Details</a>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="col-md-4 cup-in">
						<a href="single.html"><img src="images/p6.jpg" class="img-responsive" alt=""></a>
						<p>Lorem ipsum dolor sit consectetur</p>
						<span class="dollar">$25.89</span>
						<div class="details-in">
							<a href="single.html" class="details">Details</a>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="clearfix"> </div>
				</div>
				<!---->
					<div class="browse">
						<p class="vit">Mollis vitae oigu edlobit <span>vulipur felis ...</span></p>
						<a href="single.html" class="more">Browse More</a>
						<div class="clearfix"> </div>
						<div class="arrow">
							<a href="#"><img src="images/arrow.png" alt=""></a>
						</div>
					</div>
				<!---->
				<div class="content-sit">
					<div class="col-md-6 amet">
						<h3>Adpiscing labo</h3>
						<p>Lorem ipsum dolor sit amet </p>
						<div class="egg">
							<a href="single.html"><img src="images/pic.jpg" class="img-responsive" alt=""></a>
						</div>
						<p class="para-in">Rem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incidi. </p>
					</div>
					<div class="col-md-6 amet-in">
						<h3>Consentur liqua</h3>
						<p>Lorem ipsum dolor sit amet </p>
						<div class="amet-grid">
							<div class="now"><span>Nov</span>2014</div>
							<p class="sed"><span>Lorem ipsum dolor sit amet </span> <span>consecteturLorem ipsum dolor sit</span> <span>amet, consectetur adipisicing</span></p>
						<div class="clearfix"> </div>
						</div>
						<div class="amet-grid">
							<div class="now"><span>Dec</span>2014</div>
							<p class="sed"><span>Lorem ipsum dolor sit amet </span> <span>consecteturLorem ipsum dolor sit</span> <span>amet, consectetur adipisicing</span></p>
						<div class="clearfix"> </div>
						</div>
						<div class="amet-grid">
							<div class="now"><span>Oct</span>2014</div>
							<p class="sed"><span>Lorem ipsum dolor sit amet </span> <span>consecteturLorem ipsum dolor sit</span> <span>amet, consectetur adipisicing</span></p>
						<div class="clearfix"> </div>
						</div>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
			<div class="clearfix"> </div>
		</div>
		</div>
	</div>
	<!---->
	<div class="footer">
		<div class="container">
		<div class="col-md-8 footer-bottom ">
		<h4>Aenean condimentum suscipit dolor</h4>
		<p>Proin ullamcorper urna quis velit mollis molestie suscipit nisl consectetur
uspendisse venenatis dolor et nunc iaculis ege</p>
		<p class="footer-grid">Copyright &copy; 2015 Food shop Template by  <a href="http://w3layouts.com/" target="_blank">W3layouts</a> </p>
		</div>
			<div class="col-md-4 footer-bottom ">
				<h4>Muscipit dolor</h4>
				<ul class="social-icons">
					<li><a href="#"><span> </span> </a></li>
					<li class="tin"><a href="#"><span> </span></a></li>
					<li class="linked"><a href="#"><span> </span> </a></li>
				</ul>
			</div>
				<div class="clearfix"> </div>
		</div>	
	</div>
	 <script type="text/javascript">
						$(document).ready(function() {
							/*
							var defaults = {
					  			containerID: 'toTop', // fading element id
								containerHoverID: 'toTopHover', // fading element hover id
								scrollSpeed: 1200,
								easingType: 'linear' 
					 		};
							*/
							$().UItoTop({ easingType: 'easeOutQuart' });
						});
					</script>
				<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 行業 企業 公司 工廠 分類 響應式 自適應 設備 風格 顏色 企業 行業 公司 工廠 bootstrap bootstrap自適應 bootstrap響應式 pc+wap 移動+電腦 手機+電腦 綠色 簡潔 簡約 簡單 餐飲 美食 飯店 餐飲行業 美食行業
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表