Question

我想创建一个如下所示的网页： http://i.imgur.com/HVKRB.png

我不能使用框架（我将在网站上使用AJAX，因此更有理由将所有内容放在一个页面中，因为一个页面上的内容会影响其他人。这样做的最干净的方法是什么？

执行类似操作的网站是Google阅读器。我是HTML的总菜鸟，我不确定他们是如何完成的。

编辑：这些部分应该占据整个浏览器窗口（因此页面上没有向下滚动，只有单个部分.Google阅读器就是一个很好的例子。谢谢：）

Answer 1

这是一个非常简单的例子：http://jsfiddle.net/C7eA8/。请注意，在同一元素上使用prozentual width和border会出现问题。要获得像素完美解决方案，请使用px中的宽度或将边框绘制到div div中的元素。

Answer 2

这是一种方法：

<?DOCTYPE html>
<html>
<head>
<style type="text/css">
    * {
        margin:0px;
        padding:0px;
    }
    .left {
        float:left;
        width:20%;
        height:500px; /* probably want to let content set height, though */

        background:#ccc;
    }
    .right {
        width:80%;
        float:right;
    }
    .right .top {
        height:200px; /* probably want to just let content set height, though... */

        background:#00f;
    }
    .right .bottom {
        height:300px;
    }
    .right .bottom .bottom-left {
        float:left;
        width:20%;
        height:100%;

        background:#ddd;
    }
    .right .bottom .bottom-right {
        float:right;
        width:80%;
        height:100%;

        background:#666;
    }   
</style>
</head>
<body>

<div class="left"></div>
<div class="right">
    <div class="top"></div>
    <div class="bottom">
        <div class="bottom-left"></div>
        <div class="bottom-right"></div>
    </div>
</div>

</body>
</html>

Answer 3

只需制作您想要和设置的页面所需div中的overflow-y:scroll;。这样可以正常工作。

Answer 4

这可以通过使用HTML的framset标记来完成。语法如下所示：

<frameset cols="25%,*,25%">
  <frame src="frame_a.htm" />
  <frame src="frame_b.htm" />
  <frame src="frame_c.htm" />
</frameset>

在此处详细了解框架集：http://www.w3schools.com/tags/tag_frameset.asp

编辑：哎呀，忘了你不能用帧。你应该用表来完成这个，但我不推荐它。您可以使用rowspan="2"使第一个单元格跨越页面的整个高度，并在右上角单元格上显示colspan="2"。

Answer 5

每个人总是不尊重我的老式桌子。但是，它是crossbrowser并且当窗口宽度被操纵时它不会弄乱布局。现场演示：http://jsfiddle.net/hobobne/CPvTw/

<html>
    <head>
        <title>4 section demo</title>
        <style>
            html, body {height: 100%;}

            #global_table {border-collapse:collapse; width: 100%; height: 100%;}

            #section_0,
            #section_1,
            #section_2,
            #section_3,
            #section_4 {border: 1px solid #000000; font-weight: bold; text-align: center;}

            #section_0 {padding: 20px 0px; height: 1%;}
            #section_1 {}
            #section_2 {}
            #section_3 {}
            #section_4 {}
        </style>
    </head>
    <body>
        <table cellpadding="0" cellspacing="0" border="0" id="global_table">
            <tr>
                <td colspan="3" id="section_0">section 0</td>
            </tr>
            <tr>
                <td rowspan="2" id="section_1">section 1</td>
                <td colspan="2" id="section_2">section 2<div id="dragbar"></div></td>
            </tr>
            <tr>
                <td id="section_4">section 4</td>
                <td id="section_3">section 3</td>
            </tr>
        </table>
    </body>
</html>

如何使用这样的分隔符创建HTML页面

5 个答案: