藍色歐美風格的醫療健康服務企業網站源碼下載



12 46 16



模板描述:藍色歐美風格 醫療健康服務 企業網站,藍色歐美風格的醫療健康服務企業網站源碼下載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="css/component.css" rel="stylesheet" type="text/css"  />
<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/ihover.css" rel="stylesheet" media="all">
<link href='http://fonts.useso.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/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="css/component.css" rel="stylesheet" type="text/css"  />
<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/ihover.css" rel="stylesheet" media="all">
<link href='http://fonts.useso.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>

2. 引入JS

<script src="js/jquery-1.11.1.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/classie.js"></script>
<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
<script src="js/responsiveslides.min.js"></script>
<script type="text/javascript" src="js/jquery.iconmenu.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery-1.11.1.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/classie.js"></script>
<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
<script src="js/responsiveslides.min.js"></script>
<script type="text/javascript" src="js/jquery.iconmenu.js"></script>
<script src="js/bootstrap.js"></script>

3. HTML代碼

<!--
Author: xmoban.cn
Author URL: http://www.xmoban.cn/
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
<title>Medi Cure a Medical hospital Category Flat Bootstrap Responsive Website Template | Home :: xmoban.cn</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Medi Cure Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //for-mobile-apps -->
<!-- toggle menu links -->
<!-- //menu links -->
<!-- effect9 links -->
<!-- js -->
<!-- //js -->
	<!-- start-smoth-scrolling -->
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
		</script>
	<!-- start-smoth-scrolling -->
</head>
<!-- slide-toggle-menu -->
<body class="cbp-spmenu-push">
       <!--top-header-->
		<!--bottom-->
		  <section class="button">
					<button id="showLeftPush"><img src="images/menu.png" alt=""></button>
		   </section>
			<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
				<h3>Menu</h3>
						<a href="index.html" class="active">HOME</a>
						<a href="about.html">ABOUT</a>
						<a href="blog.html">BLOG</a>
						<a href="shortcodes.html">SHORT CODES</a>
						<a href="gallery.html">GALLERY</a>
						<a href="contact.html">CONTACT</a>
		    </nav>
		<!-- Classie - class helper functions by @desandro https://github.com/desandro/classie -->
		<script>
			var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
				showLeftPush = document.getElementById( 'showLeftPush' ),
				showRightPush = document.getElementById( 'showRightPush' ),
				body = document.body;
			showLeftPush.onclick = function() {
				classie.toggle( this, 'active' );
				classie.toggle( body, 'cbp-spmenu-push-toright' );
				classie.toggle( menuLeft, 'cbp-spmenu-open' );
				disableOther( 'showLeftPush' );
			};
			function disableOther( button ) {
				if( button !== 'showLeftPush' ) {
					classie.toggle( showLeftPush, 'disabled' );
				}
				if( button !== 'showRightPush' ) {
					classie.toggle( showRightPush, 'disabled' );
				}
			}
		</script>
<!-- banner -->
<div class="banner">
	<div class="logo">
		<h1><a href="index.html">MEDI CURE</a></h1>
	</div>
	<div class="search">		
		<a class="play-icon popup-with-zoom-anim" href="#small-dialog"><i class="glyphicon glyphicon-search"> </i> </a>
	</div>
		<div id="small-dialog" class="mfp-hide">
			<div class="search-top">
				<div class="login">
					<input type="submit" value="">
					<input type="text" value="Type something..." onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}">		
				</div>			
			</div>
			<script>
						$(document).ready(function() {
						$('.popup-with-zoom-anim').magnificPopup({
							type: 'inline',
							fixedContentPos: false,
							fixedBgPos: true,
							overflowY: 'auto',
							closeBtnInside: true,
							preloader: false,
							midClick: true,
							removalDelay: 300,
							mainClass: 'my-mfp-zoom-in'
						});
						});
			</script>				
		</div>
	<div class="banner-info">
			<script>
									// You can also use "$(window).load(function() {"
									$(function () {
									 // Slideshow 4
									$("#slider3").responsiveSlides({
										auto: true,
										pager: false,
										nav: true,
										speed: 500,
										namespace: "callbacks",
										before: function () {
									$('.events').append("<li>before event fired.</li>");
									},
									after: function () {
										$('.events').append("<li>after event fired.</li>");
										}
										});
										});
			</script>
			<div  id="top" class="callbacks_container">
				<ul class="rslides" id="slider3">
					<li>
						<div class="banner-text">
							<h3>MAKE YOUR LIFE MORE<span> HEALTHY AND SAFE</span></h3>
							<p> Neque porro quisquam est, qui dolorem ipsum quia 
							dolor sit amet, consectetur, adipisci velit, sed 
							quia non numquam eius modi tempora incidunt ut 
							labore et dolore magnam aliquam quaerat voluptatem. </p>
							<div class="read text-center"><a href="single.html" class="hvr-outline-out button2">READ MORE</a></div>
						</div>
					</li>
					<li>
						<div class="banner-text">
							<h3>BETTER HEALTH CARE IS CLOSER<span> THAN YOU THINK</span></h3>
							<p> Neque porro quisquam est, qui dolorem ipsum quia 
							dolor sit amet, consectetur, adipisci velit, sed 
							quia non numquam eius modi tempora incidunt ut 
							labore et dolore magnam aliquam quaerat voluptatem. </p>
							<div class="read text-center"><a href="single.html" class="hvr-outline-out button2">READ MORE</a></div>
						</div>
					</li>
				</ul>
			</div>
			<div class="down-arrow text-center"><a class="scroll" href="#banner-bottom"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></a></div>
	</div>
