模板描述：绿色 简洁 pc+wap 女性口红美甲 网页模板代码。绿色简洁形式pc+wap女性口红美甲网页模板代码HTML模板下载
代码结构
1. 引入CSS
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all"> <link href="css/font-awesome.css" rel="stylesheet"> <link href="css/style.css" rel='stylesheet' type='text/css' media="all"> <link href="http://fonts.googleapis.com/css?family=PT+Serif:400,400i,700,700i" rel="stylesheet"> <link href="http://fonts.googleapis.com/css?family=Poppins:400,500" rel="stylesheet">
2. 引入JS
<script src='js/jquery-2.2.3.min.js'></script> <script src="js/responsiveslides.min.js"></script> <script src="js/move-top.js"></script> <script src="js/easing.js"></script> <script src="js/bootstrap.min.js"></script>
3. HTML代码
<div class="header-outs" id="header">
<!--banner -->
<div class="header-w3layouts">
<div class="one-headder">
<!--//navigation section -->
<nav class="navbar navbar-expand-lg navbar-light">
<div class="hedder-up">
<ul>
<li>
<h1><a class="navbar-brand" href="index.html">Polish</a></h1>
</li>
<li>
<div class="sub-headder">
<h2><a href="index.html">Nail<br>Design</a></h2>
</div>
</li>
<li>
<div class="call-us">
<p>+123 567 89</p>
</div>
</li>
</ul>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav ">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a href="about.html" class="nav-link ">About</a>
</li>
<li class="nav-item">
<a href="service.html" class="nav-link">Service</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Pages
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="nav-link " href="typography.html">Typography</a>
<a href="gallery.html" class="nav-link">Gallery</a>
<a href="price.html" class="nav-link">Price</a>
</div>
</li>
<li class="nav-item">
<a href="contact.html" class="nav-link">Contact</a>
</li>
</ul>
</div>
</nav>
<!--//navigation section -->
<div class="clearfix"> </div>
</div>
</div>
<!-- //Navigation -->
<!-- Slideshow 4 -->
<div class="slider">
<div class="callbacks_container">
<ul class="rslides" id="slider4">
<li>
<div class="slider-img one-img">
<div class="container">
<div class="slider-info">
<div class="txt-caption">
<div class="binner-mid">
<h4>
Be Different with
Our Nail Design
</h4>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt </p>
<div class="outs_more-buttn">
<a href="about.html">Read More</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="slider-img two-img">
<div class="container">
<div class="slider-info">
<div class="txt-caption">
<div class="binner-mid">
<h4>Best Intensive Good Manicure </h4>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="outs_more-buttn">
<a href="about.html">Read More</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="slider-img three-img">
<div class="container">
<div class="slider-info">
<div class="txt-caption">
<div class="binner-mid">
<h4>Best Intensive Healing Pedicure</h4>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="outs_more-buttn">
<a href="about.html">Read More</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- This is here just to demonstrate the callbacks -->
<!-- <ul class="events">
<li>Example 4 callback events</li>
</ul>-->
<div class="clearfix"></div>
</div>
</div>
<!--//banner -->
<!-- about -->
<section class="about py-lg-4 py-md-3 py-sm-3 py-3">
<div class="container py-lg-5 py-md-4 py-sm-4 py-3">
<div class="jst-abut-wls mb-lg-4 mb-md-3 mb-3 ">
<h5>Why Our Clients
Choose Us
</h5>
<div class="line-w3ls-title mt-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
</div>
</div>
<div class="row its-abt-info">
<div class="col-lg-6 col-md-6 col-sm-6 about-list-w3layouts">
<div class="abt-icon-color">
<span class=" fa fa-thumbs-o-up mb-3" aria-hidden="true"></span>
</div>
<div class="abt-txt-sub">
<h4>Manicure</h4>
<div class="txt-para-list mt-3">
<p>delectus reiciendis maiores alias consequatur aut.maiores alias Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod</p>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 about-list-w3layouts">
<div class="abt-icon-color">
<span class=" fa fa-magic mb-3" aria-hidden="true"></span>
</div>
<div class="abt-txt-sub">
<h4>Pedicure</h4>
<div class="txt-para-list mt-3">
<p>delectus reiciendis maiores alias consequatur aut.maiores alias Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod</p>
</div>
</div>
</div>
</div>
<div class="row mt-lg-4 mt-3">
<div class="col-lg-6 col-md-6 col-sm-6 about-list-w3layouts">
<div class="abt-icon-color">
<span class="fa fa-spinner mb-3" aria-hidden="true"></span>
</div>
<div class="abt-txt-sub">
<h4>Paraffin Wax</h4>
<div class="txt-para-list mt-3">
<p>delectus reiciendis maiores alias consequatur aut.maiores alias Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod</p>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 about-list-w3layouts">
<div class="abt-icon-color">
<span class="fa fa-hand-paper-o mb-3" aria-hidden="true"></span>
</div>
<div class="abt-txt-sub">
<h4>Nail Art</h4>
<div class="txt-para-list mt-3">
<p>delectus reiciendis maiores alias consequatur aut.maiores alias Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--//about -->
<!-- service -->
<section class="service py-lg-4 py-md-3 py-sm-3 py-3">
<div class="container py-lg-5 py-md-5 py-sm-4 py-4">
<div class="title-hole-all">
<h3 class="title mb-2 text-center">Services</h3>
<div class="line-w3ls-title text-center mb-md-5 mb-sm-4 mb-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
</div>
<div class="row its-abt-info text-center">
<div class="col-lg-3 col-md-6 col-sm-6 ser-list-w3layouts">
<div class="ser-inner-sub">
<h4>Massage</h4>
<div class="service-icon-list mt-3">
<span class="text-dark fa fa-female mb-3" aria-hidden="true"></span>
<p>delectus reiciendis maiores alias consequatur aut.maiores alias</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 ser-list-w3layouts">
<div class="ser-inner-sub">
<h4>Paraffin Wax</h4>
<div class="service-icon-list mt-3">
<span class="fa fa-thumbs-o-up mb-3 text-dark" aria-hidden="true"></span>
<p>delectus reiciendis maiores alias consequatur aut.maiores alias</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 ser-list-w3layouts">
<div class="ser-inner-sub">
<h4>Skin Care</h4>
<div class="service-icon-list mt-3">
<span class="fa fa-female text-dark mb-3" aria-hidden="true"></span>
<p>delectus reiciendis maiores alias consequatur aut.maiores alias</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 ser-list-w3layouts">
<div class="ser-inner-sub">
<h4>Nail Art</h4>
<div class="service-icon-list mt-3">
<span class="text-dark fa fa-camera-retro mb-3" aria-hidden="true"></span>
<p>delectus reiciendis maiores alias consequatur aut.maiores alias</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--//service -->
<!-- partners -->
<section class="partners py-lg-4 py-md-3 py-sm-3 py-3">
<div class="container py-lg-5 py-md-5 py-sm-4 py-4">
<h3 class="title mb-2 text-center">Our Brands</h3>
<div class="line-w3ls-title text-center mb-md-5 mb-sm-4 mb-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
</div>
<div class="row text-center">
<div class="col-lg-3 col-md-3 col-sm-3 col-6 brands-wthree-icons">
<span class="fa fa-cc" aria-hidden="true"></span >
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-6 brands-wthree-icons">
<span class="fa fa-trademark" aria-hidden="true"></span >
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-6 brands-wthree-icons">
<span class="fa fa-creative-commons" aria-hidden="true"></span >
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-6 brands-wthree-icons">
<span class="fa fa-registered" aria-hidden="true"></span >
</div>
</div>
<div class="row text-center mt-lg-5 mt-mb-4 mt-3">
<div class="col-lg-4 col-md-4 col-sm-4 col-4 brands-wthree-icons">
<span class="fa fa-cc" aria-hidden="true"></span >
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4 brands-wthree-icons">
<span class="fa fa-registered" aria-hidden="true"></span >
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4 brands-wthree-icons">
<span class="fa fa-cc" aria-hidden="true"></span >
</div>
</div>
</div>
</section>
<!--//partners-->
<!--quote-->
<section class="quote py-lg-4 py-md-3 py-sm-3 py-3">
<div class="container py-lg-5 py-md-5 py-sm-4 py-4">
<div class="title-hole-all">
<h3 class="title mb-2 text-center">How Can We Help You ?</h3>
<div class="line-w3ls-title text-center mb-md-5 mb-sm-4 mb-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
</div>
<div class="outs_more-buttn text-center mt-lg-4 mt-3">
<a href="about.html">Contact Us</a>
</div>
</div>
</div>
</section>
<!--//quote-->
<!--blog-->
<section class="blog py-lg-4 py-md-3 py-sm-3 py-3">
<div class="container py-lg-5 py-md-5 py-sm-4 py-4">
<h3 class="title mb-2 text-center">Latest News</h3>
<div class="line-w3ls-title text-center mb-md-5 mb-sm-4 mb-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
</div>
<div class="row blog-bloged-about mb-lg-5 mb-md-4 mb-3">
<div class="col-lg-4 blog-wed-img">
<img src="images/g1.jpg" class="img-thumbnail" alt="">
</div>
<div class="col-lg-8 blog-wthree-info">
<div class="blog-matter mb-3">
<h6><a href="blog.html">Benefits of Manicure and Pedicure</a></h6>
</div>
<div class="news-date mt-3">
<ul>
<li><span class="fa fa-calendar" aria-hidden="true"></span><a href="blog.html">12/4/2019</a></li>
<li><span class="fa fa-tags"></span><a href="blog.html">5 Tags</a></li>
<li><span class="fa fa-comments"></span><a href="blog.html">5 Comments</a></li>
</ul>
</div>
<div class="event-blog-w3pvt mt-lg-5 mt-md-4 mt-3">
<p>Suspendisse tincidunt velit velit sagittis vehicula. Duis posuere mollis iaculis.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt </p>
</div>
</div>
</div>
<div class="row blog-bloged-about">
<div class="col-lg-4 blog-wed-img">
<img src="images/g2.jpg" class="img-thumbnail" alt="">
</div>
<div class="col-lg-8 blog-wthree-info">
<div class="blog-matter mb-3">
<h6><a href="blog.html">Easy-to-follow Beauty Tips for you</a></h6>
</div>
<div class="news-date mt-3">
<ul>
<li><span class="fa fa-calendar" aria-hidden="true"></span><a href="blog.html">12/4/2019</a></li>
<li><span class="fa fa-tags"></span><a href="blog.html">5 Tags</a></li>
<li><span class="fa fa-comments"></span><a href="blog.html">5 Comments</a></li>
</ul>
</div>
<div class="event-blog-w3pvt mt-lg-5 mt-md-4 mt-3">
<p>Suspendisse tincidunt velit velit sagittis vehicula. Duis posuere mollis iaculis.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
</div>
</div>
</section>
<!--//blog-->
<!--tips-tops-->
<section class="tips-tops py-lg-4 py-md-3 py-sm-3 py-3">
<div class="container py-lg-5 py-md-5 py-sm-4 py-4">
<div class="row">
<div class="col-lg-6">
<div class="w3ls-beauty-tips text-center">
<h5>Take Care of Your Nails</h5>
<h6>Paint Theme Color Awesome!</h6>
</div>
</div>
<div class="col-lg-6 video-info-img">
<div class="video-left-w3l">
<iframe src=""></iframe>
</div>
</div>
</div>
</div>
</section>
<!--//tips-tops-->
<!--sing-in-->
<section class="sign-up py-lg-4 py-md-3 py-sm-3 py-3">
<div class="container py-lg-5 py-md-5 py-sm-4 py-4">
<h3 class="title mb-2 text-center">Sign Up Here</h3>
<div class="line-w3ls-title text-center mb-md-5 mb-sm-4 mb-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
</div>
<form action="#" method="post">
<div class="row wls-contact-mid">
<div class="col-md-4 form-group contact-forms">
<input type="text" class="form-control mb-0" placeholder=" Name" required="">
</div>
<div class="col-md-4 form-group contact-forms">
<input type="email" class="form-control mb-0" placeholder="Email" required="">
</div>
<div class="col-md-4 click-subscribe">
<button type="submit" class="btn btn-block click-me ">Sign Up</button>
</div>
</div>
</form >
</div>
</section>
<!--//sing-in-->
<footer class="py-lg-5 py-md-4 py-3">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-3 footer-bottom">
<h4> Service</h4>
<div class="footer-top mt-lg-4 mt-md-3 mt-3">
<ul >
<li>
<h6>Paraffin Wax</h6>
</li>
<li>
<h6>Massage</h6>
</li>
<li>
<h6>Skin Care</h6>
</li>
<li>
<h6>Nail Art</h6>
</li>
<li>
<h6>Manicure</h6>
</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-5 footer-bottom">
<h4> Contact Us</h4>
<div class="footer-top mt-lg-4 mt-md-3 mt-3">
<p class="pt-2"><span>Address</span> :Broome St,10002,<br>Canada New York City 90210.</p>
<p class="pt-2"> <span> Phone</span> :+(000) 123 4565 32</p>
<p class="pt-2"><span>Email</span> :<a href="https://www.51qianduan.com/">51前端</a>
</p>
</div>
</div>
<div class="col-lg-4 col-md-4 footer-bottom">
<h4>Social Icons</h4>
<div class="icons-footer mt-lg-4 mt-md-3 mt-3">
<ul>
<li><a href="#"><span class="fa fa-facebook"></span></a></li>
<li><a href="#"><span class="fa fa-twitter"></span></a></li>
<li><a href="#"><span class="fa fa-rss"></span></a></li>
<li><a href="#"><span class="fa fa-vk"></span></a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<div class="copy-bottom-txt text-center py-3">
<p>
Copyright © 2018.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a>
</p>
</div>
<!--js working-->
<!--//js working-->
<!--responsiveslides banner-->
<script>
// You can also use "$(window).load(function() {"
$(function () {
// Slideshow 4
$("#slider4").responsiveSlides({
auto: true,
pager:false,
nav:true ,
speed: 900,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
</script>
<!--// responsiveslides banner-->
<!-- start-smoth-scrolling -->
<script>
jQuery(document).ready(function ($) {
$(".scroll").click(function (event) {
event.preventDefault();
$('html,body').animate({
scrollTop: $(this.hash).offset().top
}, 900);
});
});
</script>
<!-- start-smoth-scrolling -->
<!-- here stars scrolling icon -->
<script>
$(document).ready(function () {
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1100,
easingType: 'linear'
};
$().UItoTop({
easingType: 'easeOutQuart'
});
});
</script>
<!-- //here ends scrolling icon -->
<!--bootstrap working-->
<!-- //bootstrap working-->
