模板描述:绿色 简洁 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-->