時(shí)間：2023-06-29 06:27:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-06-29 06:27:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
HTML學(xué)生個(gè)人網(wǎng)站作業(yè)設(shè)計(jì)：(寵物官網(wǎng)8頁(yè))——bootstarp響應(yīng)式含有輪播圖，響應(yīng)式頁(yè)面：?> ? 源碼獲取 文末聯(lián)系 ?Web前端開(kāi)發(fā)技術(shù) 描述 網(wǎng)頁(yè)設(shè)計(jì)題材，DIV+CSS 布局制作,HTML+CSS網(wǎng)頁(yè)設(shè)計(jì)期末課程大作業(yè) | 公司官網(wǎng)網(wǎng)站 | 企業(yè)官網(wǎng) | 酒店官網(wǎng) | 等網(wǎng)站的設(shè)計(jì)與制 | HTML期末大學(xué)生網(wǎng)頁(yè)設(shè)計(jì)作業(yè)，Web大學(xué)生網(wǎng)頁(yè)
在線(xiàn)咨詢(xún)
<!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號(hào)智谷創(chuàng)意工業(yè)園301</strong> </div> </div> </header> <!-- 導(dǎo)航欄 --> <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>首頁(yè)</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>關(guān)于我們</span></a> </li> <li> <a href="contact.html" title="Send Flowers"><span>聯(lián)系我們</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">聯(lián)系我們</a> <h3 class="white-text margin-0">我們的寵物服務(wù)更涵蓋了寵物的衣食住行醫(yī)療等方面。</h3> </div> </div> <!--主體 --> <div class="main" role="main"> <!-- 服務(wù) --> <div id="content" class="content full"> <div class="container"> <div class="row"> <div class="spacer-50"> <img src="picture/zhua.png"> <h2><span>——</span>我們的服務(wù)<span>——</span></h2> <p>美好的陪伴來(lái)自溫暖的生命</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"> 動(dòng)物是人類(lèi)的朋友。在這里，每一個(gè)熱愛(ài)寵物的人<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>法國(guó)斗牛犬</h3> <hr class="sm"> <span class="meta-data">聰明敏捷 開(kāi)朗不常吠</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">乖巧可愛(ài) 微笑天使</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">溫順好靜 對(duì)人友善</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>設(shè)備先進(jìn)</h3> <p>設(shè)施完備，設(shè)備先進(jìn)，為他們提供了最大化的日常生活便利。</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>專(zhuān)業(yè)團(tuán)隊(duì)</h3> <p>擁有多位教學(xué)經(jīng)驗(yàn)豐富的A級(jí)寵物美容老師和注冊(cè)寵物獸醫(yī)師任教</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>優(yōu)質(zhì)寵物用品</h3> <p>涉及囊括了寵物食品、醫(yī)療保健品、洗護(hù)用品、用品用具、窩包服飾、寵物玩具、美容工具等 </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;">寵物之戀，在于關(guān)愛(ài)，讓你的愛(ài)寵享受家的感覺(jué)</h2> </div> </div> </div> <!-- 我們的團(tuán)隊(duì) --> <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>我們的團(tuán)隊(duì)<span>——</span></h2> <p>憑借陣容強(qiáng)大的專(zhuān)家團(tuán)隊(duì)、媲美港臺(tái)的醫(yī)療設(shè)備、遵循規(guī)范、嚴(yán)謹(jǐn)?shù)淖鳂I(yè)流程，</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>執(zhí)業(yè)獸醫(yī)師，國(guó)際認(rèn)證資深寵物美容導(dǎo)師。</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級(jí)美容師，注冊(cè)獸醫(yī)師，理論與實(shí)踐經(jīng)驗(yàn)豐富。</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級(jí)寵物美容師，擅長(zhǎng)泰迪的各種造型。</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>寵物醫(yī)院主診，寵物美容培訓(xùn)中心講師。</p> </div> </div> </li> </ul> </div> </div> <!-- 萌寵資訊--> <div class="spacer-50"> <img src="picture/zhua.png"> <h2><span>——</span>萌寵資訊<span>——</span></h2> <p>從分享你我的養(yǎng)寵心情到愛(ài)寵人之間的經(jīng)驗(yàn)交流</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">幼犬為什么容易得犬瘟和細(xì)小</a> </h3> <p>剛從狗販子手里買(mǎi)來(lái)的小狗，抵抗力弱、環(huán)境惡劣、護(hù)理不當(dāng)，身體基礎(chǔ)很差。到家后...</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="#">如何給貓咪驅(qū)蟲(chóng)</a> </h3> <p>貓咪定期驅(qū)蟲(chóng)，是保障貓咪身體健康的一個(gè)重要的環(huán)節(jié)。尤其是剛進(jìn)家的流浪貓...</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="#">如何通過(guò)牙齒推斷貓咪的年齡</a> </h3> <p>貓咪的年齡，主要以犬牙齒的生長(zhǎng)情況、齒峰及牙齒的磨損程度、外形、顏色等綜合判定...</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="#">如何通過(guò)牙齒推斷貓咪的年齡</a> </h3> <p>貓咪的年齡，主要以犬牙齒的生長(zhǎng)情況、齒峰及牙齒的磨損程度、外形、顏色等綜合判定...</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="#">如何通過(guò)牙齒推斷貓咪的年齡</a> </h3> <p>貓咪的年齡，主要以犬牙齒的生長(zhǎng)情況、齒峰及牙齒的磨損程度、外形、顏色等綜合判定...</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">動(dòng)物是人類(lèi)的朋友</h3> <p>從分享你我的養(yǎng)寵心情到愛(ài)寵人之間的經(jīng)驗(yàn)交流，從網(wǎng)上購(gòu)物到在線(xiàn)醫(yī)療，寵物生活中涉及的方方面面，都在不斷努力將它們做到最好。在這里，每一個(gè)熱愛(ài)寵物的人，不但能找到他們想要的，而且能得到比他們想要的更多。</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"> <!-- 關(guān)于--> <div class="col-md-3 bot footer_widget"> <h5>關(guān)于我們</h5> <div class="footer-logo margin-20"> <a href="about.html" title="Obsequy"><img src="picture/logo.png" alt="Obsequy"></a> </div> <p>讓天下寵物得到人間關(guān)愛(ài)<br>是XX始終不變的企業(yè)愿景<br>這就是XX步步領(lǐng)先的秘訣所在</p> </div> <!-- 服務(wù) --> <div class="col-md-3 bot footer_widget"> <h5>我們的服務(wù)</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">聯(lián)系我們</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">法國(guó)斗牛犬</a></h6> <span>聰明敏捷 開(kāi)朗不常吠</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>乖巧可愛(ài) 微笑天使</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>關(guān)鍵詞：響應(yīng),學(xué)生,作業(yè),設(shè)計(jì)
客戶(hù)&案例
營(yíng)銷(xiāo)資訊
關(guān)于我們
客戶(hù)&案例
營(yíng)銷(xiāo)資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
