web前端HTML5模板----HTML5宠物兽医医院网站设计(HTML+CSS+JavaScript)实现

大家好,我是java老王,今天给大家推荐一套HTML5宠物兽医医院网站模板

网站首页 :

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

关于我们

在这里插入图片描述

医疗设施

在这里插入图片描述

医疗服务

在这里插入图片描述

宠物百科

在这里插入图片描述

联系我们

在这里插入图片描述

主要源码结构:

在这里插入图片描述

主要源码展示:

index.html

<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>魔米宠物医院</title>
		<link href="static/css/cubeportfolio.min.css" rel="stylesheet">
		<link href="static/css/owl.carousel.css" rel="stylesheet">
		<link href="static/css/owl.theme.css" rel="stylesheet">
		<link href="static/css/style.css" rel="stylesheet">
		<link href="static/css/bootstrap.min.css" rel="stylesheet">
		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
        <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <link href="static/css/IE8.css" rel="stylesheet">
        <![endif]-->
	</head>

	<body>
		<!--头部-->
		<header>
			<!--页眉-->
			<div class="header">
				<div class="container">
					<p class="p14 col-md-6 col-xs-6 text-left">欢迎来到魔米宠物医院!</p>
					<P class="p14 col-md-6 col-xs-6 text-right"><span class="glyphicon glyphicon-earphone"></span>&nbsp;&nbsp;&nbsp;宠物咨询:0512-6500-1280</P>
				</div>
			</div>

			<!--导航-->
			<nav class="nav_top">
				<div class="container">
					<div class="navbar-header">
						<button class="navbar-toggle collapsed mean" data-toggle="collapse" data-target="#mynavbar">                     
		                      <span class="icon-bar"></span>
		                      <span class="icon-bar"></span>
		                      <span class="icon-bar"></span>
		                 </button>
						<a class="navbar-brand logo"><img src="static/images/logo.png"></a>
					</div>
					<div id="mynavbar" class="collapse navbar-collapse">
						<ul class="nav navbar-nav nav_li navbar-right">
							<li>
								<a href="index.html">首页</a>
							</li>
							<li>
								<a href="about.html">关于我们</a>
							</li>
							<li>
								<a href="product.html">医疗设施</a>
							</li>
							<li>
								<a href="service.html">医疗服务</a>
							</li>

							<li>
								<a href="news.html">宠物百科</a>
							</li>
							<li>
								<a href="contact.html">联系我们</a>
							</li>
						</ul>
					</div>
				</div>
			</nav>
		</header>
		<!--幻灯片-->
		<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
			<ol class="carousel-indicators">
				<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
				<li data-target="#carousel-example-generic" data-slide-to="1"></li>
				<li data-target="#carousel-example-generic" data-slide-to="2"></li>
			</ol>
			<div class="carousel-inner silder-top" role="listbox">
				<div class="item active">
					<img src="static/images/banner1.jpg">
					<div class="carousel-caption">
					</div>
				</div>
				<div class="item">
					<img src="static/images/banner2.jpg">
					<div class="carousel-caption">
					</div>
				</div>
				<div class="item">
					<img src="static/images/banner3.jpg">
					<div class="carousel-caption">
					</div>
				</div>
			</div>
			<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
		<!--我们理念-->
		<div class="idea">
			<div class="container">
				<div class="col-md-10">
					<p>我们的宠物服务更涵盖了宠物的衣食住行医疗等方面。</p>
					<span class="p14">our pet service covers the basic necessities of life care and other aspects of pet.</span>
				</div>
				<a class="col-md-2" href="contact.html">立即咨询</a>
			</div>
		</div>

		<!--关于我们-->
		<div class="about">
			<div class="container">
				<div class="title">
					<img src="static/images/h_1.png" class="title_img">
					<div class="title_top">
						<h2>关于我们</h2>
						<span>About Us</span>
					</div>
					<img src="static/images/h_2.png" class="title_img">
				</div>
				<div class="ab">
					<img src="static/images/ab.jpg" class="col-md-6 img-circle">
					<div class="col-md-6">
						<p class="p14">
							魔米宠物医院 是一家专业的宠物医院,位于苏州园区青剑湖曼哈顿广场9-110。医院地处成熟商业区,功能区面积400平方米,分区合理、设施完善、国内先进工作流程。宠物医院成立于1998年隶属于医疗集团股份有限公司,全国共有近百家直营分院,分布于上海、广州、深圳、长沙。凭借阵容强大的专家团队、媲美港台的医疗设备、遵循规范、严谨的作业流程,每年为几十万只宠物提供高品质的服务。服务范围涵盖:宠物医疗保健、 美容造型、寄养、洗浴、SPA、食品及用品等。拥有一批高学历、临床经验丰富的宠物医师,其中硕士35人、博士2人,执业兽医师328人。有完善的宠物内科、心血管科、骨科、软组织外科、眼科、肿瘤科、牙科、皮肤科、影像科、猫科等科室,并在宠物骨科、眼科、肿瘤科、牙科、皮肤科等领域综合实力领跑全国。
						</p>
						<a href="about.html">了解更多</a>
					</div>
				</div>
			</div>
		</div>
		<!--我们服务-->
		<div class="service">
			<div class="container">
				<div class="row">
					<div class="title">
						<img src="static/images/h_1.png" class="title_img">
						<div class="title_top">
							<h2>医疗服务</h2>
							<span>Medical Service</span>
						</div>
						<img src="static/images/h_2.png" class="title_img">
					</div>
					<img src="static/images/service.jpg" class="service_img1">
					<div class="service_top">
						<img src="static/images/gou.png" class="service_img">
						<div class="service_top1">
							<h4>宠物医疗</h4>
							<p class="p14">宠物的医疗保养也越来越受到大家的关注</p>
						</div>
						<div class="service_top2">
							<h4>宠物饮食</h4>
							<p class="p14">宠物的饮食和营养也越来越受到大家的关注</p>
						</div>
						<div class="service_top3">
							<h4>宠物寄养</h4>
							<p class="p14">因为宠物的种类多,各自的生活习性不同,对营养的需求也不尽相同</p>
						</div>
						<div class="service_top4">
							<h4>宠物美容</h4>
							<p class="p14">所谓的宠物美容就是借助美容用品和修剪技法和染色激发增添美感</p>
						</div>
						<div class="service_top5">
							<h4>宠物护理</h4>
							<p class="p14">让宠物的外观得到美化和环保变得更健康和时尚</p>
						</div>
						<div class="service_top6">
							<h4>宠物训练</h4>
							<p class="p14">让它觉得这段时间充满了乐趣,从而增强宠物与主人的感情</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--成功案例-->
		<diV class="case">
			<div class="container">
				<div class="row">
                       <div class="title">
						<img src="static/images/h_1.png" class="title_img">
						<div class="title_top">
							<h2>医疗设施</h2>
							<span>Medical Equipment</span>
						</div>
						<img src="static/images/h_2.png" class="title_img">
					</div>
					<div class="news-liebiao clearfix">
						<div id="js-grid-masonry" class="cbp">
							<div class="cbp-item wuxianchanpin">
								<a href="static/images/pc4.jpg" class="cbp-caption cbp-lightbox">
									<div class="cbp-caption-defaultWrap">
										<img src="static/images/pc4.jpg" alt="">
									</div>
									<div class="cbp-caption-activeWrap">
										<div class="cbp-l-caption-alignCenter">
											<div class="cbp-l-caption-body">
												<div class="cbp-l-caption-title">B超检查</div>
												<div class="cbp-l-caption-desc">Classic black</div>
											</div>
										</div>
									</div>
								</a>
							</div>
							<div class="cbp-item MINATO">
								<a href="static/images/pc2.jpg" class="cbp-caption cbp-lightbox">
									<div class="cbp-caption-defaultWrap">
										<img src="static/images/pc2.jpg" alt="">
									</div>
									<div class="cbp-caption-activeWrap">
										<div class="cbp-l-caption-alignCenter">
											<div class="cbp-l-caption-body">
												<div class="cbp-l-caption-title">美容spa</div>
												<div class="cbp-l-caption-desc">美容加spa让您的狗狗焕然一新。</div>
											</div>
										</div>
									</div>
								</a>
							</div>
							<div class="cbp-item MINATO">
								<a href="static/images/pc6.jpg" class="cbp-caption cbp-lightbox">
									<div class="cbp-caption-defaultWrap">
										<img src="static/images/pc6.jpg" alt="">
									</div>
									<div class="cbp-caption-activeWrap">
										<div class="cbp-l-caption-alignCenter">
											<div class="cbp-l-caption-body">
												<div class="cbp-l-caption-title">spa</div>
												<div class="cbp-l-caption-desc">养生spa,宠物也可以享受这个。</div>
											</div>
										</div>
									</div>
								</a>
							</div>
							<div class="cbp-item MINATO">
								<a href="static/images/pc8.jpg" class="cbp-caption cbp-lightbox">
									<div class="cbp-caption-defaultWrap">
										<img src="static/images/pc8.jpg" alt="">
									</div>
									<div class="cbp-caption-activeWrap">
										<div class="cbp-l-caption-alignCenter">
											<div class="cbp-l-caption-body">
												<div class="cbp-l-caption-title">美容修整</div>
												<div class="cbp-l-caption-desc">修修剪剪,还您一个貌美的小宠物。</div>
											</div>
										</div>
									</div>
								</a>
							</div>
							<div class="cbp-item MINATO">
								<a href="static/images/pc7.jpg" class="cbp-caption cbp-lightbox">
									<div class="cbp-caption-defaultWrap">
										<img src="static/images/pc7.jpg" alt="">
									</div>
									<div class="cbp-caption-activeWrap">
										<div class="cbp-l-caption-alignCenter">
											<div class="cbp-l-caption-body">
												<div class="cbp-l-caption-title">美容</div>
												<div class="cbp-l-caption-desc">爱美是人的天性,给宠物一个美丽的容貌。</div>
											</div>
										</div>
									</div>
								</a>
							</div>
							<div class="cbp-item ELNEC">
								<a href="static/images/pc5.jpg" class="cbp-caption cbp-lightbox">
									<div class="cbp-caption-defaultWrap">
										<img src="static/images/pc5.jpg" alt="">
									</div>
									<div class="cbp-caption-activeWrap">
										<div class="cbp-l-caption-alignCenter">
											<div class="cbp-l-caption-body">
												<div class="cbp-l-caption-title">化验检查</div>
												<div class="cbp-l-caption-desc">抽血检验,粪便检查,精细到每一个环节。</div>
											</div>
										</div>
									</div>
								</a>
							</div>
							<div class="cbp-item eMMC">
								<a href="static/images/pc1.jpg" class="cbp-caption cbp-lightbox">
									<div class="cbp-caption-defaultWrap">
										<img src="static/images/pc1.jpg" alt="">
									</div>
									<div class="cbp-caption-activeWrap">
										<div class="cbp-l-caption-alignCenter">
											<div class="cbp-l-caption-body">
												<div class="cbp-l-caption-title">手术台</div>
												<div class="cbp-l-caption-desc">独立封闭的手术室,无菌环境。</div>
											</div>
										</div>
									</div>
								</a>
							</div>
							<div class="cbp-item Dediprog">
								<a href="static/images/pc3.jpg" class="cbp-caption cbp-lightbox">
									<div class="cbp-caption-defaultWrap">
										<img src="static/images/pc3.jpg" alt="">
									</div>
									<div class="cbp-caption-activeWrap">
										<div class="cbp-l-caption-alignCenter">
											<div class="cbp-l-caption-body">
												<div class="cbp-l-caption-title">x光拍摄</div>
												<div class="cbp-l-caption-desc">全方位的拍摄检查,渗透到每一个部位。</div>
											</div>
										</div>
									</div>
								</a>
							</div>
						</div>
						
					</div>
				</div>
			</div>
			<!--<div class="container">
				<div class="row">
					<div class="title">
						<img src="static/images/h_1.png" class="title_img">
						<div class="title_top">
							<h2>医疗设备</h2>
							<span>Medical Equipment</span>
						</div>
						<img src="static/images/h_2.png" class="title_img">
					</div>
					<ul class="col-md-12 case_top">
						<li class="col-md-3">
							
							     <img src="static/images/p1.jpg">
							
							<div>
								<p class="p14">犬肝硬化B超犬肝硬化B超犬肝硬化B超犬肝硬化B超犬肝硬化B超犬肝硬化B超</p>
								<a href="product.html">查看更多</a>
							</div>
						</li>
						<li class="col-md-3">
							<img src="static/images/p2.jpg">
							<div>
								<p class="p14">各种骨折治疗各种骨折治疗各种骨折折治疗各种骨折治疗各种骨折治疗</p>
								<a href="product.html">查看更多</a>
							</div>
						</li>
						<li class="col-md-3">
							<img src="static/images/p3.jpg">
							<div>
								<p class="p14">绝育并不可怕绝育并不可怕绝育并不可怕绝育并不可怕绝育并不可怕绝育并不可怕</p>
								<a href="product.html">查看更多</a>
							</div>
						</li>
						<li class="col-md-3">
							<img src="static/images/p4.jpg">
							<div>
								<p class="p14">膀胱结石B超图片膀胱结石B超图片片膀胱结石B超图片膀胱结石B超图片</p>
								<a href="product.html">查看更多</a>
							</div>
						</li>
						<li class="col-md-3">
							<img src="static/images/p5.jpg">
							<div>
								<p class="p14">肠道异物手术肠道异物手术肠道异物手术肠道异物手术肠道异物手术肠道异物手术</p>
								<a href="product.html">查看更多</a>
							</div>
						</li>
						<li class="col-md-3">
							<img src="static/images/p6.jpg">
							<div>
								<p class="p14">犬子宫蓄脓犬子宫蓄脓犬子宫蓄脓犬子宫子宫蓄脓犬子宫蓄脓犬子宫蓄脓犬子宫蓄脓</p>
								<a href="product.html">查看更多</a>
							</div>
						</li>
						<li class="col-md-3">
							<img src="static/images/p7.jpg">
							<div>
								<p class="p14">比熊犬胃内异物比熊犬胃内异物比熊犬胃内异物比熊犬胃异物</p>
								<a href="product.html">查看更多</a>
							</div>
						</li>
						<li class="col-md-3">
							<img src="static/images/p8.jpg">
							<div>
								<p class="p14">结石X光片结石X光片结石X光片结石X光片结石X光片结石X光片</p>
								<a href="product.html">查看更多</a>
							</div>
						</li>
					</ul>
				</div>
			</div>-->
		</diV>
		<!--萌宠医疗-->
		<div>
			<div class="container-fluid">
				<div class="row">

					<div class="doctor_top">
						<img src="static/images/d1.png">
						<h3>— 医疗技术实力雄厚 —</h3>
						<p>拥有一批高学历、临床经验丰富的宠物医师,其中硕士35人、博士2人,执业兽医师328人。</p>
						<p>有完善的宠物内科、心血管科、骨科、软组织外科、眼科、</p>
						<p>肿瘤科、牙科、皮肤科、影像科、猫科等科室,并在宠物骨科、眼科、肿瘤科、牙科、皮肤科等领域综合实力领跑全国。</p>
					</div>
				</div>
			</div>
		</div>
		<!--萌宠资讯-->
		<diV class="news">
			<div class="container">
				<div class="title">
					<img src="static/images/h_1.png" class="title_img">
					<div class="title_top">
						<h2>宠物百科</h2>
						<span>Pet Encyclopedia</span>
					</div>
					<img src="static/images/h_2.png" class="title_img">
				</div>
				<div class="row">
					<div class="col-lg-5 col-md-5 col-sm-12 col-xs-12">
						<div id="news_slide" class="news_slide_box">
							<div class="bd">
								<ul>
									<li>
										<a class="pic" href="news_show33.html">
											<img src="static/images/news1.jpg" />
											<span class="title">
												老年宠物护理成新兴行业
											</span>
										</a>
									</li>
									<li>
										<a class="pic" href="news_show11.html">
											<img src="static/images/news2.jpg" />
											<span class="title">
												宠物月均消费高于人
											</span>
										</a>
									</li>
								</ul>
							</div>
							<span class="prev"></span>
							<span class="next"></span>
						</div>
					</div>
					<div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">
						<ul class="news_list">
							<li>
								<div class="news_pic col-lg-3 col-md-3 col-sm-4 col-xs-12">
									<a href="news_show44.html">
										<img src="static/images/news3.jpg" />
									</a>
								</div>
								<div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
									<a href="news_show44.html" class="news_tit">宠物切莫“所托非人”</a>
									<p class="news_time">2017-07-14</p>
									<p class="news_desc">当前,随着饲养宠物的家庭增多,许多与宠物相关行业的店铺应运而生。作为一个新兴的行业 </p>
								</div>
							</li>
							<li>
								<div class="news_pic col-lg-3 col-md-3 col-sm-4 col-xs-12">
									<a href="news_show88.html">
										<img src="static/images/news4.jpg" />
									</a>
								</div>
								<div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
									<a href="news_show88.html" class="news_tit">如何通过牙齿推断猫咪的年龄</a>
									<p class="news_time">2017-07-18</p>
									<p class="news_desc">猫咪的年龄,主要以犬牙齿的生长情况、齿峰及牙齿的磨损程度、外形、颜色等综合判定。</p>
								</div>
							</li>
							<li>
								<div class="news_pic col-lg-3 col-md-3 col-sm-4 col-xs-12">
									<a href="news_show66.html">
										<img src="static/images/news5.jpg" />
									</a>
								</div>
								<div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
									<a href="news_show66.html" class="news_tit">狗狗抑郁症的原因及解决办法</a>
									<p class="news_time">2017-07-17</p>
									<p class="news_desc">抑郁症这个词对于我们来说并不陌生,它是一种心理障碍。可是你知道吗?狗狗</p>
								</div>
							</li>
						</ul>
					</div>

				</div>
			</div>
		</diV>
		<!--团队风采-->
		<diV class="team">
			<div class="container">
				<div class="title">
					<img src="static/images/h_1.png" class="title_img">
					<div class="title_top">
						<h2>医疗团队</h2>
						<span>

