使用Bookblock实现的在线书籍内容预览功能

“Look Inside” Book Preview with BookBlock 点击图片下方的“Look Inside”按钮，会打开书本，弹出内容预览窗口，左右箭头用来翻页。点击图片下方的“Details”按钮，出现一个3D效果的详情介绍卡片。可用于如当当网一样的在线杂志/报纸/电子书展览/电商网站。

模板，教程

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2657
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>
<html lang="en" class="no-js">

<body>
    <div id="scroll-wrap" class="container">
        <div class="main">
            <div id="bookshelf" class="bookshelf">
                <figure>
                    <div class="book" data-book="book-1"></div>
                    <div class="buttons"><a href="#">Look inside</a><a href="#">Details</a>
                    </div>
                    <figcaption>
                        <h2>9 Lives <span>Andrew Hudson</span></h2>
                    </figcaption>
                    <div class="details">
                        <ul>
                            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
                            <li>Graham Press</li>
                            <li>12.09.2010</li>
                            <li>397 pages</li>
                        </ul>
                    </div>
                </figure>
                <figure>
                    <div class="book" data-book="book-2"></div>
                    <div class="buttons"><a href="#">Look inside</a><a href="#">Details</a>
                    </div>
                    <figcaption>
                        <h2>Life of a worm <span>Will Flores</span></h2>
                    </figcaption>
                    <div class="details">
                        <ul>
                            <li>Understanding the life of a worm can be enlightening to anybody. Dive into the micro cosmos of a creeping and burrowing invertebrate and learn how a limbless little creature reaches happiness.</li>
                            <li>Graham Press</li>
                            <li>12.09.2010</li>
                            <li>397 pages</li>
                        </ul>
                    </div>
                </figure>
                <figure>
                    <div class="book" data-book="book-8"></div>
                    <div class="buttons"><a href="#">Look inside</a><a href="#">Details</a>
                    </div>
                    <figcaption>
                        <h2>Lemon Rainbow <span>Christa Hausmann</span></h2>
                    </figcaption>
                    <div class="details">
                        <ul>
                            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
                            <li>Graham Press</li>
                            <li>12.09.2010</li>
                            <li>397 pages</li>
                        </ul>
                    </div>
                </figure>
                <figure>
                    <div class="book" data-book="book-3"></div>
                    <div class="buttons"><a href="#">Look inside</a><a href="#">Details</a>
                    </div>
                    <figcaption>
                        <h2>Structure and Space <span>Carol Winter</span></h2>
                    </figcaption>
                    <div class="details">
                        <ul>
                            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
                            <li>Graham Press</li>
                            <li>12.09.2010</li>
                            <li>397 pages</li>
                        </ul>
                    </div>
                </figure>
                <figure>
                    <div class="book" data-book="book-4"></div>
                    <div class="buttons"><a href="#">Look inside</a><a href="#">Details</a>
                    </div>
                    <figcaption>
                        <h2>The Rock Enigma <span>Walter C. Hamilton</span></h2>
                    </figcaption>
                    <div class="details">
                        <ul>
                            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
                            <li>Graham Press</li>
                            <li>12.09.2010</li>
                            <li>397 pages</li>
                        </ul>
                    </div>
                </figure>
                <figure>
                    <div class="book" data-book="book-5"></div>
                    <div class="buttons"><a href="#">Look inside</a><a href="#">Details</a>
                    </div>
                    <figcaption>
                        <h2>An Introduction to Neural Science <span>Simon Abramovich</span></h2>
                    </figcaption>
                    <div class="details">
                        <ul>
                            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
                            <li>Graham Press</li>
                            <li>12.09.2010</li>
                            <li>397 pages</li>
                        </ul>
                    </div>
                </figure>
                <figure>
                    <div class="book" data-book="book-6"></div>
                    <div class="buttons"><a href="#">Look inside</a><a href="#">Details</a>
                    </div>
                    <figcaption>
                        <h2>Life in Transit <span>Marina Dokova</span></h2>
                    </figcaption>
                    <div class="details">
                        <ul>
                            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
                            <li>Graham Press</li>
                            <li>12.09.2010</li>
                            <li>397 pages</li>
                        </ul>
                    </div>
                </figure>
                <figure>
                    <div class="book" data-book="book-7"></div>
                    <div class="buttons"><a href="#">Look inside</a><a href="#">Details</a>
                    </div>
                    <figcaption>
                        <h2>Architecture <span>Ryan Cooper</span></h2>
                    </figcaption>
                    <div class="details">
                        <ul>
                            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
                            <li>Graham Press</li>
                            <li>12.09.2010</li>
                            <li>397 pages</li>
                        </ul>
                    </div>
                </figure>
                <figure>
                    <div class="book" data-book="book-9"></div>
                    <div class="buttons"><a href="#">Look inside</a><a href="#">Details</a>
                    </div>
                    <figcaption>
                        <h2>Digital Nomads <span>Kenny Garcia</span></h2>
                    </figcaption>
                    <div class="details">
                        <ul>
                            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
                            <li>Graham Press</li>
                            <li>12.09.2010</li>
                            <li>397 pages</li>
                        </ul>
                    </div>
                </figure>
            </div>
        </div>
        
        <div class="related">
            <h3>If you enjoyed this demo you might also like:</h3>
            <a href="https://tympanus.net/Development/AnimatedBooks/">
                <img src="https://tympanus.net/codrops/wp-content/uploads/2013/07/AnimatedBooks1-300x162.png" />
                <h3>Animated Books</h3>
            </a>
            <a href="https://tympanus.net/Development/3DBookShowcase/">
                <img src="https://tympanus.net/codrops/wp-content/uploads/2013/01/3DBookShowcase_Main-300x162.jpg" />
                <h3>3D Book Showcase</h3>
            </a>
        </div>
    </div>

