首页 > 分享 > web前端HTML5模板

web前端HTML5模板

萌宠菠菠乐园
2024-09-19 20:07

大家好，我是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-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><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">技术支持：   <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>

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602

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

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