紅色簡潔風格的茶飲品咖啡店整站網站源碼下載



7 27 10



模板描述:紅色簡潔風格 茶飲品咖啡店 整站網站,紅色簡潔風格的茶飲品咖啡店整站網站源碼下載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=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/magnific-popup.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 type="text/javascript" src="js/nivo-lightbox.min.js"></script>

3. HTML代碼

<!-- header -->
 <div class="banner">
		<div class="header">
		<div class="container">
			<div class="logo">
				<a href="index.html"><img src="images/logo.png" class="img-responsive" alt="" /></a>
			</div>
				<div class="hader-left">
				<h1><a href="index.html">Cappuccino</a></h1>
				</div>
				<div class="head-nav">
					<span class="menu"> </span>
						<ul class="cl-effect-3">
						<li class="active"><a href="index.html">Home</a></li>
							<li><a href="about.html">About</a></li>
							<li><a href="work.html">Work</a></li>
							<li><a href="contact.html">Contact</a></li>
								<div class="clearfix"> </div>
						</ul>
				</div>
			<div class="clearfix"> </div>
						<!-- script-for-nav -->
					<script>
						$( "span.menu" ).click(function() {
						  $( ".head-nav ul" ).slideToggle(300, function() {
							// Animation complete.
						  });
						});
					</script>
				<!-- script-for-nav --> 	
				</div>				
			</div> 
		<div class="container">
				<!-- portfolio -->
	<div class="worksmain">
						      <div class="section group">
								<div class="gallery-box">
										<div id="nivo-lightbox-demo">  <a href="images/img1.jpg"data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> <span class="rollover1"> </span></a> </div>     
									  	<img src="images/img1.jpg" alt="">
							    </div>
								<div class="gallery-box">
								  	    <div id="nivo-lightbox-demo">  <a href="images/img2.jpg" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> <span class="rollover1"> </span></a> </div>     
									  	<img src="images/img2.jpg" alt="">
							     </div>
								 <div class="gallery-box">
								  		<div id="nivo-lightbox-demo">  <a href="images/img3.jpg" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo">  <span class="rollover1"> </span></a> </div>     
									  	<img src="images/img3.jpg" alt="">
								</div>
								 <div class="gallery-box">
								  		<div id="nivo-lightbox-demo"> <a href="images/img4.jpg" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo">  <span class="rollover1"> </span></a> </div>     
									  	<img src="images/img4.jpg" alt="">
								</div>
								<div class="gallery-box">
								  		<div id="nivo-lightbox-demo">  <a href="images/img5.jpg" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo">  <span class="rollover1"> </span></a> </div>     
									  	<img src="images/img5.jpg" alt="">
								</div>
								<div class="gallery-box">
								  		<div id="nivo-lightbox-demo">  <a href="images/img6.jpg" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo">  <span class="rollover1"> </span></a> </div>     
									  	<img src="images/img6.jpg" alt="">
								</div>
							<div class="clearfix"></div>
						</div>
				<script type="text/javascript">
				$(document).ready(function(){
				    $('#nivo-lightbox-demo a').nivoLightbox({ effect: 'fade' });
				});
				</script>
     </div>
			<h3>Morbi molestie dolor vel commodo</h3>
			<p>Mentum mauris. orbi vulputate ultrices semper. Phasellus ultricies elit et orcidunt est congue tortor vehicul acilisis purus in malesuada purus lacin</p>
	</div>
	<!--//End-Gallery-->
   <!-- portfolio -->
			</div>
<!-- header -->
<!-- duis -->
		<div class="duis">
			<div class="down">
				<a href="#contact" class="scroll" "=""><img src="images/dwnar.png" class="img-responsive" alt="" /></a>
			</div>
			<div class="container">
				<h2>Duis felis liberomollis non</h2>
				<div class="duis-top">
					<div class="col-md-6 duis-1">
						<div class="duis-left">
							<i class="setting"></i>
						</div>
						<div class="duis-right">
							<h5>Tate ultrices semper illus</h5>
						</div>
						<div class="clearfix"></div>
						<p>nteger non semper nunc. Nam lacus diam, dignissim eu lobortis sit amet, ultrices sit amet lectus. Praesent enim massa, ultrices ac elit vel, commodo ullamcorper elit. Quisque ac magna tellus. Cras eu elementum sem. </p>
						<a href="#" class="more">Read More</a>
					</div>
					<div class="col-md-6 duis-1">
						<div class="duis-left">
							<i class="leaf"></i>
						</div>
						<div class="duis-right">
							<h5>Join ltrices semper illus</h5>
						</div>
						<div class="clearfix"></div>
						<p>Teger non semper nunc. Nam lacus diam, dignissim eu lobortis sit amet, ultrices sit amet lectus. Praesent enim massa, ultrices ac elit vel, commodo ullamcorper elit. Quisque ac magna tellus. Cras eu elementum sem.  </p>
						<a href="#" class="more">Read More</a>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="duis-top">
					<div class="col-md-6 duis-1">
						<div class="duis-left">
							<i class="cup"></i>
						</div>
						<div class="duis-right">
							<h5>Lorem ipsum semper illus</h5>
						</div>
						<div class="clearfix"></div>
						<p>Eger non semper nunc. Nam lacus diam, dignissim eu lobortis sit amet, ultrices sit amet lectus. Praesent enim massa, ultrices ac elit vel, commodo ullamcorper elit. Quisque ac magna tellus. Cras eu elementum sem.  </p>
						<a href="#" class="more">Read More</a>
					</div>
					<div class="col-md-6 duis-1">
						<div class="duis-left">
							<i class="gift"></i>
						</div>
						<div class="duis-right">
							<h5>Trices semper illus vivamus</h5>
						</div>
						<div class="clearfix"></div>
						<p>Osteger non semper nunc. Nam lacus diam, dignissim eu lobortis sit amet, ultrices sit amet lectus. Praesent enim massa, ultrices ac elit vel, commodo ullamcorper elit. Quisque ac magna tellus. Cras eu elementum sem.  </p>
						<a href="#" class="more">Read More</a>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