</div>
<!-- //banner -->
<!-- banner-bottom -->
<div id="banner-bottom" class="banner-bottom">
	<div class="container">
		<h3 class="tittle">WELCOME TO MEDI CURE</h3>
		<p> Neque porro quisquam est, qui dolorem ipsum quia 
			dolor sit amet, consectetur, adipisci velit, sed 
			quia non numquam eius modi tempora incidunt ut 
			labore et dolore magnam aliquam quaerat voluptatem. 
			Nemo enim ipsam voluptatem quia voluptas sit aspernatur
			aut odit aut fugit, sed quia consequuntur magni dolores 
			eos qui ratione voluptatem sequi nesciunt.  </p>
		<ul id="sti-menu" class="sti-menu">
				<li data-hovercolor="#fff">
					<a href="#">
						<h4 data-type="mText" class="sti-item">HEALTH</h4>
						<p data-type="sText" class="sti-item">Voluptatem quia voluptas</p>
						<span data-type="icon" class="sti-icon glyphicon glyphicon-plus sti-item"></span>
					</a>
				</li>
				<li data-hovercolor="#fff">
					<a href="#">
						<h4 data-type="mText" class="sti-item">SURGERY</h4>
						<p data-type="sText" class="sti-item">Voluptatem quia voluptas</p>
						<span data-type="icon" class="sti-icon glyphicon glyphicon-scissors sti-item"></span>
					</a>
				</li>
				<li data-hovercolor="#fff">
					<a href="#">
						<h4 data-type="mText" class="sti-item">CAREERS</h4>
						<p data-type="sText" class="sti-item">Voluptatem quia voluptas</p>
						<span data-type="icon" class="sti-icon glyphicon glyphicon-education sti-item"></span>
					</a>
				</li>
				<li data-hovercolor="#fff">
					<a href="#">
						<h4 data-type="mText" class="sti-item">PLANNING</h4>
						<p data-type="sText" class="sti-item">Voluptatem quia voluptas</p>
						<span data-type="icon" class="sti-icon glyphicon glyphicon-apple sti-item"></span>
					</a>
				</li>
				<script type="text/javascript">
					$(function() {
						$('#sti-menu').iconmenu({
							animMouseenter	: {
								'mText' : {speed : 400, easing : 'easeOutExpo', delay : 140, dir : 1},
								'sText' : {speed : 400, easing : 'easeOutExpo', delay : 0, dir : 1},
								'icon'  : {speed : 800, easing : 'easeOutBounce', delay : 280, dir : 1}
							},
							animMouseleave	: {
								'mText' : {speed : 400, easing : 'easeInExpo', delay : 140, dir : 1},
								'sText' : {speed : 400, easing : 'easeInExpo', delay : 280, dir : 1},
								'icon'  : {speed : 400, easing : 'easeInExpo', delay : 0, dir : 1}
							}
						});
					});
				</script>
		</ul>
	</div>
</div>
<!-- //banner-bottom -->
<!-- measure -->
<div class="measure">
	<div class="container">
		<h3>WE MEASURE SUCCESS IN SMILES AND IMPROVEMENT IN HEALTH AND QUALITY OF LIFE.</h3>
	</div>
