几大常用网页布局结构

作为网页设计初学者，掌握几个页面布局结构将会让网页变得更加美观，并且大大提升设计效率。

一、 国子型（大型网站常用类型）

如图所示，我们可以看出，国子型页面结构主要分为五个部分。
头部: 该部分包括网站的标题以及横幅广告条；
左侧: 该部分包括一些导航等信息；
右侧: 该部分包括菜单或者导航的组件；
中部: 该部分为页面的主要内容；
底部: 该部分包括一些基本信息、联系方式、版权声明等内容。

二、拐角型（CSDN主页就是这样的布局）

如图所示，我们可以看出，拐角型和国子型结构非常相似，主要包括四个部分部分。
头部: 该部分包括网站的标题以及横幅广告条；
左侧或右侧: 该部分包括一些导航菜单等信息；
中部: 该部分为页面的主要内容；
底部: 该部分包括一些基本信息、联系方式、版权声明等内容。

三、标题正文型（常用在文章、注册页面）

如图所示，我们可以看出，标题正文型结构非常简单明了，主要就包括两个部分。
上部: 该部分包括网站的标题以及横幅广告条；
下部: 该部分包括页面的主要内容。

四、左右框架型（大部分大型论坛使用该结构布局）

如图所示，我们可以看出，左右框架型主要包括两个部分。
左侧: 左侧一般为导航菜单，做上面可能会有标题或者标志；
右侧: 该部分包括页面的主要内容。

五、封面型（常用于个人主页）

如图所示，我们可以看出，封面型主要包括三个部分。
头部: 该部分一般包括页面logo或者导航菜单；
左侧: 该部分可以放置个人页面的封面；
右侧: 该部分包括表单或者其他组件。

总的来说，初学者在制作页面首先应该思考的就是页面的布局，然后在根据页面布局添加内容。在思考页面布局时，需要具体情况具体分析。

如果是内容非常多，可以考虑国子型后者拐角型；
如果内容不算多，而一些说明性的东西比较多，则可以考虑标题正文型；
如果是一个企业网站想展示一下企业的形象或者个人主页想展示个人风采，封面型是首选。

总结：这些网页布局的共同特点就是浏览方便、速度快，但结构变化不灵活，不过可以组合使用这些网页布局。

更多推荐

网页设计基础——网页布局结构