绿色简洁形式pc+wap女性口红美甲网页模板代码



2 6 3



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



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 欧美风 欧美 欧洲 美洲 pc+wap 移动+电脑 手机+电脑 绿色 大气 霸气 美容美发 美容 美发 美容店 美发店

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到