时间：2023-06-29 06:27:01 | 来源：网站运营
时间：2023-06-29 06:27:01 来源：网站运营
HTML学生个人网站作业设计：(宠物官网8页)——bootstarp响应式含有轮播图，响应式页面：> ⛵ 源码获取 文末联系 ✈Web前端开发技术 描述 网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 | HTML期末大学生网页设计作业，Web大学生网页
在线咨询
<!DOCTYPE HTML><html class="no-js" lang="en-US"><head> <!-- Basic Page Needs ================================================== --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Home</title> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content=""> <!-- Mobile Specific Metas ================================================== --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- CSS ================================================== --> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <!-- Bootstrap --> <link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css"> <!-- Bootstrap Theme --> <link href="css/style.css" rel="stylesheet" type="text/css"> <!-- Style Css --> <link href="css/magnific-popup.css" rel="stylesheet" type="text/css"> <!-- Magnific Popup --> <link href="css/owl.carousel.css" rel="stylesheet" type="text/css"> <!-- Owl Carousel --> <link href="css/owl.theme.css" rel="stylesheet" type="text/css"> <!-- Owl Carousel Theme --> <!-- Color Style --> <link href="css/color1.css" rel="stylesheet" type="text/css"> <link href="http://www.ylcp.shop/files/files/1649494603089/css/custom.css" rel="stylesheet" type="text/css"> <!-- CUSTOM STYLESHEET FOR STYLING --> <!-- SCRIPTS ================================================== --> <script src="js/modernizr.js"></script> <!-- Modernizr --></head><body class="home"> <div class="body"> <!-- 头部 --> <header class="topbar"> <!-- 顶部 --> <div class="container"> <div class="header-info-col"> <i class="fa fa-phone"></i> <strong>0512-57995109 </strong> </div> <div class="header-info-col"> <i class="fa fa-envelope-o"></i> <strong><a href="javascript:;">Cindy@kindjob.cn</a></strong> </div> <div class="header-info-col"> <i class="fa fa-map-marker"></i> <strong>昆山市庆丰西路639号智谷创意工业园301</strong> </div> </div> </header> <!-- 导航栏 --> <header class="site-header-wrapper"> <div class="site-header"> <div class="container"> <div class="site-logo"> <a href="" title="Obsequy" class="default-logo"><img src="picture/logo.png" alt="Obsequy"></a> </div> <a href="#" id="menu-toggle"> <i class="fa fa-bars"></i> </a> <nav class="main-navigation pull-right"> <ul class="dd-menu sf-menu"> <li class="active"> <a href="" title="Home"><span>首页</span></a> </li> <li> <a href="kinds.html" title="About"><span>宠物品种</span></a> </li> <li> <a href="shop.html" title="Shop"><span>宠物用品</span></a> </li> <li> <a href="blog.html" title="Services"><span>萌宠资讯</span></a> </li> <li> <a href="about.html" title="Blog"><span>关于我们</span></a> </li> <li> <a href="contact.html" title="Send Flowers"><span>联系我们</span> <img src="picture/flower-e1476975452944.png" alt=""></a> </li> </ul> </nav> </div> </div> </header> <!-- 幻灯片--> <div class="hero-slider heroflex flexslider" data-autoplay="yes" data-pagination="no" data-arrows="yes" data-style="slide"> <ul class="slides"> <li style="background-image:url(picture/bg_slide2.jpg);"> </li> <li style="background-image:url(picture/bg_slide3.jpg);"> </li> </ul> </div> <div class="secondary-bg cta"> <div class="container"> <a href="contact.html" class="btn btn-default btn-transparent btn-rounded pull-right">联系我们</a> <h3 class="white-text margin-0">我们的宠物服务更涵盖了宠物的衣食住行医疗等方面。</h3> </div> </div> <!--主体 --> <div class="main" role="main"> <!-- 服务 --> <div id="content" class="content full"> <div class="container"> <div class="row"> <div class="spacer-50"> <img src="picture/zhua.png"> <h2><span>——</span>我们的服务<span>——</span></h2> <p>美好的陪伴来自温暖的生命</p> </div> <img src="picture/gou.png" alt=""> <div class="spacer-50"></div> </div> </div> <!-- 萌宠品种 --> <div class="parallax parallax1 padding-tb75" style="background:url(picture/b1.jpg);"> <div class="container"> <div class="row no-gutters secondary-bg"> <div class="col-md-3"> <div class="padding-all27"> <p class="white-text"> 动物是人类的朋友。在这里，每一个热爱宠物的人<br>不但能找到他们想要的，而且能得到比他们想要的更多。</p> <a href="kinds.html" title="" class="btn-all">所有品种 <i class="vc_btn3-icon fa fa-chevron-right"></i> </a> </div> </div> <div class="col-md-9 bg-white"> <div class="carousel-area"> <div class="carousel-wrapper-outer"> <h2>萌宠展示</h2> <!-- 萌宠展示 --> <div class="carousel-wrapper"> <div class="row"> <ul class="owl-carousel carousel-fw" data-columns="3" data-autoplay="" data-pagination="no" data-arrows="yes" data-single-item="no" data-items-desktop="3" data-items-desktop-small="3" data-items-tablet="2" data-items-mobile="1"> <li class="item"> <div class="grid-item obituary-grid-item obituary-carousel-item format-standard"> <a href="kinds.html" class="media-block"><img src="picture/img4-350x500.jpg" alt=""></a> <div class="grid-item-content"> <h3>法国斗牛犬</h3> <hr class="sm"> <span class="meta-data">聪明敏捷 开朗不常吠</span> </div> </div> </li> <li class="item"> <div class="grid-item obituary-grid-item obituary-carousel-item format-standard"> <a href="kinds.html" class="media-block"><img src="picture/img5-350x500.jpg" alt=""></a> <div class="grid-item-content"> <h3>金毛犬 </h3> <hr class="sm"> <span class="meta-data">热情友善 自信且不怕生</span> </div> </div> </li> <li class="item"> <div class="grid-item obituary-grid-item obituary-carousel-item format-standard"> <a href="kinds.html" class="media-block"><img src="picture/depositphotos_125040540_original-350x500.jpg" alt=""></a> <div class="grid-item-content"> <h3>萨摩耶 </h3> <hr class="sm"> <span class="meta-data">乖巧可爱 微笑天使</span> </div> </div> </li> <li class="item"> <div class="grid-item obituary-grid-item obituary-carousel-item format-standard"> <a href="kinds.html" class="media-block"><img src="picture/Depositphotos_6699049_original-350x500.jpg" alt=""></a> <div class="grid-item-content"> <h3>布偶猫</h3> <hr class="sm"> <span class="meta-data">温顺好静 对人友善</span> </div> </div> </li> <li class="item"> <div class="grid-item obituary-grid-item obituary-carousel-item format-standard"> <a href="kinds.html" class="media-block"><img src="picture/Depositphotos_67927599_original-350x500.jpg" alt=""></a> <div class="grid-item-content"> <h3>短毛猫</h3> <hr class="sm"> <span class="meta-data">生性聪明 性格温顺</span> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <!-- 我们的保障 --> <div class="container"> <div class="spacer-70"></div> <div class="spacer-50"> <img src="picture/zhua.png"> <h2><span>——</span>我们的保障<span>——</span></h2> </div> <div class="spacer-35"></div> <div class="row"> <div class="col-md-4 col-sm-4"> <div class="icon-box ibox-center ibox-secondary ibox-outline ibox-effect ibox-plain"> <div class="ibox-icon"> <i class="fa fa-microphone"></i> </div> <h3>设备先进</h3> <p>设施完备，设备先进，为他们提供了最大化的日常生活便利。</p> </div> </div> <div class="col-md-4 col-sm-4"> <div class="icon-box ibox-center ibox-secondary ibox-outline ibox-effect ibox-plain"> <div class="ibox-icon"> <i class="fa fa-gavel"></i> </div> <h3>专业团队</h3> <p>拥有多位教学经验丰富的A级宠物美容老师和注册宠物兽医师任教</p> </div> </div> <div class="col-md-4 col-sm-4"> <div class="icon-box ibox-center ibox-secondary ibox-outline ibox-effect ibox-plain"> <div class="ibox-icon"> <i class="fa fa-anchor"></i> </div> <h3>优质宠物用品</h3> <p>涉及囊括了宠物食品、医疗保健品、洗护用品、用品用具、窝包服饰、宠物玩具、美容工具等 </p> </div> </div> </div> <div class="spacer-35"></div> </div> <!-- 宠物之恋 --> <div class="banner parallax parallax2" style="background-image:url(picture/b2.jpg);"> <div class="accent-overlay"></div> <div class="banner-caption text-align-center"> <div class="container"> <h2 style="font-weight: 100;">宠物之恋，在于关爱，让你的爱宠享受家的感觉</h2> </div> </div> </div> <!-- 我们的团队 --> <div class="gray-bg"> <div class="container"> <div class="spacer-90"> <div class="spacer-90"> <div class="spacer-50"> <img src="picture/zhua.png"> <h2><span>——</span>我们的团队<span>——</span></h2> <p>凭借阵容强大的专家团队、媲美港台的医疗设备、遵循规范、严谨的作业流程，</p> </div> </div> </div> <div class="carousel-wrapper" style="margin-top: 70px;"> <div class="row"> <ul class="owl-carousel carousel-fw" data-columns="4" data-autoplay="" data-pagination="no" data-arrows="no" data-single-item="no" data-items-desktop="4" data-items-desktop-small="4" data-items-tablet="2" data-items-mobile="1"> <li class="item"> <div class="grid-item service-grid-item service-carousel-item format-standard"> <a class="media-box"><img src="picture/image4-500x320.jpg" alt=""></a> <div class="grid-item-content"> <h3 class="post-title"> <a>某某某</a> </h3> <hr class="sm"> <p>执业兽医师，国际认证资深宠物美容导师。</p> </div> </div> </li> <li class="item"> <div class="grid-item service-grid-item service-carousel-item format-standard"> <a class="media-box"><img src="picture/image1-500x320.jpg" alt=""></a> <div class="grid-item-content"> <h3 class="post-title"> <a>某某某</a> </h3> <hr class="sm"> <p>B级美容师，注册兽医师，理论与实践经验丰富。</p> </div> </div> </li> <li class="item"> <div class="grid-item service-grid-item service-carousel-item format-standard"> <a class="media-box"><img src="picture/image5-500x320.jpg" alt=""></a> <div class="grid-item-content"> <h3 class="post-title"> <a>某某某</a> </h3> <hr class="sm"> <p>A级宠物美容师，擅长泰迪的各种造型。</p> </div> </div> </li> <li class="item"> <div class="grid-item service-grid-item service-carousel-item format-standard"> <a class="media-box"><img src="picture/image6-500x320.jpg" alt=""></a> <div class="grid-item-content"> <h3 class="post-title"> <a>某某某</a> </h3> <hr class="sm"> <p>宠物医院主诊，宠物美容培训中心讲师。</p> </div> </div> </li> </ul> </div> </div> <!-- 萌宠资讯--> <div class="spacer-50"> <img src="picture/zhua.png"> <h2><span>——</span>萌宠资讯<span>——</span></h2> <p>从分享你我的养宠心情到爱宠人之间的经验交流</p> </div> <div class="spacer-35"></div> <div class="our-services"> <div class="carousel-wrapper padding-tb0"> <div class="row"> <ul class="owl-carousel carousel-fw" data-columns="2" data-autoplay="5000" data-pagination="yes" data-arrows="no" data-single-item="no" data-items-desktop="2" data-items-desktop-small="2" data-items-tablet="2" data-items-mobile="1"> <li class="item"> <div class="grid-item post-grid-item post-carousel-item format-standard"> <a href="#" class="media-box"> <img src="picture/img17-600x400.jpg"> </a> <div class="grid-item-content"> <div class="grid-post-date"> <span class="post-date">08</span> <span class="post-month">Nov</span> </div> <div class="grid-item-content-in"> <h3 class="post-title"> <a href="blog-show.html">幼犬为什么容易得犬瘟和细小</a> </h3> <p>刚从狗贩子手里买来的小狗，抵抗力弱、环境恶劣、护理不当，身体基础很差。到家后...</p> </div> </div> </div> </li> <li class="item"> <div class="grid-item post-grid-item post-carousel-item format-standard"> <a href="blog-show.html" class="media-box"> <img src="picture/new.jpg"> </a> <div class="grid-item-content"> <div class="grid-post-date"> <span class="post-date">08</span> <span class="post-month">Nov</span> </div> <div class="grid-item-content-in"> <h3 class="post-title"> <a href="#">如何给猫咪驱虫</a> </h3> <p>猫咪定期驱虫，是保障猫咪身体健康的一个重要的环节。尤其是刚进家的流浪猫...</p> </div> </div> </div> </li> <li class="item"> <div class="grid-item post-grid-item post-carousel-item format-standard"> <a href="blog-show.html" class="media-box"> <img src="picture/new1.jpg"> </a> <div class="grid-item-content"> <div class="grid-post-date"> <span class="post-date">08</span> <span class="post-month">Nov</span> </div> <div class="grid-item-content-in"> <h3 class="post-title"> <a href="#">如何通过牙齿推断猫咪的年龄</a> </h3> <p>猫咪的年龄，主要以犬牙齿的生长情况、齿峰及牙齿的磨损程度、外形、颜色等综合判定...</p> </div> </div> </div> </li> <li class="item"> <div class="grid-item post-grid-item post-carousel-item format-standard"> <a href="blog-show.html" class="media-box"> <img src="picture/img17-600x400.jpg"> </a> <div class="grid-item-content"> <div class="grid-post-date"> <span class="post-date">08</span> <span class="post-month">Nov</span> </div> <div class="grid-item-content-in"> <h3 class="post-title"> <a href="#">如何通过牙齿推断猫咪的年龄</a> </h3> <p>猫咪的年龄，主要以犬牙齿的生长情况、齿峰及牙齿的磨损程度、外形、颜色等综合判定...</p> </div> </div> </div> </li> <li class="item"> <div class="grid-item post-grid-item post-carousel-item format-standard"> <a href="blog-show.html" class="media-box"> <img src="picture/img17-600x400.jpg"> </a> <div class="grid-item-content"> <div class="grid-post-date"> <span class="post-date">08</span> <span class="post-month">Nov</span> </div> <div class="grid-item-content-in"> <h3 class="post-title"> <a href="#">如何通过牙齿推断猫咪的年龄</a> </h3> <p>猫咪的年龄，主要以犬牙齿的生长情况、齿峰及牙齿的磨损程度、外形、颜色等综合判定...</p> </div> </div> </div> </li> </ul> </div> </div> <div class="spacer-60"></div> </div> </div> </div> <!-- 朋友 --> <div class="secondary-bg cta clearfix "> <div class="container"> <div class="pic"> <img src="picture/dog.png" alt=""> </div> <div class="cont"> <h3 class="white-text margin-0">动物是人类的朋友</h3> <p>从分享你我的养宠心情到爱宠人之间的经验交流，从网上购物到在线医疗，宠物生活中涉及的方方面面，都在不断努力将它们做到最好。在这里，每一个热爱宠物的人，不但能找到他们想要的，而且能得到比他们想要的更多。</p> <a href="about.html" title="Shop Flowers Now" class="btn btn-default btn-transparent btn-rounded pull-right">了解更多</a> </div> <div class="friend"> <img alt="" src="picture/dog2.png"> <a href="about.html" title="" class="btn-all">了解更多 <i class="vc_btn3-icon fa fa-chevron-right"></i></a> </div> </div> </div> </div> </div> <!-- 尾部 --> <footer class="footer"> <div class="site-footer"> <div class="container"> <div class="row"> <!-- 关于--> <div class="col-md-3 bot footer_widget"> <h5>关于我们</h5> <div class="footer-logo margin-20"> <a href="about.html" title="Obsequy"><img src="picture/logo.png" alt="Obsequy"></a> </div> <p>让天下宠物得到人间关爱<br>是XX始终不变的企业愿景<br>这就是XX步步领先的秘诀所在</p> </div> <!-- 服务 --> <div class="col-md-3 bot footer_widget"> <h5>我们的服务</h5> <div class="menu-services"> <ul> <li><a href="kinds.html" title="Burial Services">宠物品种</a></li> <li><a href="blog.html" title="Catering Services">萌宠资讯</a></li> <li><a href="shop.html" title="Celebrating a Life">宠物用品</a></li> <li><a href="contact.html" title="Funeral Services">联系我们</a></li> </ul> </div> </div> <!-- 品种 --> <div class="col-md-3 bot footer_widget"> <h5>萌宠品种</h5> <div class="recent-post"> <ul> <li> <div class="recent-post-imgb"> <a href="kinds.html" title="recent post"><img src="picture/kinds(2).jpg"></a> </div> <div class="recent-post-txtb"> <h6><a href="kinds.html" title="Why you should plan ahead">法国斗牛犬</a></h6> <span>聪明敏捷 开朗不常吠</span> </div> </li> <li> <div class="recent-post-imgb"> <a href="kinds.html" title="recent post"><img src="picture/kinds(3).jpg"></a> </div> <div class="recent-post-txtb"> <h6><a href="kinds.html" title="What to do when a death occurs">金毛系列</a></h6> <span>热情友善 自信且不怕生</span> </div> </li> <li> <div class="recent-post-imgb"> <a href="kinds.html" title="recent post"><img src="picture/kinds(4).jpg"></a> </div> <div class="recent-post-txtb"> <h6><a href="kinds.html" title="Funeral Etiquettes you should remember">萨摩系列 </a></h6> <span>乖巧可爱 微笑天使</span> </div> </li> </ul> </div> <div class="spacer-30"></div> </div> </div> </div> </div> <!-- 底部 --> <div class="site-footer-bottom"> <div class="container"> <div class="row"> <div class="col-md-6 col-sm-6"> <p>XXX. XXX.</p> </div> <div class="col-md-6 col-sm-6"> <div class="social-icons-colored pull-right"> <ul> <li class="facebook"><a href="#" title="facebook"><i class="fa fa-facebook"></i></a></li> <li class="twitter"><a href="#" title="twitter"><i class="fa fa-twitter"></i></a></li> <li class="youtube"><a href="#" title="youtube"><i class="fa fa-youtube"></i></a></li> </ul> </div> </div> </div> </div> </div> </footer> <!-- 回到顶部 --> <a id="back-to-top"><i class="fa fa-arrow-up"></i></a> </div> <script src="js/jquery-2.2.3.min.js"></script> <!-- Jquery Library Call --> <script src="js/jquery.magnific-popup.min.js"></script> <!-- Maginific Popup Plugin --> <script src="js/ui-plugins.js"></script> <!-- UI Plugins --> <script src="js/helper-plugins.js"></script> <!-- Helper Plugins --> <script src="js/owl.carousel.min.js"></script> <!-- Owl Carousel --> <script src="js/bootstrap.js"></script> <!-- UI --> <script src="js/init.js"></script> <!-- All Scripts --> <script src="js/jquery.flexslider.js"></script> <!-- FlexSlider --> <!--<script src="js/jquery.mb.YTPlayer.js"></script>--></body></html>关键词：响应,学生,作业,设计
