藍色簡潔風格的寵物護理中心整站網站源碼下載



12 47 16



模板描述:藍色簡潔風格 寵物護理中心 整站網站,藍色簡潔風格的寵物護理中心整站網站源碼下載html模板下載

代碼結構

1. 引入CSS

<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link href="css/hover.css" rel="stylesheet" media="all">
<link href='http://fonts.googleapis.com/css?family=Arimo:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>

2. 引入JS

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/responsiveslides.min.js"></script>

3. HTML代碼

<!--header-->
<div class="header">
	<div class="header-info">
	  <div class="container">
		<div class="logo">
				<a href="index.html"><img src="images/logo.png" alt="" /></a>
		</div>
	             <div class="search-box">
				        <form>
				            <input type="text" name="s" class="textbox" placeholder="Search" required="">
				            <input type="submit" value="">
				        </form>
		         </div>
		         <div class="clearfix"> </div>
	  </div>
	</div>
</div>
   <div class="container">
	       <div class="header-bottom">
							<div class="menu">
								<span class="menu-info"> </span>
								<ul class="cl-effect-21">
									<li><a href="index.html" class="active">HOME</a></li>
									<li><a href="about.html">ABOUT</a></li>
								 	<li><a href="projects.html">PROJECTS</a></li>
									<li><a href="support.html">SUPPORT</a></li>
									<li><a href="404.html">CAREPLUS</a></li>
									<li><a href="contact.html">CONTACT</a></li>
								</ul>
							</div>
					<!--script-nav -->	
			        <script>
					$("span.menu-info").click(function(){
						$("ul.cl-effect-21").slideToggle("slow" , function(){
						});
					});
					</script>
					<!-- /script-nav -->
                    <div class="clearfix"> </div>	
		   </div>
  </div>
<div class="header-banner">
   <div class="slider">
	    <ul class="rslides" id="slider2">
	      <li><a href="#"><img src="images/4.jpg" class="img-responsive" alt=""/></a></li>
	      <li><a href="#"><img src="images/2.jpg" class="img-responsive" alt=""/></a></li>
	      <li><a href="#"><img src="images/3.jpg" class="img-responsive" alt=""/></a></li>
	    </ul>
    </div>
</div>
<!--/header-->
<!--doctor-self-->
<div class="doctor-self">
	<div class="container">
		<div class="doctor-self-info">
			<h3>WHAT WOULD OUR DEAN SAYS</h3>
			<div class="doctor-self-info-bottom">
				<div class="col-md-4 doctor-self-left">
					<img src="images/5.jpg" class="img-responsive" alt=""/>
					<h4>DR.JIMMY</h4>
					<h5>lorem lipsum doolr in groem horntim</h5>
				</div>
				<div class="col-md-8 doctor-self-right">
					<p>"Lorem Ipsum is simply dummy text of the printing and typesetting i
						ndustry. Lorem Ipsum has been the industry's standard dummy text 
						ever since the 1500s<br /><br /> reproduced below for those interested. Sections 1.10.32
						  and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero
						   are also reproduced in their exact original form, accompanied
						    by English versions from the 1914 translation by H. Rackham
						Lorem Ipsum is simply dummy text of the printing and typesetting i
						ndustry. Lorem Ipsum has been the industry's standard dummy text 
						ever since the 1500s"</p>
				</div>
				<div class="clearfix"> </div>
				</div>
		</div>
	</div>