Medical Team</span>
					</div>
					<img src="static/images/h_2.png" class="title_img">
				</div>
				<section class="team-box">
					<div id="owl-demo2" class="owl-carousel team-list wow fadeInUp">
						<div class="item">
							<a href="about.html">
								<img src="static/images/t1.jpg" />
								<p class="name-t">DRIVE LI</p>
								<div class="team-abs">
									<h3>宠物医院眼科</h3>
									<p>眼科专家</p>
								</div>
							</a>
						</div>
						<div class="item">
							<a href="about.html">
								<img src="static/images/t2.jpg" />
								<p class="name-t">JAKE LI</p>
								<div class="team-abs">
									<h3>宠物医院骨科科</h3>
									<p>骨科专家</p>
								</div>
							</a>
						</div>
						<div class="item">
							<a href="about.html">
								<img src="static/images/t3.jpg" />
								<p class="name-t">Aaron LI</p>
								<div class="team-abs">
									<h3>宠物医院皮肤科</h3>
									<p>皮肤科专家</p>
								</div>
							</a>
						</div>
						<div class="item">
							<a href="about.html">
								<img src="static/images/t4.jpg" />
								<p class="name-t">KELIE LI</p>
								<div class="team-abs">
									<h3>宠物医院普外科</h3>
									<p>普外科专家</p>
								</div>
							</a>
						</div>
						<div class="item">
							<a href="about.html">
								<img src="static/images/t5.jpg" />
								<p class="name-t">KIKI LI</p>
								<div class="team-abs">
									<h3>宠物医院肿瘤科</h3>
									<p>肿瘤科专家</p>
								</div>
							</a>
						</div>
					</div>
				</section>

			</div>
		</div>
		<!--联系我们-->
		<footer class="footer">
			<div class="container">
				<div class="b-nav wow fadeInUp" data-wow-delay=".1s">
					<a href="index.html">首 页</a>
					<a href="about.html">关于我们</a>
					<a href="product.html">医疗设施</a>
					<a href="service.html">医疗服务</a>
					<a href="news.html">宠物百科</a>
					<a href="contact.html">联系我们</a>
				</div>
				<p class="wow fadeInUp jshu" data-wow-delay=".3s">Copyright © 2017-2027 宠物医院 | 魔米宠物医院</p>
				<p class="wow fadeInUp jshu" data-wow-delay=".5s">技术支持:&nbsp;&nbsp;&nbsp;
					<a href="http://www.17sucai.com/" target="_blank">网页模板</a>
				</p>
			</div>
		</footer>
		<!--回到顶部-->
		<a class="top"><span class="glyphicon glyphicon-menu-up jiantou"></span></a>
		<script src="static/js/jquery-3.1.1.min.js"></script>
		<script src="static/js/main.js"></script>
		<script src="static/js/bootstrap.min.js"></script>
		<script src="static/js/TouchSlide.1.1.js"></script>
		<script src="static/js/owl.carousel.js"></script>
		<script src="static/js/jquery.cubeportfolio.min.js"></script>
		<script src="static/js/portfolio-masonry-4col.js"></script>
		<script>
			TouchSlide({
				slideCell: "#slideBox",
				titCell: ".hd li",
				mainCell: ".bd ul",
				effect: "leftLoop"
				//				autoPlay:true//自动播放
			});
			TouchSlide({
				slideCell: "#news_slide",
				mainCell: ".bd ul",
				effect: "leftLoop",
				autoPlay: true //自动播放
			});
		</script>
	</body>

</html>

备注:部分资源来自网络收集整理、侵权立删。

好了,今天就到这儿吧,小伙伴们点赞、收藏、评论,一键三连走起呀,我们下期见~

  • 29
    点赞
  • 66
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

java水泥工

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值