html5横向滑动切换文章页面布局

当前位置:主页 > Html5库 > HTML5模板 > html5横向滑动切换文章页面布局
html5横向滑动切换文章页面布局
分享:

    插件介绍

    这是一款时尚的html5页面布局效果。这个html页面布局将文章设定为不同的面板,在屏幕的可见区域有三个面板,左右两侧的小面板可以点击然后滑动显示上面的文章,也可以通过导航按钮来滑动面板。

    浏览器兼容性

    浏览器兼容性
    时间:2014-11-12
    阅读:

简要教程

本教程将带给大家一种html5页面布局效果。

HTML结构:

<div id="vs-container" class="vs-container">
    <header class="vs-header">
        <h1>Sliding Triple View Layout <span>with Visible Adjoining Sections</span></h1>
        <ul class="vs-nav">
            <li><a href="#section-1">Hate dog flop</a></li>
            <li><a href="#section-2">Stretch hopped</a></li>
            <li><a href="#section-3">Inspect anything</a></li>
            <li><!-- ... --></li>
            <!-- ... -->
        </ul>
    </header>
    <div class="vs-wrapper">
        <section id="section-1">
            <div class="vs-content">
                <!-- content -->
            </div>
        </section>
        <section id="section-2"><!-- ... --></section>
        <section id="section-3"><!-- ... --></section>
        <!-- ... -->
    </div>
</div>
                            

更详细的教程请参看《html5横向滑动布局