蓝色简洁形式pc+wap旅行相册图库网页模板代码



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

8 29 10



模板描述:蓝色 简洁形式 pc+wap 旅行相册。整站宽屏展示效果。鼠标移动在图片区域或者文字区域上有放大效果和展开效果。适用旅行相册等行业。同时兼容手机端和电脑网页端。

代码结构

1. 引入CSS

<link href="https://fonts.googleapis.com/css?family=Lato:700,300" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/normalize.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.lite.min.css" />
<link href="https://fonts.googleapis.com/css?family=Lato:700,300" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/normalize.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.lite.min.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/freewall.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle2.min.js"></script>
<script type="text/javascript" src="js/jquery.slimmenu.min.js"></script>
<script type="text/javascript" src="js/custom-script.min.js"></script>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/freewall.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle2.min.js"></script>
<script type="text/javascript" src="js/jquery.slimmenu.min.js"></script>
<script type="text/javascript" src="js/custom-script.min.js"></script>

3. HTML代码

<!DOCTYPE html>
<html>
<head>
    <!-- Your site title -->
    <title>Picku</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="Your site description" />
    <!-- Favicon Image. -->
    <link rel="icon" href="images/favicon.png" type="image/x-icon" />
    <!-- Google Web Font. -->
    <!-- Normalize v.3.0.0 - makes browsers render all elements more consistently. -->
    <!-- Stylesheet - to improve site's load speed, better use the minimized version.
         The unminified version is also included in package. -->
