1、水平条布局
该网站布局将网页的长滚动分解为全角条。每个条带都具有全屏折叠（或接近全屏）的功能，这种多样化的布局使用户每次向下滚动时都拥有不同的惊喜。
基于盒子的网站布局将多个内容合并到一个几何设计中。将每一条信息整齐地限制在一个盒子中，这些元素不会相互掩盖，而是构成了统一的外观。每个框都指向一个不同的网页，用户可以在其中了解更多他们最感兴趣的主题。
3、全屏图像布局
该网站布局在大屏或全屏精选图片的顶部包含一小段文字。单一视觉放置在前端和中心位置可以引起醒目的且身临其境的主页设计。它同时用于有效且即时地传达消息。
4、分屏布局
分屏布局是主要的网页设计趋势。通过垂直将屏幕从中部向下分开，可以创建完美对称的平衡，这是设计的重要原则。这种整洁的分为两部分，使每个部分都可以表达一个完全不同的想法-或者从两个不同的角度引用同一想法。
5、杂志布局
杂志的网站布局从印刷报纸中汲取灵感，它基于多列网格来创建复杂的视觉层次。通过实施可以单独修改的容器，杂志的版式可让您将主要标题的优先顺序排在较小的文章上。
6、单列布局
该网站布局将所有内容都包含在一个垂直列中。这是一个简单明了的设计，此处的导航很容易理解-访问者立即知道向下滚动页面以获取更多信息。不过，对于这种布局，请记住一个重要的网站导航提示。请务必添加“返回首页”按钮或固定的浮动菜单，以帮助用户进一步浏览您的网站。
7、F模式的布局
与Z模式布局非常相似，此设计也基于常见的页面扫描行为。在文本较多的网站中，我们倾向于浏览或阅读F形信息。这意味着页面的顶部水平部分吸引了我们的大部分注意力，并且我们的眼睛从那里垂直向下，以左侧为焦点。
8、卡片布局
类似于基于盒子的布局，卡片布局使用盒子或其他矩形容器来显示各种内容。该网站的布局是非分层的，这意味着没有一个项目比其他项目更突出，所有信息都得到同等对待。
9、不对称布局
与拆分屏幕布局类似，这种时尚的网站布局也将屏幕划分开。只是这次，两个部分的大小和重量都不相等。平衡从一侧到另一侧的转移会产生视觉张力，并使页面更具动态感。这是一个大胆的设计，是一种强大的工具，可用于产生并保持用户的参与度。
10.Z模式的布局
遇到新的网页时，我们会立即浏览一下网页以了解事物的要旨。这种快速扫描（称为略读）通常以字母Z或锯齿形的形式进行。我们的眼睛从左上角移到右上角，然后再向下移到左下角，最后又移到右边。Z模式的对角线部分从顶部到底部横跨页面，是应该吸引最多注意力的信息的地方。这可以通过使用引人入胜的视觉效果和简洁的文字行来介绍网站的全部内容来实现。
无论是哪种版块搭建网站，用户体验则是最根本的需求。选择好框架后，我们则需要针对页面做落地页的优化，如何增加视觉冲击力，如何提升网站色彩效果。