</div>
<!-- measure -->
<!-- qualified -->
<div class="qualified">
	<div class="container">
		<h3 class="tittle">ONLY QUALIFIED MEDICAL SERVICES</h3>
		<div class="qualified-grids">
			<div class="col-md-7 qualify-left">
				<div class="qualify-left-grids">
					<div class="qua-left-gd text-right">
						<h4>voluptatem quia</h4>
						<p>Neque porro quisquam est, qui dolorem ipsum quia 
							dolor sit amet, consectetur, adipisci velit, sed 
							quia non numquam eius.</p>
					</div>
					<div class="qua-right-gd text-center">
						<img src="images/t2.png" alt="" />
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="qualify-left-grids">
					<div class="qua-left-gd text-right">
						<h4>voluptatem quia</h4>
						<p>Neque porro quisquam est, qui dolorem ipsum quia 
							dolor sit amet, consectetur, adipisci velit, sed 
							quia non numquam eius.</p>
					</div>
					<div class="qua-right-gd text-center">
						<img src="images/t3.png" alt="" />
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="col-md-5 qualify-right grid">
				<figure class="effect-moses">
						<img src="images/aa.jpg" alt="" />
						<figcaption>
							<h4>MEDI <span>CURE</span></h4>
							<p>voluptatem quia voluptas sit.</p>
						</figcaption>			
				</figure>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
</div>	
<!-- qualified -->
<div class="welcome-grids">
	<div class="container">
		<h3 class="tittle">THE BEST MEDICINE IS PREVENTION</h3>
			<div class="col-md-3 welcome-grid text-center">
				<div class="ih-item circle effect9 left_to_right"><a href="#">
					<div class="img"><img src="images/22.jpg" alt="" /></div>
					<div class="info">
					  <h4>MEDI CURE</h4>
					  <p>Description goes here</p>
					</div></a>
				</div>
			</div>
			<div class="col-md-3 welcome-grid text-center">
				<div class="ih-item circle effect9 left_to_right"><a href="#">
					<div class="img"><img src="images/3.jpg" alt="" /></div>
					<div class="info">
					  <h4>MEDI CURE</h4>
					  <p>Description goes here</p>
					</div></a>
				</div>
			</div>
			<div class="col-md-3 welcome-grid text-center">
				<div class="ih-item circle effect9 left_to_right"><a href="#">
					<div class="img"><img src="images/2.jpg" alt="" /></div>
					<div class="info">
					  <h4>MEDI CURE</h4>
					  <p>Description goes here</p>
					</div></a>
				</div>
			</div>
			<div class="col-md-3 welcome-grid text-center">
				<div class="ih-item circle effect9 left_to_right"><a href="#">
					<div class="img"><img src="images/111.jpg" alt="" /></div>
					<div class="info">
					  <h4>MEDI CURE</h4>
					  <p>Description goes here</p>
					</div></a>
				</div>
			</div>
			<div class="clearfix"></div>
	</div>
</div>
<!-- //qualified -->
<!-- contact -->
<div class="contact-home">
	<div class="map-home">
		<iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d2482.432383990807!2d0.028213999961443994!3d51.52362882484525!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1423469959819"></iframe>
		<div class="map-pos">
			<div class="login-pad">
				<h2>MAKE AN APPOINTMENT</h2>
					<form>
						<input type="text" value="Username" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Username';}" required="">
						<input type="text" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}" required="">
						<input type="text" value="Mobile" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Mobile';}" required="">
						<label class="checkbox"><input type="checkbox" name="checkbox" checked><i> </i>Subscribe in your Newsletter</label>
						<textarea placeholder="Message" required=""></textarea>
						<input type="submit" value="SEND">
					</form>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
</div>
<!-- //contact -->
<!-- copy-right -->
<div class="copy-right">
	<div class="container">
		<p> &copy; 2016 Medi Cure. All Rights Reserved | Design by  <a href="http://www.cqetom.live//"> xmoban.cn</a></p>
	</div>
</div>
<!-- //copy-right -->
<!-- Bootstrap core JavaScript-->
    <!-- Placed at the end of the document so the pages load faster -->
	<!-- js -->
	<!-- js -->
<!-- smooth scrolling -->
	<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>
<!-- //smooth scrolling -->
</body>
</html>



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


熱門標簽: 行業 企業 公司 工廠 分類 響應式 自適應 設備 風格 顏色 企業 行業 公司 工廠 bootstrap bootstrap自適應 bootstrap響應式 藍色 歐美風 歐美 歐洲 美洲 pc+wap 移動+電腦 手機+電腦 簡潔 簡約 簡單 醫院醫療 醫院 醫療 醫療器械
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子