网页设计的布局结构 第1篇
模块就是我们的设计区块，可以是一段文字、一张图片，又或是其他元素。其中，背景/点缀元素并不能算作是设计模块，所以无需严格遵循栅格系统。
以 12 栅格系统为例，它可以根据业务需要被等分成2、3、4、6、12份，也可以被不对称分割为 1:2:1、1:3:2、2:3:3、1:2、3:1、1:5、3:5 等比例。设计者可以根据实际需求，自由组合。
网页设计的布局结构 第2篇
与基于框的网页排版布局非常相似，卡片网页排版布局使用多个框或其他矩形容器来显示不同的内容。该网页排版布局在很大程度上是不分层的，这意味着没有任何一项过于突出，并且所有信息都得到平等的注意力。卡片网页排版布局对于内容丰富的网页来说是个不错的方案，特别适合视频博客或在线商店。
如Pixso社区中的所示，每个家具的图片都嵌进了椭圆形的卡片中。各个椭圆形卡片在视觉上是平等的，即创意地展示了各具特色的家具形态，又丰富了主页的视觉。
网页设计的布局结构 第3篇
使用 F 模式网页排版布局时，请确保在页面的顶部折叠处放置重要元素，访问者可能会在此处逗留更长时间，这通常包括标题、副标题和特色图片。F 型网页排版布局适用于主要围绕文本展开的网页，例如博客的主页和各个博客文章页面。
如Pixso资源社区的所示，重要元素都放置在“F”的笔画处或者拐角处，符合访客的视觉动线，阅读下来行云流水，可以由浅入深地吸收传达的文案信息。
网页设计的布局结构 第4篇
基础布局包括：上下布局、左右布局、“T”型布局。这三种布局结构相对简单且常见。
上下布局：上半部分为导航模块，下半部分为主内容模块。导航栏宽度限制了导航的数量和文本长度，适用于导航较少、页面篇幅较长的网站。是使用场景最多的框架布局。
左右布局：页面左侧为全局导航模块，右侧为主内容模块。这种布局提高了导航的可见性，也有利于页面之间的切换，适用于结构简单的网站。
“T”型布局：常用于社交文章类网站，顶部全局导航承接了所有子入口的功能，内容区域再划分成菜单栏（或侧边栏）、主内容模块两部分。