网站使用两栏式布局的三种方案

　　【网站使用两栏式布局的三种方案】在网页设计中，分栏布局是常用的布局手法，一般有两栏布局，三栏布局。这其中又以部分栏固定，部分栏自适应的方式最为常见。下面我们先以常见的两栏布局开始，描述一下常用的几种实现方案。

　　两栏布局最常见的就是左右定宽，我们就先以这种方案开始讲述。首先我们先假设页面的高度固定为100像素，下面先快速地看一遍，几种布局方案的实现方法。

　　1、页面整体的统一性：

　　然后，要强调页面的整体性，在设计风格、字体设计、配色、内容等方面都要有统一的标志，让用户能快速领悟。

　　网站使用等分两栏式的页面布局，不仅可以在视觉设计上告知用户两者的不同联系，还可以给予网站不一样的布局方式

　　2、选取并体现侧重点

　　首先你要告诉用户哪边才是重要的，因为，等分两栏式的页面布局，在视觉上两边是对等的，不存在哪个比较重要，所以网站创建者首先要打破这一视觉习惯。

　　按照用户的视觉习惯，一般把主要内容放在左边栏目布局中，然后在内容的尺寸与颜色的设计上突出其重要性，这是网站创建常用的设计技巧。

　　主栏的设计一定要体现主题的内容，在设计上要强势，弱化辅助栏目的设计。如主题图片铺满整个栏目，其重要性就不言而喻了。

　　3、连接两边的内容

　　等分两栏式的页面布局可以同时容纳至少两个中心内容，但是核心内容只有一个，因此，在侧重点的栏目设计好后，要考虑另一个栏目的内容，同时要给两边的内容做好连接，使其成为一个整体。

　　连接的设计除了在内容上进行关联，在视觉设计上同样需要，如两边的字体相同，大小不一，体现明显的层级关系，或是在分割的栏目中间用一个具有连接意义的图标或小图案，表达两个栏目具有相关性。

　　这几种布局方案，表面上看起来没有什么问题，但是这是在我们假设固定了高度的情况下，如果高度是不固定的，这几种布局方案就会带来一系列的问题，至于为什么会乱，做过“首字下沉”效果，或者“图文混排”效果的同学，应该知道这其中的原因，是因为在CSS的浮动机制中，当容器中存在一个浮动的元素时，紧随其后的元素的内容，会紧贴该元素的右边框进行排列，如果超出该元素的高度后，则会紧贴父元素的最左边框进行排列(右浮动则相反)。