这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天，以css为基础的一些网页在布局方面都以一些常见的骨架为基本，在延伸出其他细节上的不同。我整理了一些适合网页设计初学者的网页布局结构，掌握几个页面布局结构将会让网页变得更加美观，并且大大提升设计效率。
一、标题正文型
标题正文型适用于大部分的文章、新闻。其特点是简单明了，内容清晰。
小米官网首页：
三、“国”字型
大部分网站首页，例如：新浪、网页、腾讯、起点都是国字型 ，
结构：
上部分：标题、导航栏等
左部分：配图的热点新闻、一些导航信息等
右部分：备注信息、文件链接等
下部分：备注、版权声明、联系方式等
新华网首页设计：
国字型出现于大部分的网页之中，所以我们进一步展开国字型分析：
国字型的结构分为
top
banner
box(内容)
footer
.top {
height: 50px;
background-color: gray;
}
2.对于banner即导航栏部分应该设置宽度并水平居中显示。
.banner { width: 985px; height: 150px; background-color: gray; margin: 10px auto; } 3. 对于box(内容)可以分设无序列表方式，先对banner居中对齐。然后对li标签添加右边距，使每个列表项之间有空隙，为了使最后一个列表项不被挤但下一行，需要特殊的使最后一个li标签右边距为0，并使每个盒子加上浮动。
.box li { float: left; width: 237px; height: 300px; background-color: gray; margin-right: 10px;
}
.box .last {
margin-right: 0;
}
4. 对于footer同top
四、flash布局型
这种布局与海报型结构类似，不同的是由于Flash功能强大，页面所表达的信息更丰富。
五、pop型
POP源自广告术语，指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类网站，优点显而易见：漂亮吸引人，缺点是速度慢。
六、拐角型布局
该布局特点就是把相关内容的链接放到网页的左面或右面，另一面就是相关的文字信息，网站的上面是标题条幅或是主要内容导航栏，例如校园网站等。
总结：这些网页布局都有各自的特点，但都有浏览方便、速度快，但结构变化不灵活的共同特点。灵活运用这些知识能让简单的网页开发事半功倍。
