红色大气风格的模特摄影写真整站网站源码下载



6 22 8



模板描述:红色大气风格 模特摄影写真 整站网站,红色大气风格的模特摄影写真整站网站源码下载html模板下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/foundation.min.css">
<link rel="stylesheet" href="css/iso-style.css" />
<link rel="stylesheet" type="text/css" href="css/component.css">
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>

2. 引入JS

<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/toucheffects.js"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script src="js/foundation.min.js"></script>
<script src="js/jquery.dlmenu.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.interchange.js"></script>
<script src="js/foundation/foundation.abide.js"></script>
<script src="js/foundation/foundation.dropdown.js"></script>
<script src="js/foundation/foundation.placeholder.js"></script>
<script src="js/foundation/foundation.forms.js"></script>
<script src="js/foundation/foundation.alerts.js"></script>
<script src="js/foundation/foundation.magellan.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<script src="js/foundation/foundation.tooltips.js"></script>
<script src="js/foundation/foundation.clearing.js"></script>
<script src="js/foundation/foundation.cookie.js"></script>
<script src="js/foundation/foundation.joyride.js"></script>
<script src="js/foundation/foundation.orbit.js"></script>
<script src="js/foundation/foundation.section.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>

3. HTML代码

<!--Preload-->        
        <div id="spinner">
            <img src="img/spinner.png" alt="img" class="logo">
            <img src="img/line.png" alt="img" class="line">
        </div>        
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.51qianduan.com//chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->
        <!-- Menu side block -->
        <div class="sideNavi hide-for-small">
            <div class="sideInner">
                <div class="logoHolder">
                    <img src="img/logosmall.png" alt="">
                </div>
                <ul>                  
                    <li>
                        <div class="hi-icon-wrap hi-icon-effect-8">
                            <a href="index.html" class="hi-icon"><img src="img/home-icon.png" alt="">Home</a>
                        </div>  
                    </li>
                    <li>
                        <div class="hi-icon-wrap hi-icon-effect-8">
                            <a href="#" class="hi-icon"><img src="img/pages-icon.png" alt=""> Pages</a>
                        </div>
                        <ul>
                            <li><a href="about.html">About</a></li>
                            <li><a href="about02.html">About 02</a></li>
                            <li><a href="team.html">Team</a></li>
                            <li><a href="team02.html">Team 02</a></li>
                            <li><a href="services.html">Services</a></li>
                            <li><a href="services02.html">Services 02</a></li>
                            <li><a href="features.html">Features</a></li>
                            <li><a href="features02.html">Features 02</a></li>                            
                        </ul>
                    </li>
                    <li>
                        <div class="hi-icon-wrap hi-icon-effect-8">
                            <a href="#" class="hi-icon"><img src="img/portfolio-icon.png" alt=""> Portfolio</a>
                        </div>
                        <ul>
                            <li><a href="portfolio.html">Portfolio</a></li>
                            <li><a href="portfolio02.html">Portfolio Two</a></li>
                            <li><a href="portfolio03.html">Portfolio Three</a></li>
                            <li><a href="portfolio04.html">Portfolio Four</a></li>
                            <li><a href="portfolio-single.html">Portfolio Single</a></li>
                        </ul>                        
                    </li>
                    <li>
                        <div class="hi-icon-wrap hi-icon-effect-8">
                            <a href="#" class="hi-icon">
                            <img src="img/blog-icon.png" alt=""> Blog</a>
                        </div>
                        <ul>
                            <li><a href="blog.html">Blog</a></li>
                            <li><a href="blog02.html">Blog Two</a></li>
                            <li><a href="blog03.html">Blog Single</a></li>
                        </ul>                          
                    </li>                                                
                    <li>
                        <div class="hi-icon-wrap hi-icon-effect-8">
                            <a href="contact.php" class="hi-icon">
                            <img src="img/contact-icon.png" alt=""> Contact</a>
                        </div>
                    </li>                 
                </ul>
            </div>
        </div> 
        <!-- Masonry Container -->
        <div id="container">
        <!--Responsive menu-->        
            <div id="dl-menu" class="dl-menuwrapper item show-for-small">
                <button class="dl-trigger">Open Menu</button>
                <ul class="dl-menu">
                    <li><a href="index.html">Home</a></li>
                    <li>
                        <a href="#">Pages</a>
                        <ul class="dl-submenu">
                            <li><a href="about.html">About</a></li>
                            <li><a href="about02.html">About 02</a></li>
                            <li><a href="team.html">Team</a></li>
                            <li><a href="team02.html">Team 02</a></li>
                            <li><a href="services.html">Services</a></li>
                            <li><a href="services02.html">Services 02</a></li>
                            <li><a href="features.html">Features</a></li>
                            <li><a href="features02.html">Features 02</a></li>   
                        </ul>
                    </li>
                    <li>
                        <a href="#">Portfolio</a>
                        <ul class="dl-submenu">
                            <li><a href="portfolio.html">Portfolio</a></li>
                            <li><a href="portfolio02.html">Portfolio Two</a></li>
                            <li><a href="portfolio03.html">Portfolio Three</a></li>
                            <li><a href="portfolio04.html">Portfolio Four</a></li>
                            <li><a href="portfolio-single.html">Portfolio Single</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Blog</a>
                        <ul class="dl-submenu">
                            <li><a href="blog.html">Blog</a></li>
                            <li><a href="blog02.html">Blog Two</a></li>
                            <li><a href="blog03.html">Blog Single</a></li>
                        </ul>
                    </li>
                    <li><a href="contact.php">Contact</a></li>
                </ul>
            </div><!-- /dl-menuwrapper -->
            <div class="item w2 red">
                <img src="img/image1.jpg" alt="">
                <div class="description">
                    <h4>welcome</h4>
                    <h1>Ampersand <span>theme</span> is great</h1>
                    <p>Nec habitasse. Magnis lorem in cum. Et? Rhoncus sociis magna. Massa ac elementum vel, odio et natoque porta nisi!</p>
                    <a class="readMore">Find out More</a>
                </div>
            </div>
            <div class="item">                
                <ul class="grid cs-style-3">
                    <li>
                        <figure>
                            <img src="img/image2.jpg" alt="">
                                <figcaption>
                                	<a href="img/image2.jpg" data-rel="prettyPhoto">
                                    <h3>Image Title</h3>
                                    <div class="readMore"></div>
                                	</a>
                                </figcaption>
                        </figure>
                    </li>                        
                </ul>                                    
            </div>
            <div class="item">                
                <ul class="grid cs-style-3">
                    <li>
                        <figure>
                            <img src="img/image3.jpg" alt="">
                                <figcaption>
                                <a href="img/image3.jpg" data-rel="prettyPhoto">
                                    <h3>Image Title</h3>
                                    <div class="readMore"></div>
                                </a>
                                </figcaption>
                        </figure>
                    </li>                        
                </ul>                                    
            </div>  
            <div class="item w2 red">
                <div class="shadow">                
                <img src="img/image6.jpg" alt="">
                </div>                
                <div class="descriptionCenter">
                    <a class="play" href="http://vimeo.com/8245346" data-rel="prettyPhoto" title=""></a>
                    <h1>Movie <span>title</span></h1>
                    <p>Nec habitasse. Magnis lorem in cum. Et? Rhoncus sociis magna. Massa ac elementum vel, odio et natoque porta nisi!</p>
                </div>                
            </div>    
            <div class="item">                
                <ul class="grid cs-style-3">
                    <li>
                        <figure>
                            <img src="img/image4.jpg" alt="">
                                <figcaption>
                                <a href="img/image4.jpg" data-rel="prettyPhoto">
                                    <h3>Image Title</h3>
                                    <div class="readMore"></div>
                                 </a>
                                </figcaption>
                        </figure>
                    </li>                        
                </ul>                                    
            </div>
            <div class="item">                
                <ul class="grid cs-style-3">
                    <li>
                        <figure>
                            <img src="img/image5.jpg" alt="">
                                <figcaption>
                                <a href="img/image5.jpg" data-rel="prettyPhoto">
                                    <h3>Image Title</h3>
                                    <div class="readMore"></div>
                                </a>
                                </figcaption>
                        </figure>
                    </li>                        
                </ul>                                    
            </div>
            <div class="item footerItem">                
                <div class="socials"> 
                    <a href="#" class="facebook"></a>
                    <a href="#" class="twitter"></a>
                    <a href="#" class="vimeo"></a>
                    <a href="#" class="reddit"></a>
                    <a href="#" class="dribbble"></a>
                    <a href="#" class="behance"></a>
                    <a href="#" class="linkedin"></a>
                    <a href="#" class="rss"></a>
                    <a href="#" id="toTop" class="toTop">Back to top</a>
                </div> 
                <ul class="links">
                    <li>website by avathemes</li>
                    <li>all rights reserved 2013</li>
                    <li><a href="#">privacy policy</a></li>
                    <li><a href="#">support</a></li>
                    <li><a href="#">purchase now</a></li>
                    <li><a href="#">home</a></li>
                    <li><a href="#">pages</a></li>
                    <li><a href="#">portfolio</a></li>
                    <li><a href="#">blog</a></li>
                    <li><a href="#">contact</a></li>
                </ul>                                  
            </div>
        </div><!-- Container End -->
        <script src="js/jquery-1.9.1.min.js"></script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
        <script src="js/jquery.isotope.min.js"></script>
        <script src="js/modernizr.custom.js"></script>
        <script src="js/modernizr.custom.js"></script>
        <script src="js/toucheffects.js"></script>
        <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/foundation.min.js"></script>
        <script src="js/jquery.dlmenu.js"></script>
        <script>
            $(function() {
                $( '#dl-menu' ).dlmenu();
            });
        </script>        
  <!--
  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation/foundation.interchange.js"></script>
  <script src="js/foundation/foundation.abide.js"></script>
  <script src="js/foundation/foundation.dropdown.js"></script>
  <script src="js/foundation/foundation.placeholder.js"></script>
  <script src="js/foundation/foundation.forms.js"></script>
  <script src="js/foundation/foundation.alerts.js"></script>
  <script src="js/foundation/foundation.magellan.js"></script>
  <script src="js/foundation/foundation.reveal.js"></script>
  <script src="js/foundation/foundation.tooltips.js"></script>
  <script src="js/foundation/foundation.clearing.js"></script>
  <script src="js/foundation/foundation.cookie.js"></script>
  <script src="js/foundation/foundation.joyride.js"></script>
  <script src="js/foundation/foundation.orbit.js"></script>
  <script src="js/foundation/foundation.section.js"></script>
  <script src="js/foundation/foundation.topbar.js"></script>
  -->
  <script>
    $(document).foundation();
  </script>
  <script>
    $(window).load(function() {
    $('#container').isotope({
      masonry: {
         columnWidth: 1
      }
    });
    });
  </script>
  <script>
    $('.sideNavi').delay(2500).animate({left: 0});
  </script>
  <script>
    $("#toTop").click(function(e){
            e.preventDefault();
        $("html, body").animate({scrollTop: 0}, 1000);
     });
  </script> 
  <script type="text/javascript">
    jQuery(window).load(function ()
    {
        jQuery("a[data-rel^='prettyPhoto']").prettyPhoto({
            theme: 'dark_square', /* light_rounded / dark_rounded / light_square / dark_square / facebook */
        });
    });
  </script> 
  <!-- Preloader --><script type="text/javascript">// <![CDATA[
$(window).load(function() { $("#spinner").delay( 2000 ).fadeOut("slow"); })
// ]]></script>       



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 欧美风 欧美 欧洲 美洲 pc+wap 移动+电脑 手机+电脑 红色 简洁 简约 简单 摄影 婚纱摄影 摄影公司 婚纱摄影公司

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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