</div>
<!--/doctor-self-->
<!--dogs-food-->
<div class="dogs-food">
	<div class="container">
		<div class="dogs-food-top-info">
		<div class="dogs-food-top">
			<div class="col-md-4 dogs-food-info">
				<img src="images/dg-1.png">
				<h4>CARE</h4>
				<p>when an unknown printer took a galley of
					 type and scrambled it to make a type speci
					men book</p>
					 <a class="dogs-top-food" href="#">More</a>
			</div>
			<div class="col-md-4 dogs-food-info">
				<img src="images/dg-2.png">
				<h4>CARE-+</h4>
				<p>when an unknown printer took a galley of
					 type and scrambled it to make a type speci
					men book</p>
					<a class="dogs-top-food" href="#">More</a>
			</div>
			<div class="col-md-4 dogs-food-info">
				<img src="images/dg-3.png">
				<h4>TRAVEL</h4>
				<p>when an unknown printer took a galley of
					 type and scrambled it to make a type speci
					men book</p>
					<a class="dogs-top-food" href="#">More</a>
			</div>
			<div class="col-md-4 dogs-food-info">
				<img src="images/dg-4.png">
				<h4>FRIEND-SHIP</h4>
				<p>when an unknown printer took a galley of
					 type and scrambled it to make a type speci
					men book</p>
					<a class="dogs-top-food" href="#">More</a>
			</div>
				<div class="col-md-4 dogs-food-info">
					<img src="images/dg-5.png">
					<h4>DOG-HOME</h4>
					<p>when an unknown printer took a galley of
						 type and scrambled it to make a type speci
						men book</p>
						<a class="dogs-top-food" href="#">More</a>
				</div>
				<div class="col-md-4 dogs-food-info">
					<img src="images/dg-6.png">
					<h4>DOG-FOOD</h4>
					<p>when an unknown printer took a galley of
						 type and scrambled it to make a type speci
						men book</p>
						<a class="dogs-top-food" href="#">More</a>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>
<!--/dogs-food-->
<!--daily-updates-->
<div class="daily-updates">
	<div class="container">
		<div class="daily-updates-info">
		<h4>SUBSCRIBE FOR DAILY UPDATES</h4>
		<form>
					 <input type="text" class="text" value="EMAIL" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'EMAIL';}">
					 <input type="submit"value="SUBMIT">
		 	</form>
		 	<p>FOR HELP<span><a href="mailto:[email protected]">[email protected]</a></span></p>
		 	</div>
	</div>
</div>
<!--/daily-updates-->
<!--support-->
<div class="support">
	<div class="container">
		<div class="support-info">
			<h4>OUR TEAM FOR SUPPORT</h4>
			<div class="support-info-left">
			<div class="col-md-10 support-info-left-bottom">
				<p>"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
					 the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of ty
						pe and scrambled</p>
			</div>
			<div class="col-md-2 support-info-left-top">
				<img src="images/support.png" class="img-responsive" alt=""/>
			</div>	
			<div class="clearfix"> </div>
			</div>
			<div class="support-info-right">
			<div class="col-md-2 support-info-right-bottom">
				<img src="images/support.png" class="img-responsive" alt=""/>
			</div>	
			<div class="col-md-10 support-info-right-top">
				<p>"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
					 the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of ty
						pe and scrambled</p>
			</div>
			<div class="clearfix"> </div>
			</div>
						<div class="clearfix"> </div>
		</div>
	</div>
</div>
	<div class="home-map">
			<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387157.48595911684!2d-73.97968099999999!3d40.703312100000005!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY%2C+USA!5e0!3m2!1sen!2sin!4v1421997628895"frameborder="0" style="border:0"></iframe>
	</div>
<!--/support-->
<!--contact-->
<div class="contact">
	<div class="container">
		<div class="contact-info">
			<h4>CONTACT-US</h4>
			<p>Typesetting, remaining essentially unchanged. It was popularised in the 1960s</p>
		</div>
		<form>
						 <input type="text" class="text" value="NAME" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'NAME';}">
						 <input type="text" class="text" value="EMAIL" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'EMAIL';}">
						 <textarea onfocus="if(this.value == 'MESSAGE') this.value='';" onblur="if(this.value == '') this.value='MESSAGE';" >MESSAGE</textarea>	
						 <div class="clearfix"> </div>
						 <input type="submit"value="SUBMIT">
					</form>
	</div>
</div>
<!--/contact-->
<!--footer-->
<div class="footer">
	<div class="container">
	<div class="copy-rights">
				 <p>Design by<a href="http://w3layouts.com/"> W3layouts.</a></p>
			</div>
	</div>
</div>
<!--/footer-->



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


熱門標簽: 行業 企業 公司 工廠 分類 響應式 自適應 設備 風格 顏色 扁平化 企業 行業 公司 工廠 bootstrap bootstrap自適應 bootstrap響應式 藍色 pc+wap 移動+電腦 手機+電腦 簡潔 簡約 簡單 動物寵物 寵物 寵物店 寵物醫院 動物園
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

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