<div class="bb-custom-wrapper" id="book-1">
        <div class="bb-bookblock">
            <div class="bb-item">
                <div class="bb-custom-side page-layout-3">
                    <div>
                        <h3>Portraits</h3>
                        <p>Photography (1999 &ndash; 2013)</p>
                    </div>
                </div>
                <div class="bb-custom-side page-layout-3">
                </div>
            </div>
            <div class="bb-item">
                <div class="bb-custom-side page-layout-1">
                    <h3>
                            Chapter 9 <span>Nomadic Lifestyle</span>
                        </h3>
                </div>
                <div class="bb-custom-side page-layout-1">
                    <p>Candy canes lollipop macaroon marshmallow gummi bears tiramisu. Dessert croissant cupcake candy canes. Bear claw faworki faworki lemon drops. Faworki marzipan sugar plum jelly-o marzipan cookie.</p>
                </div>
            </div>
            <div class="bb-item">
                <div class="bb-custom-side page-layout-2">
                    <div>
                        <h3>Aa</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                    <div>
                        <h3>Bb</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                </div>
                <div class="bb-custom-side page-layout-2">
                    <div>
                        <h3>Cc</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                    <div>
                        <h3>Dd</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                </div>
            </div>
        </div>
        
        <nav>
            <a href="#" class="bb-nav-prev">Previous</a>
            <a href="#" class="bb-nav-next">Next</a>
            <a href="#" class="bb-nav-close">Close</a>
        </nav>
    </div>
    
    <div class="bb-custom-wrapper" id="book-2">
        <div class="bb-bookblock">
            <div class="bb-item">
                <div class="bb-custom-side page-layout-3">
                    <div>
                        <h3>Portraits</h3>
                        <p>Photography (1999 &ndash; 2013)</p>
                    </div>
                </div>
                <div class="bb-custom-side page-layout-3">
                </div>
            </div>
            <div class="bb-item">
                <div class="bb-custom-side page-layout-1">
                    <h3>
                            Chapter 9 <span>Nomadic Lifestyle</span>
                        </h3>
                </div>
                <div class="bb-custom-side page-layout-1">
                    <p>Candy canes lollipop macaroon marshmallow gummi bears tiramisu. Dessert croissant cupcake candy canes. Bear claw faworki faworki lemon drops. Faworki marzipan sugar plum jelly-o marzipan cookie.</p>
                </div>
            </div>
            <div class="bb-item">
                <div class="bb-custom-side page-layout-2">
                    <div>
                        <h3>Aa</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                    <div>
                        <h3>Bb</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                </div>
                <div class="bb-custom-side page-layout-2">
                    <div>
                        <h3>Cc</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                    <div>
                        <h3>Dd</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                </div>
            </div>
        </div>
        
        <nav>
            <a href="#" class="bb-nav-prev">Previous</a>
            <a href="#" class="bb-nav-next">Next</a>
            <a href="#" class="bb-nav-close">Close</a>
        </nav>
    </div>
    
    <div class="bb-custom-wrapper" id="book-3">
        <div class="bb-bookblock">
            <div class="bb-item">
                <div class="bb-custom-side page-layout-3">
                    <div>
                        <h3>Portraits</h3>
                        <p>Photography (1999 &ndash; 2013)</p>
                    </div>
                </div>
                <div class="bb-custom-side page-layout-3">
                </div>
            </div>
            <div class="bb-item">
                <div class="bb-custom-side page-layout-1">
                    <h3>
                            Chapter 9 <span>Nomadic Lifestyle</span>
                        </h3>
                </div>
                <div class="bb-custom-side page-layout-1">
                    <p>Candy canes lollipop macaroon marshmallow gummi bears tiramisu. Dessert croissant cupcake candy canes. Bear claw faworki faworki lemon drops. Faworki marzipan sugar plum jelly-o marzipan cookie.</p>
                </div>
            </div>
            <div class="bb-item">
                <div class="bb-custom-side page-layout-2">
                    <div>
                        <h3>Aa</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                    <div>
                        <h3>Bb</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                </div>
                <div class="bb-custom-side page-layout-2">
                    <div>
                        <h3>Cc</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                    <div>
                        <h3>Dd</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                </div>
            </div>
        </div>
        
        <nav>
            <a href="#" class="bb-nav-prev">Previous</a>
            <a href="#" class="bb-nav-next">Next</a>
            <a href="#" class="bb-nav-close">Close</a>
        </nav>
    </div>
    
    <div class="bb-custom-wrapper" id="book-4">
        <div class="bb-bookblock">
            <div class="bb-item">
                <div class="bb-custom-side page-layout-3">
                    <div>
                        <h3>Portraits</h3>
                        <p>Photography (1999 &ndash; 2013)</p>
                    </div>
                </div>
                <div class="bb-custom-side page-layout-3">
                </div>
            </div>
            <div class="bb-item">
                <div class="bb-custom-side page-layout-1">
                    <h3>
                            Chapter 9 <span>Nomadic Lifestyle</span>
                        </h3>
                </div>
                <div class="bb-custom-side page-layout-1">
                    <p>Candy canes lollipop macaroon marshmallow gummi bears tiramisu. Dessert croissant cupcake candy canes. Bear claw faworki faworki lemon drops. Faworki marzipan sugar plum jelly-o marzipan cookie.</p>
                </div>
            </div>
            <div class="bb-item">
                <div class="bb-custom-side page-layout-2">
                    <div>
                        <h3>Aa</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                    <div>
                        <h3>Bb</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                </div>
                <div class="bb-custom-side page-layout-2">
                    <div>
                        <h3>Cc</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                    <div>
                        <h3>Dd</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                </div>
            </div>
        </div>
        
        <nav>
            <a href="#" class="bb-nav-prev">Previous</a>
            <a href="#" class="bb-nav-next">Next</a>
            <a href="#" class="bb-nav-close">Close</a>
        </nav>
    </div>
    
    <div class="bb-custom-wrapper" id="book-5">
        <div class="bb-bookblock">
            <div class="bb-item">
                <div class="bb-custom-side page-layout-3">
                    <div>
                        <h3>Portraits</h3>
                        <p>Photography (1999 &ndash; 2013)</p>
                    </div>
                </div>
                <div class="bb-custom-side page-layout-3">
                </div>
            </div>
            <div class="bb-item">
                <div class="bb-custom-side page-layout-1">
                    <h3>
                            Chapter 9 <span>Nomadic Lifestyle</span>
                        </h3>
                </div>
                <div class="bb-custom-side page-layout-1">
                    <p>Candy canes lollipop macaroon marshmallow gummi bears tiramisu. Dessert croissant cupcake candy canes. Bear claw faworki faworki lemon drops. Faworki marzipan sugar plum jelly-o marzipan cookie.</p>
                </div>
            </div>
            <div class="bb-item">
                <div class="bb-custom-side page-layout-2">
                    <div>
                        <h3>Aa</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                    <div>
                        <h3>Bb</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                </div>
                <div class="bb-custom-side page-layout-2">
                    <div>
                        <h3>Cc</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                    <div>
                        <h3>Dd</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                </div>
            </div>
        </div>
        
        <nav>
            <a href="#" class="bb-nav-prev">Previous</a>
            <a href="#" class="bb-nav-next">Next</a>
            <a href="#" class="bb-nav-close">Close</a>
        </nav>
    </div>
    
    <div class="bb-custom-wrapper" id="book-6">
        <div class="bb-bookblock">
            <div class="bb-item">
                <div class="bb-custom-side page-layout-3">
                    <div>
                        <h3>Portraits</h3>
                        <p>Photography (1999 &ndash; 2013)</p>
                    </div>
                </div>
                <div class="bb-custom-side page-layout-3">
                </div>
            </div>
            <div class="bb-item">
                <div class="bb-custom-side page-layout-1">
                    <h3>
                            Chapter 9 <span>Nomadic Lifestyle</span>
                        </h3>
                </div>
                <div class="bb-custom-side page-layout-1">
                    <p>Candy canes lollipop macaroon marshmallow gummi bears tiramisu. Dessert croissant cupcake candy canes. Bear claw faworki faworki lemon drops. Faworki marzipan sugar plum jelly-o marzipan cookie.</p>
                </div>
            </div>
            <div class="bb-item">
                <div class="bb-custom-side page-layout-2">
                    <div>
                        <h3>Aa</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                    <div>
                        <h3>Bb</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                </div>
                <div class="bb-custom-side page-layout-2">
                    <div>
                        <h3>Cc</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                    <div>
                        <h3>Dd</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                </div>
            </div>
        </div>
        
        <nav>
            <a href="#" class="bb-nav-prev">Previous</a>
            <a href="#" class="bb-nav-next">Next</a>
            <a href="#" class="bb-nav-close">Close</a>
        </nav>
    </div>
    
    <div class="bb-custom-wrapper" id="book-7">
        <div class="bb-bookblock">
            <div class="bb-item">
                <div class="bb-custom-side page-layout-3">
                    <div>
                        <h3>Portraits</h3>
                        <p>Photography (1999 &ndash; 2013)</p>
                    </div>
                </div>
                <div class="bb-custom-side page-layout-3">
                </div>
            </div>
            <div class="bb-item">
                <div class="bb-custom-side page-layout-1">
                    <h3>
                            Chapter 9 <span>Nomadic Lifestyle</span>
                        </h3>
                </div>
                <div class="bb-custom-side page-layout-1">
                    <p>Candy canes lollipop macaroon marshmallow gummi bears tiramisu. Dessert croissant cupcake candy canes. Bear claw faworki faworki lemon drops. Faworki marzipan sugar plum jelly-o marzipan cookie.</p>
                </div>
            </div>
            <div class="bb-item">
                <div class="bb-custom-side page-layout-2">
                    <div>
                        <h3>Aa</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                    <div>
                        <h3>Bb</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                </div>
                <div class="bb-custom-side page-layout-2">
                    <div>
                        <h3>Cc</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                    <div>
                        <h3>Dd</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                </div>
            </div>
        </div>
        
        <nav>
            <a href="#" class="bb-nav-prev">Previous</a>
            <a href="#" class="bb-nav-next">Next</a>
            <a href="#" class="bb-nav-close">Close</a>
        </nav>
    </div>
    
    <div class="bb-custom-wrapper" id="book-8">
        <div class="bb-bookblock">
            <div class="bb-item">
                <div class="bb-custom-side page-layout-3">
                    <div>
                        <h3>Portraits</h3>
                        <p>Photography (1999 &ndash; 2013)</p>
                    </div>
                </div>
                <div class="bb-custom-side page-layout-3">
                </div>
            </div>
            <div class="bb-item">
                <div class="bb-custom-side page-layout-1">
                    <h3>
                            Chapter 9 <span>Nomadic Lifestyle</span>
                        </h3>
                </div>
                <div class="bb-custom-side page-layout-1">
                    <p>Candy canes lollipop macaroon marshmallow gummi bears tiramisu. Dessert croissant cupcake candy canes. Bear claw faworki faworki lemon drops. Faworki marzipan sugar plum jelly-o marzipan cookie.</p>
                </div>
            </div>
            <div class="bb-item">
                <div class="bb-custom-side page-layout-2">
                    <div>
                        <h3>Aa</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                    <div>
                        <h3>Bb</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                </div>
                <div class="bb-custom-side page-layout-2">
                    <div>
                        <h3>Cc</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                    <div>
                        <h3>Dd</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                </div>
            </div>
        </div>
        
        <nav>
            <a href="#" class="bb-nav-prev">Previous</a>
            <a href="#" class="bb-nav-next">Next</a>
            <a href="#" class="bb-nav-close">Close</a>
        </nav>
    </div>
    
    <div class="bb-custom-wrapper" id="book-9">
        <div class="bb-bookblock">
            <div class="bb-item">
                <div class="bb-custom-side page-layout-3">
                    <div>
                        <h3>Portraits</h3>
                        <p>Photography (1999 &ndash; 2013)</p>
                    </div>
                </div>
                <div class="bb-custom-side page-layout-3">
                </div>
            </div>
            <div class="bb-item">
                <div class="bb-custom-side page-layout-1">
                    <h3>
                            Chapter 9 <span>Nomadic Lifestyle</span>
                        </h3>
                </div>
                <div class="bb-custom-side page-layout-1">
                    <p>Candy canes lollipop macaroon marshmallow gummi bears tiramisu. Dessert croissant cupcake candy canes. Bear claw faworki faworki lemon drops. Faworki marzipan sugar plum jelly-o marzipan cookie.</p>
                </div>
            </div>
            <div class="bb-item">
                <div class="bb-custom-side page-layout-2">
                    <div>
                        <h3>Aa</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                    <div>
                        <h3>Bb</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                </div>
                <div class="bb-custom-side page-layout-2">
                    <div>
                        <h3>Cc</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                    <div>
                        <h3>Dd</h3>
                        <p>Faworki marzipan sugar plum jelly-o marzipan. Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
                    </div>
                </div>
            </div>
        </div>
        
        <nav>
            <a href="#" class="bb-nav-prev">Previous</a>
            <a href="#" class="bb-nav-next">Next</a>
            <a href="#" class="bb-nav-close">Close</a>
        </nav>
    </div>
    
    <script src="https://tympanus.net/Development/BookPreview/js/bookblock.min.js"></script>
    <script src="https://tympanus.net/Development/BookPreview/js/classie.js"></script>
    <script src="https://tympanus.net/Development/BookPreview/js/bookshelf.js"></script>
</body>

</html>

模板，教程

编辑器支持Emmet

快捷键

模板，教程

使用CSS3实现的图片过滤功能

使用jQuery和PHP实现的在线交互式图片合成

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：