网页常见的布局方式

标准流：又称为  文档流， 标签默认的排版规则

常见的标准流排版规则：

1：块级元素：从上往下， 垂直布局 ，独占一行

2：行内元素 或行内块元素 ： 从左往右，水平布局 空间不够自动折行

可以让原本垂直布局的块元素变成水平布局

1：可以让元素自由的摆放在网页的任意位置

2：一般用于盒子之间的层叠情况
浮动的作用 ：让垂直布局的盒子变成水平布局； 比如一个在左，一个在右

float:left;

left   左浮动

right  右浮动

-1：浮动元素会脱离标准流在标准流中不占位置

-2：浮动元素比标准流多半个级别，可以覆盖标准流中的元素

-3：浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

-4：浮动元素有特殊的显示效果

一行可以显示多个

可以设置宽高

注意点：浮动的元素不能通过text-align:center或者margin:0 auto来居中;
子元素浮动了，此时子元素不能撑开标准流的块级父元素

方法：

优点：简单方便

缺点:有些布局不能固定父元素高度

在父元素内的最后添加一个块级元素，给添加的块级元素设置clear:both

缺点:会在页面中添加额外的标签，会让页面html结构变得复杂

用伪元素替代了额外标签

clearfix::after{

  content:'';

  display:block;

  clear:both;

  height:0;

  visibility:hidden;  

}

优点：项目中使用，直接给标签加类即可清除浮动

优点：方便
1：设置定位方式：position:static;

static  默认  静态定位

relative  相对定位

absolute   绝对定位

fixed   固定定位

选取的原则一般是就近原则(离那边近就用那个)

水平   left   数字+px  距离左边的距离

水平   right  数字+px  距离右边的距离

垂直   top    数字+px  距离上边的距离

垂直   bottom    数字+px  距离下边的距离

静态定位是默认值，就是之前认识的标准流

注意：

1：静态定位是之前的标准流，不能通过方位属性进行移动

2：之后说的定位不包括静态定位，主要有：相对  绝对  固定

相对于自己之前的位置进行移动

position:relative

特点:

1：改变位置参照自己原来的位置

2：仍然具有标签原有的显示模式特点

3: 占有原来的位置

相对于非静态定位的父元素进行定位移动

position:absolute

特点

1：脱离标准流，不占位置

2：改变标签的显示模式特点，具有行内块特点

先找已经定位的父级，如果有这样的父级就以这个父级为参照物

有父级，但父级没有定位，以浏览器窗口为参照物进行定位

使用：子绝父相

相对于浏览器进行定位移动

position:fixed

特点

1：配合方向属性进行移动

2：相对于浏览器可视区域进行移动

3：脱离标准流  不占空间

4：具有行内块特点

查看一个网站到底是不是自适应，最简单的办法就是把浏览器的窗口缩小，缩小的过程中看页面是随着窗口变小还是边缘被隐藏，同时看窗口底端是否有拖动条。如果页面随浏览器窗口缩小就是自适应的，如果是边缘被隐藏同时出现拖动条，就不是自适应的网站。

以word2010版为例，word表格布局打开的方法：1、打开需要 *** 作的WORD文档，在工具栏任意位置点击鼠标右键，然后选择自定义功能区。
2、在工具选项卡中找到表格工具，勾选布局选项，然后点击确定即可。
3、返回主文档，点击表格任意位置，即可调出表格工具的布局标签。Microsoft Word是微软公司的一个文字处理器应用程序。它最初是由Richard Brodie为了运行DOS的IBM计算机而在1983年编写的。随后的版本可运行于Apple Macintosh（1984年），SCO UNIX，和Microsoft Windows （1989年），并成为了Microsoft Office的一部分。

lT型布局

所谓T型布局，使指页面上部为横条（网站标志+广告条）、下方左半部为主菜单、右由半部分显示内容的布局。因为看上去像英文字母“T”，所以称为T型布局。如图(a)所示。

T型布局的优点是页面结构清晰，主次分明，强调秩序，能给人以稳重、可信赖的感觉，比较容易上手。缺点是规矩呆板，如果细节和色彩搭配上不注意，容易让人乏味。

2口型布局

口型布局的页面上下各有一个广告条，左侧是主菜单，右侧放置友情链接等内容，中间是主要内容，如图(b)所示。

口型布局的优点是充分利用版面，信息量大。其缺点是页面拥挤，不够灵活。

3POP布局

POP引自广告术语，是指页面布局象一张宣传海报，以一张精美图像作为页面的设计中心，在适当位置放置主菜单，如图(c)所示。这种布局不讲究上下左右对称，但要平衡和有韵律，能达到强调、动感、高注目性的效果，常用于时尚类网站。其优点是漂亮吸引人，缺点是速度慢。

一个网站的结构设计就是要讲究网站的内容划分，要清晰合理，层次分明。不仅仅是前台的栏目划分、页面的层次、链接的路径设置等，还包括了强大的后台支撑，保证前台结构布局的实现。

首先，网站结构设计的目标要清晰

1、理清楚栏目结构的脉络，如链接的结构。导航的线路、内容主题等等。

2、体现网站特征，注重特色的设计

3、方便用户使用

4、网页上的功能得以合理分配

5、可拓展性好

6、网页的关键词布局符合搜索引擎的优化喜好

那么，网站结构布局设计的时候需要注意的事项有哪些

1、用户体验和网站优化相结合

很多的企业在建设网站的时候只要求网站美观，大气，让用户赏心悦目。但是却忘了网站后期是需要做优化的。而美丽、大气的网站对于优化来说往往是不够的。因为在后期的优化中，需要涉及到网站的路径设置、网站mate标签的设置等。而且后期还可能需要网站升级、程序改版等等，这就需要在建设的前期都要考虑到的，要结合的。

2、网站地图

网站地图一般分为两种，一是直接提交给搜索引擎xml地图，另一种是提供给用户的同时也提交给搜索引擎抓取的html地图。地图的设置是方便搜索引擎去抓取网站的页面，清晰的网站结构、无论是搜索引擎还是网站访问者都有一个清晰的指明方向，协助迷失的访问者找到他们想要查看的内容页面。

3、面包屑的运用

面包屑的作用就是要让用户了解清楚，，目前是处于什么位置，以及当前页面是处于整个网站的什么位置。并且能提供返回各个层级的快速入口，方便用户 *** 作。

4、用户的浏览焦点

一般用户的浏览习惯都是从左到右，从上到下的，所以左上角的位置是离用户最近的位置，而用户的体验来说，用户浏览网站最想看到的是网站中有没有他们需要的产品和信。所以当用户进入网站看到分类，是否会有兴趣往下浏览呢？点击的按钮、顺序是否符合用户的浏览习惯？最想宣传推荐的产品和信息有没有放在离用户眼睛最近的地方呢

网站结构布局是网站设计的重要组成部分，最有效最有限度地进行资源分配和管理的布局设计，才能最有效地发挥网站的作用。

---