1流动布局html网页默认的布局方式特点1块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%2内联元素都会在所处的包含元素内从左到右水平分布显示内联。

浮动布局，定位布局以及响应式布局，这三种布局是最基本最常见的，此外比较特殊的是弹性布局，弹性布局相对使用较少，需要根据项目的具体情况而定在网站开发当中，通常是需要结合多种布局去实现网页布局的如果是在学习网页布。

流动布局流动布局是浏览器默认的布局方式他会按照你所写的标签特性，从上至下从左到右的方式进行排列在HTML中我们按照标签的排列特性可以将它们分成三类1行级元素不独占一行，不能设置元素的高度宽度和底边边距。

1HTML布局主要有两种方式，一种是表格布局，一种是DIV布局2HTML表格布局是WEB10时代主要使用的布局方式，即使用TABLE标签进行布局，优点是布局比较简单3HTML DIV布局是WEB20时代主要使用的布局方式，优点是符合。

由于外层是positionrelative，所以里层是absolute的话，则会以外层的左上角为位移参考对齐当然外层只写positionrelative，写上left，top这两个值，则表示以以这个元素的本来应该在的位置为布局参照原点进行left，top对齐。

布局就是以最合适浏览的方式将图片和文字排放在页面的不同位置不同的制作者会有不同的布局设计网页布局有以下几种常见结构 1“同”字型结构布局 所谓同字型就够就是指页面顶部为“网站标志+广告条+主菜单”或主菜单，下方左侧。

一般有七个步骤页面大小整体形状页眉正文页脚图片多媒体网页布局的常见类型 1“汉字”布局“过”的布局是由“通”的布局演变而来，因与汉字“过”相似而得名页面顶部一般放置网站logo和导航栏或Banner。

知识的表达方式，比如HTML5布局之路进行学习，让自己的知识更扎实一些，不然学的零零散散的Tips学习好HTML+CSS有利于后面学习JavaScript，毕竟需要它们两者结合在一起才可以实现出可交互的前端页面。

二网页布局有以下几种常见结构1“国字”型布局“国”字型布局由“同”字型布局进化而来，因布局结构与汉字“国”相似而得名其页面的最上部分一般放置网站的标志和导航栏或Banner广告，页面中间主要放置网站的。

1如果你会htmlcss可以直接写代码，最方便的是用网上的js插件，有很多很炫酷的插件2如果不了解代码的话就用ps做出整个网页页面，然后将每个按钮每个菜单栏每个你要修改的地方都拆成一个个小图片，最后在。

2HTML页面布局有两种方式，一种是TABLE布局，一种是DIV布局3以前WEB10时代基本上都是table布局，后来WEB20，30时代，都是以DIV布局为主但是div布局的编写难度比table布局要高4希望对你有帮助。

3无论什么元素，一旦设置为是浮动显示，就拥有了完整的盒模型结构，我们就可以使用外边距，内边距，边框，高和宽来控制的大小以及与其他对象之间的位置关系4浮动是从网页布局的角度来定义元素的显示，而行内和块状属性。

HTML5新元素及其特性HTML5的语义化标签以及属性，可以让开发者非常方便地实现清晰的web页面布局，加上CSS3的效果渲染，快速建立丰富灵活的web页面显得非常简单本次学习HTML5的新标签元素有ltheader定义页面或区段的头部ltfooter定义页面。

口型布局的页面上下各有一个广告条，左侧是主菜单，右侧放置友情链接等内容，中间是主要内容口型布局的优点是充分利用版面，信息量大其缺点是页面拥挤，不够灵活3 POP布局 POP引自广告术语，是指页面布局象一张宣传海报。

网页结构即网页内容的布局创建网页结构实际上就是对网页内容的布局进行规划，网页结构的创建是页面优化的重要环节之一，会直接影响页面的用户体验及相关性，而且还在一定程度上影响网站的整体结构及页面被收录的数量。

第一步新建html文档并搭建框架 新建一个TXT文档，重命名为“田子格布局html”，然后用记事本打开，输入表头信息，已经html整体框架搭建包括head与body第二步DIV布局 分别复制4个不同的div作为4部分，并且分别命名为。