📂文章目录
二、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。
三、🔗网站效果
▶️1.视频演示
U09-蓝色的宠物医院_宠物店网站模板
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<div class="main-container">
<!-- Header -->
<header class="header-main">
<!-- Top Header -->
<div class="top-header container-fluid no-padding">
<div class="col-md-4 col-sm-4 col-xs-4 no-padding color-red"></div>
<div class="col-md-4 col-sm-4 col-xs-4 no-padding color-green"></div>
<div class="col-md-4 col-sm-4 col-xs-4 no-padding color-yellow"></div>
<!-- Container -->
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-8 col-xs-6">
<p>Leave A Message: <a href="mailto:info@petcare.com">info@petcare.com</a></p>
</div>
<div class="social col-md-4 col-sm-4 col-xs-6 pull-right">
<ul class="no-bottom-margin">
<li><a href="#"><img src="images/icon/tw-ic.png" alt="Twitter" /></a></li>
<li><a href="#"><img src="images/icon/fb-ic.png" alt="Facebook" /></a></li>
<li><a href="#"><img src="images/icon/g+-ic.png" alt="Google pulse" /></a></li>
<li><a href="#"><img src="images/icon/dribbble-ic.png" alt="dribbler" /></a></li>
<li><a href="#"><img src="images/icon/in-ic.png" alt="In" /></a></li>
</ul>
</div>
</div>
</div>
<!-- container /- -->
</div><!-- Top Header /- -->
<!-- Logo Block -->
<div class="middle-header container-fluid no-padding">
<!-- Container -->
<div class="container">
<div class="row">
<div class="col-md-3 logo-block pull-left">
<a href="#">
<img src="images/logo.png" alt="Logo" />
</a>
</div>
<div class="col-md-9 pull-right">
<div class="location">
<img src="images/icon/location-ic.png" alt="Location" />
<p><span>Our Location</span> 50- Design Street, Texas</p>
</div>
<div class="time-scheduled">
<img src="images/icon/time-ic.png" alt="time" />
<p><span>Mon - Sat</span> 8 am - 10 pm</p>
</div>
<div class="phone">
<img src="images/icon/phone-ic.png" alt="phone" />
<p><span>Call Us</span> +1 (0) 234 56 789</p>
</div>
<div class="cart">
<a href="#"><img src="images/icon/cart-ic.png" alt="png" /><span>10</span></a>
</div>
</div>
</div>
</div><!-- Container /- -->
</div><!-- Logo Block /- -->
<nav class="navbar ow-navigation">
<div class="container">
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand logo-block">
<a href="#">
<img src="images/logo.png" alt="Logo" />
</a>
</div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li class="dropdown">
<a href="shop.html" title="product list" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">Shop</a>
<i class="ddl-switch fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li><a href="shop-pets.html">Pets List</a></li>
<li><a href="shop-details.html">Product Details</a></li>
<li><a href="checkout.html">Place Order</a></li>
<li><a href="shop-cart.html">My Cart</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" title="Pages" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">Pages</a>
<i class="ddl-switch fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li><a href="error.html">Error</a></li>
</ul>
</li>
<li class="dropdown">
<a href="blog.html" title="Blog" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">Blog</a>
<i class="ddl-switch fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li><a href="single-blog.html">Single Blog</a></li>
</ul>
</li>
<li><a href="contact-us.html">Contact US</a></li>
</ul>
</div>
<a href="#">Get An Appointment</a>
</div>
</div>
</nav>
</header><!-- Header /- -->
<!-- Photo Slider -->
<div id="photo-slider" class="photo-slider container-fluid no-padding">
<!-- Main Carousel -->
<div id="main-slider" class="carousel slide carousel-fade col-offset-2" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/slider-image/slider-1.jpg" alt="slider-1"/>
<div class="slider-content">
<div class="container">
<div class="slide-content slide-content-1">
<h2>Dog cat pat care</h2>
<h3>We Take Good Care For<span>Your Lovely Pet</span></h3>
<p>Those were the days. And we know Flipper lives in a world full of wonder <span>flying there-under under the sea. The Love Boat soon will be making</span></p>
<a href="#" class="btn btn-default" title="Purchase">Purchase</a>
<a href="#" class="btn btn-default bg" title="Learn More">Learn More</a>
</div>
</div>
</div>
</div>
<div class="item">
<img src="images/slider-image/slider-2.jpg" alt="slider-2"/>
<div class="slider-content">
<div class="container">
<div class="slide-content slide-content-2">
<h3>We Take Good Care For Your Lovely Pets</h3>
<h2>Dog cat <span>pat care</span></h2>
<p>Those were the days. And we know Flipper lives in a world full of wonder <span>flying there-under under the sea. The Love Boat soon will be making</span></p>
<a href="#" class="btn btn-default" title="Purchase">Purchase</a>
<a href="#" class="btn btn-default bg" title="Learn More">Learn More</a>
</div>
</div>
</div>
</div>
<div class="item">
<img src="images/slider-image/slider-3.jpg" alt="slider-3"/>
<div class="slider-content">
<div class="container">
<div class="slide-content slide-content-3">
<h2>Dog cat <span>pat care</span></h2>
<p>Those were the days. And we know Flipper lives in a world full of wonder <span>flying there-under under the sea. The Love Boat soon will be making another</span> </p>
<a href="#" class="btn btn-default" title="Purchase">Purchase</a>
<a href="#" class="btn btn-default bg" title="Learn More">Learn More</a>
</div>
</div>
</div>
</div>
</div>
</div><!-- Main Carousel /- -->
</div><!-- Photo Slider /- -->
<!-- Intro -->
<div id="intro" class="intro container-fluid no-padding">
<div class="section-padding"></div>
<!-- Container -->
<div class="container">
<!-- Section Header -->
<div class="section-header">
<h3>What We Do</h3>
<p>They will have to make the best of things its an uphill climb</p>
</div><!-- Section Header /- -->
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="pet-images bgcolor-default">
<img src="images/intro/intro-1.jpg" alt="intro-1">
<div class="content-box">
<h3>Pet wellness <span>We Take Care On Your Pet</span><i><img src="images/icon/intro-icon-1.png" alt="Intro Icon" /></i></h3>
<p> To a deluxe apartment in the sky. And we'll do it our way yes our way make all our dreams come true for me and you No phone no lights no motor</p>
<a href="#" title="Read More">Read More <i class="fa fa-angle-double-right"></i></a>
</div>
</div>
</div>
🏠CSS样式代码
.section-header h3,
.banner-heading > h3,
.ow-navigation .navbar-collapse > .nav.navbar-nav > li > a,
.newsletter-section form h3,
.footer-main .widget-title,
.photo-slider .slide-content h2,
.photo-slider .slide-content-3 h2,
.pet-images .content-box h3,
.pet-images .content-box a,
.appointment-form .btn-default,
.service-tab .nav-tabs > li > a,
.callout h3,
.why-choose-content .why-choose-hover h3,
.testimonial .item-content > h2,
.team-content h3,
.counter p,
.product-box:hover .cart,
.product-list .widget h3,
.single-product-detail .entry-summary .price,
.smart-price h2,
.entry-cover a.read-more,
.post-content .entry-title,
.post-content .entry-title a,
.section-title > h3,
.pagination li > a,
.widget-area .widget-title > h3,
.author-content > a,
.comment-section > h3,
.leave-comment > h3,
.what-we-do-content h3,
.price-box h3,
.price-box a,
.error-section h2,
.map-address,
.contact-form .btn-submit,
.btn-sign-in,
.btn-register,
.user-login > a,
.summary_table thead th,
.shop_cart thead th,
.summary_table .product-name a,
.shop_cart .product-name a,
.summary_table .product-subtotal,
.shop_cart .product-subtotal,
.summary_table .product-price,
.shop_cart .product-price,
.payment-mode > a,
.shop_cart tfoot tr td a,
.code-box h3,
.code-box label,
.code-box input[type="submit"],
.wc-proceed-to-checkout p,
.wc-proceed-to-checkout h5 {
font-family: 'Montserrat', sans-serif;
}
/* - Padding/Margin */
.no-padding {
padding: 0;
}
.no-left-padding,
ul {
padding-left: 0;
}
.no-right-padding {
padding-right: 0;
}
.no-top-padding {
padding-top: 0;
}
.no-bottom-padding {
padding-bottom: 0;
}
.no-margin {
margin: 0;
}
.no-left-margin {
margin-left: 0;
}
.no-right-margin {
margin-right: 0;
}
.no-top-margin {
padding-top: 0;
}