<!-- duis -->		
<!-- anean -->	
	<div class="anean">
		<div class="container">
			<label></label>
				<div class="anean-top">
					<h3>Aenean non mi ac neque rutrum bibendum</h3>
					<p>Nunc elementum est ut dignissim posuere</p>
				</div>
			<label></label>
		</div>
	</div>
<!-- anean -->
	<div class="anean-bottom">
		<div class="container">
			<div class="col-md-6">
				<div class="anean-1">
					<div class="anean-left">
						<img src="images/img9.jpg" class="img-responsive" alt="" />
					</div>
					<div class="anean-right">
						<h4>Aenean non miac</h4>
						<span>- Nunce element</span>
						<p>Osteger non semper nunc. Nam lacus diam, dignissim eu lobortis sit amet, ultrices sit . </p>
					</div>
						<div class="clearfix"></div>
				</div>
				<div class="anean-1">
					<div class="anean-left">
						<img src="images/img10.jpg" class="img-responsive" alt="" />
					</div>
					<div class="anean-right">
						<h4>Civamus et diam sed </h4>
						<span>- Pharetra sit amet</span>
						<p>Teger non semper nunc. Nam lacus diam, dignissim eu lobortis sit amet, ultrices sit . </p>
					</div>
						<div class="clearfix"></div>
				</div>
				<div class="anean-1">
					<div class="anean-left">
						<img src="images/img7.jpg" class="img-responsive" alt="" />
					</div>
					<div class="anean-right">
						<h4>Morbi ac molestie</h4>
						<span>-Tincidunt fermen</span>
						<p>Josteger non semper nunc. Nam lacus diam, dignissim eu lobortis sit amet, ultrices sit . </p>
					</div>
						<div class="clearfix"></div>
				</div>
			</div>
			<div class="col-md-3 maece">
				<h4>Maecenas a hendrerit</h4>
					<ul>
						<li><a href="#"><span> </span>Nam at urna quis lacus utre </a></li>
						<li><a href="#"><span> </span>Posuere justo velitet laotinoc </a></li>
						<li><a href="#"><span> </span>Donec egestas diam sed odioti</a></li>
						<li><a href="#"><span> </span>Integer eu nibh vitae massa</a></li>
						<li><a href="#"><span> </span>Cras vehicula nunc sed umb</a></li>
						<li><a href="#"><span> </span>Quisque non risus dui, vel pos</a></li>
						<li><a href="#"><span> </span>Aenean nec diam libero, sum</a></li>
						<li><a href="#"><span> </span>Donec egestas diam sed odioti</a></li>
						<li><a href="#"><span> </span>Integer eu nibh vitae massa</a></li>
					</ul>
			</div>
			<div class="col-md-3">
				<div class="anean-1">
					<div class="anean-left">
						<img src="images/img8.jpg" class="img-responsive" alt="" />
					</div>
					<div class="anean-right">
						<h4>Siooni</h4>
						<p>Osteger non semper nunc. Nam lacus diam, dignissim  </p>
					</div>
						<div class="clearfix"></div>
						<p>Donec faucibus sem a dolor condimentum, eget commodo lacus vehicula ellentesque id mauris vehicula, porttitor augue vitae, elementum.</p>
						<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatu</p>
						<a href="#" class="more">Read More</a>
				</div>
			</div>
		</div>
	</div>
<!-- footer -->
	<div class="footer" id="contact">
		<div class="container">
			<div class="col-md-3 nam">
				<h4>Namlacus dingi</h4>
					<ul class="number">
						<li><span><i class="phone"> </i>phone:(000) 888 88888</span>
						</li><li><a href="mailto:[email protected]"><i class="mail"> </i>[email protected] </a></li>					
					</ul>
			</div>
			<div class="col-md-3 set">
				<h4>Setaliquam sil</h4>
					<p>Building name, street number, name of the City, State and Country.</p>
			</div>
			<div class="col-md-3 morb">
				<h4>Morbi odio</h4>
				<div class="stay">
					<div class="stay-left">
						<form>
							<input type="text" placeholder="" required="">
						</form>
					</div>
					<div class="button">
						<form>
							<input type="submit" value="Subscribe">
						</form>
					</div>
						<div class="clearfix"> </div>
				</div>
			</div>
			<div class="col-md-3 inte">
				<h4>Integer sagitest</h4>
				<div class="social">
					<ul>
						<li><a href="#"><i class="facebok"> </i></a></li>
						<li><a href="#"><i class="twiter"> </i></a></li>
						<li><a href="#"><i class="in"> </i></a></li>
						<li><a href="#"><i class="pp"> </i></a></li>
						<li><a href="#"><i class="goog"> </i></a></li>
							<div class="clearfix"></div>	
					</ul>
				</div>
			</div>
				<div class="clearfix"></div>
		</div>
	</div>
	<!-- footer -->
<!-- footer -->
	<div class="footer-bottom">
		<div class="container">
			<p>Copyrights ? 2015 Cappuccino All rights reserved | Template by <a href="http://w3layouts.com/">W3layouts</a></p>
		</div>
	</div>
<!-- footer -->



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


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

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

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