网站建设的流程五步曲.pptVIP

布局模型：Flow Model(流动模型) 流动模型是HTML默认的布局模型 所谓流动，就如同流水一样，元素本身是被动的，它随着文档流自上而下按顺序动态分布。流动布局只能根据元素排列的先后来决定分布位置，要改变某个元素的位置，只能通过改变它在HTML文档流的分布位置，所以这种布局模式是种被动的模式。 优点：元素之间不会存在错位、覆盖等问题，布局简单，符合人的浏览习惯。 缺点：制作都不能用单纯的布局模型设计出更艺术化的网页页面效果图。 布局模型：Flow Model(流动模型) 任何没有具体定义position及float的元素都将默认呈现流动布局模式。 典型的特征： 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布。默认情况下，块状元素的宽度都为100%。块状元素都会以行的形式占据位置，不管这个元素所包含的内容有多少，也不管我们把元素的宽度设多窄。 内联元素都会在所处的包含元素内从左到右水平分布显示。有人所这种分布方式称为文本流，文本流源于文本的从左向右自然流动。超出一行后，会自动从上而下换行显示。然后继续从左到发顺序流动。 布局模型：Float Model(浮动模型) 浮动模型完全不同于流动的另一种布局模型，它遵循浮动规则，但仍能看到流动对它的潜在影响。任何的元素都可以通过float来定义浮动。 特征： 任何定义为float的元素都会自动被设置为一个块状元素显示，相当于被定义了一个display:block;声明。这样就可以为浮动元素定义width和height属性，即使是内联元素。通常建议如果用户定义元素的float属性，必须定义元素的宽度，如果当我们没有指定浮动元素的宽度时，浮动元素会自动收缩到能够包含内容的宽度。 布局模型：Float Model(浮动模型) 浮动模型不会与流动模型发生冲突。当元素定义为浮动布局时，它在垂直方向上应该还处于文档流中，但是在水平方向上，它的浮向连会尽可能地靠近它的包含元素边框。 与普通元素一样，浮动元素始终位于包含元素内，不会游离于外，或破坏元素包含关系。这和层布局模型不同。 布局模型： Float Model(浮动模型) 清除浮动 浮动的自由性也给布局带来了很多麻烦，CSS为此又增加了clear属性，它在一定程度上控制浮动布局中出现的混乱现象。Clear属性值包括： Left清除左浮动 Right清除右浮动 Both清除左右浮动 None默认值，不清除浮动。 布局模型： Float Model(浮动模型) 清除浮动 浮动与流动嵌套 把浮动元素嵌入流动元素之内，此时包含元素将根据自身属性进行显示，不再受子浮动元素的影响，也就是说父级元素不能够自适应子浮动元素的高度。 解决上述问题的有很多种方法，我们可以在包含元素内的最后一行添加一个清除元素，强制撑开包含元素，使其包含浮动元素。 7布局模型：Layer Model(层模型) 层布局模型源于图形图像编辑器中的非常流行的图层编辑功能，为了支持层布局模型，CSS定义了一组定位（position）属性。通过对元素进行定位，它允许用户精确定义网页元素的相对位置，这里的相对可以相对元素原来的位置，或者是最近的包含块元素，或者是相对浏览器窗口。 布局模型：Layer Model(层模型) 定位类型： Static不定位（默认） Fixed固定定位，固定在视图窗口中，IE不支持 Absolute绝对定位，将元素从文档流中拖出来，然使用left\right\top\bottom属性对于其最接近的一个具有定位属性的父元素进行绝对定位。如果不存在这样的父元素，则相对于body元素，即根据浏览器窗口。 Relative相对定位，它通过left\right\top\bottom属性对于其原位置进行定位，原位置还保留不变。 布局模型：Layer Model(层模型) 定位的实现方法： 先对其最近的父级元素进行相对定位，然后设置该元素为绝对定位属性，最后通过left\right\top\bottom来相对定位。 层叠等级 使用层布局的另一个好是实现元素之间的重叠显示。在CSS中可以通过z-index来确定定位元素的层叠等级。 Z-index只有在元素position属性取值为relative\absolute\fixed时才有用。 Z-index属性值越大，层叠级别越高。 Z-index属性受到HTML代码的等级的制约，在不同的父级元素中的子元素设置z-index并不能正常的显示。 8表单 表单： 表单是网页中最常用的对象之一，它主要负责把用户的信息传递给服务器，实现数据的动态交互。它在网页中起着重要的作用，它是与用户交互信息的主要手段。完整的表单包含三个组成部分： 表单域：包含了处理表单数据所用的CGI程序的URL以及数据提交到服务器的方法。 表单控件