水平网页显示的最佳方法？

Question

我面前有一个新项目，我必须创建一个7页的水平显示。中间页面是主页面，左侧和右侧页面将有3个其他页面。这是我第一次使用水平显示器。

哪种方法最好，最直接？！人们有这个想法吗？！

感谢您的帮助

Answer 1

也许这会让你开始：

<强> CSS

html,
body
{
    height:100%;
}
body
{
    margin:0;
    padding:0;
    overflow:auto;
}
ul
{
    margin:0;
    padding:0;
}
ul li
{
    margin:0;
    padding:0;
    list-style-type:none;
    float:left;
}
ul li.page-1,
ul li.page-3,
ul li.page-5,
ul li.page-7
{
    background-color:#655;
}
ul li.page-2,
ul li.page-4,
ul li.page-6
{
    background-color:#855;
}
.clearfix:after
{
    clear:both;
    content:'.';
    display:block;
    font-size:0;
    height:0;
    line-height:0;
    visibility:hidden
}
.clearfix
{
    display:block;
    zoom:1
}​

<强>的jQuery

var width=$(window).width();

$('body').css('width',(width*7)+'px').scrollLeft((width*3));

$('ul li').css({'width':width+'px','height':$(document).height()+'px'});

的 HTML

<ul class="clearfix">
    <li class="page-1">
        page 1
    </li><li class="page-2">
        page 2
    </li><li class="page-3">
        page 3
    </li><li class="page-4">
        page 4 (current)
    </li><li class="page-5">
        page 5
    </li><li class="page-6">
        page 6
    </li><li class="page-7">
        page 7
    </li>
</ul>​

<强> DEMO

编辑：

要导航到上一页/下一页，请添加以下内容：

<强>的jQuery

$('.prev').click(function()
{
    i=$(this).parent('li').index()-1;

    $('body').animate({scrollLeft:(width * i)});

    return false;
});

$('.next').click(function()
{
    i=$(this).parent('li').index()+1;

    $('body').animate({scrollLeft:(width * i)});

    return false;
});

<强> HTML

<ul class="clearfix">
    <li class="page-1">
        page 1
        <a href="#" class="next">Next</a>
    </li><li class="page-2">
        page 2
        <a href="#" class="prev">Prev</a> &middot; <a href="#" class="next">Next</a>    
    </li>
    ....
    <li class="page-7">
        page 7
        <a href="#" class="prev">Prev</a>
    </li>
</ul>​

<强> DEMO 2