如何划分不同部分的网页？

Question

我有一个长度为2000px的网页，但我想将它分成4个不同的部分（即每个500px），因此我可以用不同的设计添加不同的内容。但我不知道该怎么做。我想给他们的超链接。

Answer 1

可怕的答案是帧;适度不好回答是CSS的div

<div class="bottom"> 
    <div id="area1" style="float: left; width: 25%;"></div> 
    <div id="area2" style="float: left; width: 25%;"></div> 
    <div id="area3" style="float: left; width: 25%;"></div> 
    <div id="area4" style="float: left; width: 25%;"></div> 
</div> 

现在，当你说超链接..你的意思是在你点击页面的小部分，并将其扩展到它的一部分？因为你可能会做一些jQuery的黑客它

$("#area1").click(function(){ 
$("#area1").css("width", "100%"); 
$("area2").css("width", "0%"); 
$("area3").css("width", "0%"); 
$("area4").css("width", "0%"); 
}); 

（上面应该调整而缩小别人对你点击了100本季度的点击专区，你会那么风格的CSS个别DIV为它通过ID或类等

Answer 2

简单的方法为您使用bootstrap，提供已经使列和响应functional.IF你不想使用下一个选项是我们可以使用CSS或frames.like如上回答

Answer 3

听起来像你需要一些基础知识

你的页面结构是HTML，而文体元素是在CSS中指定的。所以，你会想要一个包含<div></div>内四个逻辑划分（又名<div></div>），像这样：

<div> 
    <div></div> 
    <div></div>  
    <div></div> 
    <div></div> 
</div> 

一个div是一种叫做块级元素，它会自动扩展为完整的宽度（即：100 ％）的容器。你希望内部的div元素具有相同的宽度，并且由于其中有四个元素可以进行一些数学运算。

100％/ 4 =你想要的每个div的宽度。

<div> 
    <div style="width:25%;"></div> 
    <div style="width:25%;"></div>  
    <div style="width:25%;"></div> 
    <div style="width:25%;"></div> 
</div> 

你会发现如预期的，因为div元素将是你想要的宽度，但只在彼此叠放这不起作用。为了让它们彼此相邻，可以使用display:inline-block;，它将块级别更改为块和内联之间的内容。

<div> 
    <div style="width:25%; display:inline-block;"></div> 
    <div style="width:25%; display:inline-block;"></div>  
    <div style="width:25%; display:inline-block;"></div> 
    <div style="width:25%; display:inline-block;"></div> 
</div> 

这将是几乎你想要什么，但你会发现div元素之间存在一定差距，这实际上是在HTML代码被保存（在<div></div>之间的换行符）的空白。有几种方法可以解决这个问题。在我看来，最简单的就是把元素之间的空白注释，像这样：

<div> 
    <div style="width:25%; display:inline-block;"></div><!-- 
    --><div style="width:25%; display:inline-block;"></div><!--  
    --><div style="width:25%; display:inline-block;"></div><!-- 
    --><div style="width:25%; display:inline-block;"></div> 
</div> 

这是使用HTML元素中的CSS样式，但你应该真正把CSS in a stylesheet and reference it in the page。