</head>
<body id="parent">
    <!-- All content (menu, main-entry, and footer) goes inside this container. -->
    <div class="main-container">
        <!-- Logo and menu inside this container. -->
        <div class="header">
            <div class="clearfix">
                <!-- Put your site logo here. Recommended size is 165px x 50px. -->
                <div class="float-left logo">
                    <h1>
                        <a href="#">
                            <img src="images/logo.png" alt="" />
                        </a>
                    </h1>
                </div>
                <!-- Top Menu Bar -->
                <div class="float-right">
                    <ul id="top-nav" class="slimmenu">
                        <!-- To create menu, type these...
                             <li>
                                 <a href="URL" target="open-iframe">Your Menu Item</a>
                             </li>
                             Note:
                             There's a fullscreen function in this template. To prevent fullscreen (if enabled) from exiting when user clicked a link,
                             put the linked web page into an iframe by using ... target="open-iframe" ...
                             The same goes for main-entry.
                        -->
                        <li>
                            <a href="#" target="open-iframe">About</a>
                        </li>
                        <li>
                            <a href="#" target="open-iframe">Clients</a>
                        </li>
                        <li>
                            <a href="#" target="open-iframe">Terms &amp; Conditions</a>
                        </li>
                        <li>
                            <a href="#" target="open-iframe">Contact</a>
                        </li>
                        <!-- This is the filter menu, to filter and display your works based on class name (usually named after a category) in main-entry.
                             To create filter, type these...
                             <a href="#" class="filter-label" data-filter=".cat-1"> (change .cat-1 accordingly)
                        -->
                        <li>
                            <a href="#">Filter Work</a>
                            <ul>
                                <li>
                                    <a href="#" class="filter-label active">All Category</a>
                                </li>
                                <li>
                                    <a href="#" class="filter-label" data-filter=".cat-1">Filter Category 1</a>
                                </li>
                                <li>
                                    <a href="#" class="filter-label" data-filter=".cat-2">Filter Category 2</a>
                                </li>
                                <li>
                                    <a href="#" class="filter-label" data-filter=".cat-3">Filter Category 3</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">Follow Us On</a>
                            <ul>
                                <li>
                                    <a href="#">Facebook</a>
                                </li>
                                <li>
                                    <a href="#">Twitter</a>
                                </li>
                                <li>
                                    <a href="#">Pinterest</a>
                                </li>
                                <li>
                                    <a href="#">Instagram</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" class="fullscreen tooltip" title="Go Full Screen">
                                <span class="pictogram">&#xe801;</span>
                            </a>
                            <a href="#" class="fullscreenExit tooltip" title="Exit Full Screen">
                                <span class="pictogram">&#xe802;</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- Main Entry. 
             All posts thumbnails and sliders go inside .main-entry div. All of them are grid based named sizeXX (XX represents number of column and row)
                size11 = 1 column x 1 row 
                size12 = 1 column x 2 rows
                size21 = 2 columns x 1 row
                size32 = 3 columns x 2 rows (I use this for inner page to show video or slideshow)
             The basic code are these...
                <div class="brick tint size12 cat-1 cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-speed="500" data-fixpos="0-0">
                    // Your image
                    <img src="URL_to_image" alt="image text alternative" />
                    <div class="overlay">
                        <h3 class="project-title">Your Project Title</h3>
                        <p class="project-description">Your project description</p>
                        <a href="URL" class="open-project" target="open-iframe">OPEN <span class="pictogram">&#xe803;</span></a>
                    </div>
                </div>
             Legend:
             * Class:
                    brick = The grid. Must be included.
                    tint = To lighten the image. FYI, tint won't work on slideshow images. Optional.
                    size12 = Size of the grid. You can change this to size11, size21, or size32. Must be included.
                    cat-1 = For filter. Optional.
                    cycle-slideshow = To display slideshow. Optional.
             * data-cycle-fx = Slideshow effect. 
             * data-cycle-speed = Slideshow speed.
             // For more information, visit http://jquery.malsup.com/cycle2/api/
             * data-fixpos = To fixed position grid
             // For more information, visit http://www.vnjs.net/www/project/freewall/
             You can vary them all you want. See examples below for better understanding.
        -->
        <div id="freewall" class="free-wall">
            <div class="brick tint size11 cat-2">
                <img src="images/4538256461_96f9e70e9c_b.jpg" alt="" />
                <div class="overlay">
                    <h3 class="project-title">Your Project Title</h3>
                    <p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <a href="single-page-lite1.html" class="open-project" target="open-iframe">OPEN <span class="pictogram">&#xe803;</span></a>
                </div>
            </div>
            <div class="brick tint size11 cat-3">
                <img src="images/2310704408_361758fa28_b.jpg" alt="" />
                <div class="overlay">
                    <h3 class="project-title">Your Project Title</h3>
                    <p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <a href="single-page-lite2.html" class="open-project" target="open-iframe">OPEN <span class="pictogram">&#xe803;</span></a>
                </div>
            </div>
            <div class="brick tint size11 cat-2">
                <img src="images/3084871415_da49ab66ea_o.jpg" alt="" />
                <div class="overlay">
                    <h3 class="project-title">Your Project Title</h3>
                    <p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <a href="single-page-lite3.html" class="open-project" target="open-iframe">OPEN <span class="pictogram">&#xe803;</span></a>
                </div>
            </div>
            <!-- This is the slideshow for images -->
            <div class="brick size12 cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-speed="500" data-fixpos="0-3">
                <!-- Your slideshow images -->
                <img src="images/5226290116_1409794022_b.jpg" alt="" />
                <img src="images/8098729514_fa1919474d_b.jpg" alt="" />
                <img src="images/3919137679_dc05b59927.jpg" alt="" />
            </div>
            <div class="brick size11" data-fixpos="1-0">
                <!-- For text only, put your heading/paragraph inside div .cover -->
                <div class="cover">
                    <p>
                        <strong>Hello!</strong>
                    </p>
                    <p>Welcome to my portfolio. I'm Jane Doe, a 20-something photographer with passion for composition and beauty.</p>
                    <p>Feel free to explore my works. And contact me for photo queries.</p>
                </div>
            </div>
            <div class="brick tint size12 cat-3">
                <img src="images/4414454672_e91f887d34_o.jpg" alt="" />
                <div class="overlay">
                    <h3 class="project-title">Your Project Title</h3>
                    <p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <a href="single-page-lite1.html" class="open-project" target="open-iframe">OPEN <span class="pictogram">&#xe803;</span></a>
                </div>
            </div>
            <div class="brick size11 cycle-slideshow client-number" data-cycle-fx="scrollHorz" data-cycle-speed="200" data-fixpos="1-2">
                <img src="images/3346647884_a47c71fd9a_o.jpg" alt="" />
                <img src="images/1452336320_483f721d3d_o.jpg" alt="" />
                <img src="images/4538256461_96f9e70e9c_b.jpg" alt="" />
                <img src="images/2310704408_361758fa28_b.jpg" alt="" />
                <div class="client">
                    <div class="number">365</div>
                    <div class="client-text">Happy Clients and Counting</div>
                    <div class="client-text">
                        <a href="#">
                            <strong>BE ONE!</strong>
                        </a>
                    </div>
                </div>
            </div>
            <div class="brick tint size11 cat-1">
                <img src="images/5171071313_e4c110ccb2_b.jpg" alt="" />
                <div class="overlay">
                    <h3 class="project-title">Your Project Title</h3>
                    <p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <a href="single-page-lite2.html" class="open-project" target="open-iframe">OPEN <span class="pictogram">&#xe803;</span></a>
                </div>
            </div>
            <!-- This is the slideshow for text. Wrap your text inside div .cover -->
            <div class="brick size11 cycle-slideshow" data-cycle-fx="fade" data-cycle-speed="900" data-cycle-slides="> div" data-fixpos="2-2">
                <div class="cover">
                    <h2>" Odipiscing aliquet. Nulla venenatis. In pede mi, aliquet sit amet, euismod in quis neque in neque sagittis scelerisque. Fusce quis quam mollis, varius diam at, tempus mi "</h2>
                    <p>Vivamus dictum</p>
                </div>
                <div class="cover">
                    <h2>" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed quam facilisis, condimentum nibh eu, hendrerit purus. Ut ut malesuada odio, nec ultricies nisi "</h2>
                    <p>Morbi tempor</p>
                </div>
                <div class="cover">
                    <h2>" Suspendisse malesuada lacus nunc, eu sagittis arcu egestas non. Morbi tempor tempus lobortis. Aenean aliquet dui ipsum, eget ullamcorper nisl ornare ut. Suspendisse in vestibulum sapien "</h2>
                    <p>consectetur</p>
                </div>
            </div>
            <div class="brick tint size11 cat-2">
                <img src="images/4171682579_91f75f9a6a_o.jpg" alt="" />
                <div class="overlay">
                    <h3 class="project-title">Your Project Title</h3>
                    <p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <a href="single-page-lite1.html" class="open-project" target="open-iframe">OPEN <span class="pictogram">&#xe803;</span></a>
                </div>
            </div>
            <div class="brick tint size11 cat-1">
                <img src="images/1330348274_33c00c4886_o.jpg" alt="" />
                <div class="overlay">
                    <h3 class="project-title">Your Project Title</h3>
                    <p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <a href="single-page-lite2.html" class="open-project" target="open-iframe">OPEN <span class="pictogram">&#xe803;</span></a>
                </div>
            </div>
            <div class="brick tint size21 cat-3">
                <img src="images/4613181397_78853da480_b.jpg" alt="" />
                <div class="overlay">
                    <h3 class="project-title">Your Project Title</h3>
                    <p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <a href="single-page-lite1.html" class="open-project" target="open-iframe">OPEN <span class="pictogram">&#xe803;</span></a>
                </div>
            </div>
            <div class="brick tint size11 cat-1">
                <img src="images/261980228_495975b20b_o.jpg" alt="" />
                <div class="overlay">
                    <h3 class="project-title">Your Project Title</h3>
                    <p class="project-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <a href="single-page-lite2.html" class="open-project" target="open-iframe">OPEN <span class="pictogram">&#xe803;</span></a>
                </div>
            </div>
        </div>
        <!-- Footer -->
        <div class="footer">
            <div class="float-right copyright">
                <p>Copyright &copy; 2019.Company name All rights reserved.<a target="_blank" href="http://sc.51qianduan.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
            </div>
        </div>
    </div>
    <!-- All links from this homepage will be opened in this iframe, to prevent fullscreen (if enabled) from exiting if the user clicked on a link. -->
    <iframe id="open-iframe" name="open-iframe"></iframe>
    <!-- Scripts -->
</body>
</html>



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


热门标签: 扁平化 宽屏全屏 黑色 蓝色 欧美风 红色 中国风 绿色 韩系 灰色 日系 简洁简约 黄色 炫酷 紫色 卡通动画 橙色 精美 实用通用 艺术创意 粉色 大气 白色 棕色 清新 彩色 绘画 其他风格 风格类型 颜色色彩

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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