婚纱网站主页参考代码

婚纱主页

<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="author" content="order by dede58.com/" />
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>主页</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="icon" type="image/png" href="img/favicon.png">
        <!-- Place favicon.ico in the root directory -->

        <!-- all css here -->
        <style>
            .mz {
            background: linear-gradient(rgba(24, 108, 150, 0.5),rgba(24,26,126,0.5));
            width: 250px;
            height: 200px;
            color: rgb(216, 112, 147);
            position: fixed;left:800px;top: 60px;
            font: 20px/180%"Microsoft YaHei","微软雅黑,宋体";
            text-align: center;
            z-index: 5;
        }
        </style>
        <!-- bootstrap v3.3.6 css -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <!-- animate css -->
        <link rel="stylesheet" href="css/animate.css">
        <!-- jquery-ui.min css -->
        <link rel="stylesheet" href="css/jquery-ui.min.css">
        <!-- meanmenu css -->
        <link rel="stylesheet" href="css/meanmenu.min.css">
        <!-- owl.carousel css -->
        <link rel="stylesheet" href="css/owl.carousel.css">
        <!-- font-awesome css -->
        <link rel="stylesheet" href="css/font-awesome.min.css">        
        <!-- nivo-slider CSS
        ============================================ -->          
        <link rel="stylesheet" href="inc/custom-slider/css/nivo-slider.css">
        <link rel="stylesheet" href="inc/custom-slider/css/preview.css">
        <!-- jQuery Carousel Evolution -->
        <link rel="stylesheet" href="inc/3dslider/css/style.css">
        <!-- style css -->
        <link rel="stylesheet" href="style.css">
        <!-- responsive css -->
        <link rel="stylesheet" href="css/responsive.css">
        <!-- modernizr css -->
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    </head>
    <body>
       
         


        <!-- Header Area Start Here -->
        <header>
            <div class="header-area">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                            <div class="logo-area">
                                <a href="index.html"><img src="img/logo.png" ></a>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                            <div class="main-menu-area">
                                <nav>
                                    <ul id="nav">
                                        <li><a href="index.html" style="padding:38px 9px;">主页</a></li> 
                                        <li><a href="about.html" style="padding: 38px 9px;">婚礼倒计时</a></li>
                                        <li><a href="services.html" style="padding: 38px 9px;">抽奖</a></li>                            
                                        <li><a href="blog.html" style="padding: 38px 9px;">故事相册</a></li>
                                        <li><a href="team.html" style="padding: 38px 9px;">婚纱放大镜子</a></li>
                                        <li><a href="contact.html" style="padding: 38px 9px;">心形特效</a></li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-3 hidden-sm hidden-xs text-right">
                            <div class="cart-area">
                                <ul>
                                    <li class="search-icons"><i class="fa fa-search" aria-hidden="true"></i>
                                        <div class="search-box">
                                        <form>
                                            <input type="text" class="search-text" placeholder="Search......" required>
                                        </form>
                                        </div>
                                    </li>
                                     <a href="index _EN .html"><span >EN</span></a>
                                </ul>
                                   
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mobile-menu-area">
              <div class="container">
                <div class="row">
                  <div class="col-md-12">
                    <div class="mobile-menu">
                      <nav id="dropdown">
                        <ul>
                            <li><a href="index.html" style="padding:38px 9px;">主页</a></li> 
                            <li><a href="about.html" style="padding: 38px 9px;">婚礼倒计时</a></li>
                            <li><a href="services.html" style="padding: 38px 9px;">抽奖</a></li>                            
                            <li><a href="blog.html" style="padding: 38px 9px;">故事相册</a></li>
                            <li><a href="team.html" style="padding: 38px 9px;">婚纱放大镜子</a></li>
                            <li><a href="contact.html" style="padding: 38px 9px;">心形特效</a></li>
                        </ul>
                      </nav>
                    </div>          
                  </div>
                </div>
              </div>
            </div>
        </header>
        <!-- Header Area End Here -->
        <!-- slider area-->
        <div class="slider-area">
            <div class="bend niceties preview-2">
                <div id="ensign-nivoslider" class="slides"> 
                    <img src="img/slider/slide1.jpg"  title="#slider-direction-1"  />
                    <img src="img/slider/slide2.jpg"  title="#slider-direction-2"  />
                    <img src="img/slider/slide3.jpg"  title="#slider-direction-3"  />
                </div>
                <!-- direction 1 -->
                <div id="slider-direction-1" class="t-cn slider-direction">
                     <div class="slider-content t-cn s-tb slider-1">
                        <div class="title-container s-tb-c title-compress">
                            <p>完美婚礼策划人</p>
                            <h1 class="title1">梦想成真</h1>
                            <div class="title2" >海誓山盟石比坚,珠联璧合情如蜜。亲朋争说好姻缘,宴尔新婚正妙年 </div>
                            <div class="read-more" >
                                <a href="#">Read More <i class="fa fa-angle-right" aria-hidden="true"></i></a>
                            </div>
                        </div>
                    </div>  
                </div>
                <!-- direction 2 -->
                <div id="slider-direction-2" class="slider-direction">
                    <div class="slider-content t-cn s-tb slider-2">
                        <div class="title-container s-tb-c">
                            <p>独属于两个人的未来</p>
                            <h1 class="title1">让我们给你们一个圆满的开始</h1>
                            <div class="title2" >绸缪束薪,三星在天。花开此际,共鉴佳年</div>
                            <div class="read-more" >
                                <a href="#">Read More <i class="fa fa-angle-right" aria-hidden="true"></i></a>
                            </div>
                        </div>
                    </div>  
                </div>
                <!-- direction 1 -->
                <div id="slider-direction-3" class="t-cn slider-direction">
                     <div class="slider-content t-cn s-tb slider-1">
                        <div class="title-container s-tb-c title-compress">
                            <p>创意婚礼策划人</p>
                            <h1 class="title1">我们会给你一个梦中的婚礼</h1>
                            <div class="title2" >柳绿桃红莺燕语,吉日良辰,遍洒烟花雨;喧天鼓乐笙歌缕,好友亲朋,贺语齐声聚;比翼双飞开新宇,瑟琴和奏神仙侣。</div>
                            <div class="read-more" >
                                <a href="#">Read More <i class="fa fa-angle-right" aria-hidden="true"></i></a>
                            </div>
                        </div>
                    </div>  
                </div>
            </div>
        </div>
        <!-- slider end-->
        <!-- Home Page Our Service Section Area Start Here -->
        <div class="home-our-service-area section-spacing">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-md-md-12 col-sm-12 col-xs-12 text-center">                        
                        <div class="template-section-area">
                            <h2>我们做什么</h2>
                            <p> 我们了解你们的故事,做属于你们的婚礼</p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 col-md-md-4 col-sm-4 col-xs-12 text-center">
                        <div class="total-single-service-area">
                            <div class="single-services-area">
                                <div class="service-icon">
                                    <img src="img/services/service1.png" >
                                </div>
                                <h3><a href="single-services.html">计划制订</a></h3>
                                <p>当婚礼成为一种艺术</p>
                                <div class="read-more">
                                    <a href="single-services.html">Read More</a>
                                </div>    
                            </div>
                        </div>
                    </div> 
                    <div class="col-lg-4 col-md-md-4 col-sm-4 col-xs-12 text-center">
                        <div class="total-single-service-area">
                            <div class="single-services-area">
                                <div class="service-icon">
                                    <img src="img/services/service2.png" >
                                </div>
                                <h3><a href="single-services.html">现场装饰</a></h3>
                                <p>不同风格妆点你们的浪漫童话</p>
                                <div class="read-more">
                                    <a href="single-services.html">Read More</a>
                                </div>    
                            </div>
                        </div>
                    </div> 
                    <div class="col-lg-4 col-md-md-4 col-sm-4 col-xs-12 text-center">
                        <div class="total-single-service-area">
                            <div class="single-services-area">
                                <div class="service-icon">
                                    <img src="img/services/service3.png" >
                                </div>
                                <h3><a href="single-services.html">咨询</a></h3>
                                <p>欢迎来咨询我们,这将是一场美好的邂逅</p>
                                <div class="read-more">
                                    <a href="single-services.html">Read More</a>
                                </div>    
                            </div>
                        </div>
                    </div> 
                </div>
            </div>
        </div>
      
            </div>
        </div>
        <!-- Home Page Our Service Area End Here -->
        <!-- Home Page Banner Area Start Here -->
        <div class="home-page-banner-area">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-md-md-12 col-sm-12 col-xs-12 text-center">
                        <h1>We Make Your Dream Come Ture</h1>
                    </div>
                </div>
            </div>
        </div>
            </div>
        </div>
        <!-- Home Page Blog End Here -->
        <!-- Footer Area Start Here -->
        <footer>
            <div class="footer-top-area">
                <div class="container">
                    <div class="row">
                         <div class="col-lg-4 col-md-md-4 col-sm-4 col-xs-12 text-center">
                            <div class="single-footer">
                                <ul>
                                    <li><i class="fa fa-phone" aria-hidden="true"></i> +12345678910</li>
                                </ul>
                            </div>
                         </div>
                         <div class="col-lg-4 col-md-md-4 col-sm-4 col-xs-12 text-center">
                            <div class="single-footer">
                                <a href="indexhtml"><img src="img/footer/footer-logo.png" ></a>
                            </div>
                         </div>
                         <div class="col-lg-4 col-md-md-4 col-sm-4 col-xs-12 text-center">
                            <div class="single-footer">                                
                                <ul>
                                    <li><i class="fa fa-envelope-o" aria-hidden="true"></i> weddingrevel@gmail.com</li>
                                </ul>
                            </div>
                         </div>
                    </div>
                </div>
            </div>
            <div class="footer-bottom-area">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-6 col-md-md-6 col-sm-6 col-xs-12 text-left">
                            <div class="footer-bottom-left">
                                <p>Copyright &copy; 2017.Company name All rights reserved.</p>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-md-6 col-sm-6 col-xs-12 text-right">
                            <div class="footer-bottom-right">
                                <ul>
                                    <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                                    <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
                                    <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
                                    <li><a href="#"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li>
                                    <li><a href="#"><i class="fa fa-skype" aria-hidden="true"></i></a></li>
                                    <li><a href="#"><i class="fa fa-youtube-play" aria-hidden="true"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- Footer Area End Here -->
        <!-- all js here -->
        <!-- jquery latest version -->
        <script src="js/vendor/jquery-1.12.0.min.js"></script>
        <!-- bootstrap js -->
        <script src="js/bootstrap.min.js"></script>
        <!-- owl.carousel js -->
        <script src="js/owl.carousel.min.js"></script>
        <!-- meanmenu js -->
        <script src="js/jquery.meanmenu.js"></script>
        <!-- jquery-ui js -->
        <script src="js/jquery-ui.min.js"></script>
        <!-- wow js -->
        <script src="js/wow.min.js"></script>
        <!-- nivo slider js -->
        <script src="inc/custom-slider/js/jquery.nivo.slider.js"></script>
        <script src="inc/custom-slider/home.js"></script>
        <!-- jQuery Carousel Evolution -->
        <script type="text/javascript" src="inc/3dslider/js/jquery.gallery.js"></script>
        <script type="text/javascript" src="inc/3dslider/js/modernizr.custom.53451.js"></script>
        <!-- plugins js -->
        <script src="js/plugins.js"></script>
        <!-- main js -->
        <script src="js/main.js"></script>
    </body>
</html>

同学们可以参考这个代码编写自己的网站

© 版权声明
THE END
喜欢就支持一下吧
点赞12 分享
JS教程刘珠文的头像-艺兴技术分享
评论 抢沙发

请登录后发表评论

    暂无评论内容