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

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

大家好,我是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">
		
		
		
	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>   宠物咨询:0512-6500-1280P>
				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">Previousspan>
			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">Nextspan>
			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 Usspan>
					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 Servicespan>
						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 Equipmentspan>
						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 blackdiv>
											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">美容spadiv>
												<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">spadiv>
												<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>
		
		<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 Encyclopediaspan>
					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-14p>
									<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-18p>
									<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-17p>
									<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 Teamspan>
					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 LIp>
								<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 LIp>
								<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 LIp>
								<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 LIp>
								<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 LIp>
								<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">技术支持:   
					<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>

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

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

欢迎分享,转载请注明来源:内存溢出

原文地址:http://outofmemory.cn/web/1298558.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-06-10
下一篇2022-06-10

随机推荐

  • 南阿拉巴马大学毕业后好找工作吗

      南阿拉巴马大学毕业后好找工作吗?请咨询立思辰留学360美国专家团队。学校概况建校年代:1964年所在国家:美国所在省州:阿拉巴马州所在城市:Mobile学生人数:14279人中国教育部是否认证:获

  • 明尼苏达大学毕业后好找工作吗

      明尼苏达大学毕业后好找工作吗?请咨询立思辰留学360美国专家团队。立思辰留学360介绍,明尼苏达大学(University of Minnesota, Twin Cities),简称U of M或

    2022-07-01
    100
  • 爱丁堡大学华人校友有哪些

    作为世界一流学校,爱丁堡大学和中国有着频繁的学术交流。从19世纪50年代第一位留英学生黄宽到21世纪在中国“非典”时期作出杰出贡献的钟南山,爱丁堡大学为中国培养了许多杰出的人才。最尊贵的中国人辜鸿铭立

    2022-07-01
    000
  • 爱丁堡龙比亚大学与哥比亚大学哪个好

      爱丁堡龙比亚大学与哥比亚大学哪个好?具体请咨询立思辰留学360专业顾问团队,咨询电话:4008-941-360爱丁堡龙比亚大学留学360介绍,龙比亚大学位于苏格兰的首府爱丁堡市。爱丁堡是英国的主要

    2022-07-01
    000
  • 曼谷大学在全世界大学中排名多少位

      曼谷大学在全世界大学中排名多少位?请咨询立思辰留学360泰国专家团队。曼谷大学曼谷大学是一所实力强劲的私立大学,建立在泰国曼谷,是泰国建校最悠久、最有名气、规模最大的私立大学之一。目前学校拥有了一

    2022-07-01
    300
  • 2017年加拿大荷兰学院地理位置

    加拿大荷兰学院 - Holland College学校简介:立思辰留学360介绍,荷兰学院创立于1965年,是加拿大爱德华王子岛省的一所公立学院。学院开设70多个专业,提供多种技术性职业培训课程,现有

    2022-07-01
    800
  • 留学美国旧金山大学转学申请

    立思辰留学360介绍:旧金山大学(University of San Francisco)位于素有“西海岸门户”之称的旧金山市,成立于1855年,是一所具有百年声誉的优秀综合性大学,开设了17个本科专

    2022-07-01
    800
  • 西那瓦国际大学的概况

    西那瓦国际大学立思辰留学360介绍,西那瓦国际大学(ShinawatraUniversity)由泰国前总理他信·西那瓦投资创办于1996年,位于泰国。西那瓦国际大学的目标是成为一所注重研究、追求卓越的

    2022-07-01
    000
  • 泰国曼谷大学学费多少钱

    曼谷大学立思辰留学360介绍,曼谷大学创建于1962年,是一所实力强劲的私立大学,也是目前泰国成立最早、最有名气、规模最大的私立大学之一。目前学校拥有了一支世界各国专家、学者组成的高水平教师队伍,并与

    2022-07-01
    000

发表评论

登录后才能评论

评论列表(0条)

    保存