大家好，我是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>