《使用HTML和CSS开发Web网站教学资料》第七章 WEB标准与页面布局基础（理论）.pptVIP

vertical-align p 这是一个包含图片img style=vertical-align:text-top; src=image/eg_cute.gif alt=段落文字中的小图片 /的段落，它还包含水的分子式：Hspan style=vertical-align:sub;2/spanO和一个二元一次方程：Y=2Xspan style=vertical-align:super;2/span+3X+4/p /p table id=mytable tr td单元格/tdtd单元格/tdtd单元格/td /tr tr style=height:80px; td style=vertical-align:middle;img src=image/eg_cute.gif alt=段落文字中的小图片 //td td单元格/td td style=vertical-align:bottom;单元格/td /tr tr td单元格/tdtd单元格/tdtd单元格/td /tr /table style type=text/css #mytable{ width:250px; border:4px double gray; border-collapse:collapse;} #mytable td { vertical-align:top ; border:1px solid gray;} /style 演示 例7-10 1、 2、 3、 小结2 CSS中对元素的定位有哪几种方式？ 多个元素发生层叠时，如何让其中某个元素最容易让用户看到？ 垂直对齐方式有哪几种？ 总结 1、 2、 3、 Web标准 定位 盒状模型 谢谢 中国职业教育联盟课程体系 * * * * 中国职业教育联盟课程体系 中国职业教育联盟课程体系 成就百万精英 使用HTML和CSS开发WEB网站 第七章 WEB标准与页面布局基础 预习检查 当使用margin属性对元素的四个外边距进行设置，依次的顺序为( )。 top bottom left right left right top bottom top left bottom right top right bottom left 使用position属性可设置元素的定位机制。要使元素以它的父元素为参照，进行相对定位，应为postion属性赋以下（ ）的值 。 static absolute relative fixed 预习检查 当页面中有多个元素在垂直于浏览器窗口的方向上发生层叠时，可使用( )属性设置它们的层叠顺序，此属性的值越( )则此元素就越接近浏览者。 z 大 index 小 z-index 大 z-number 大 要将一个元素隐藏，并且要求此元素原来占据的页面空间被释放，应为此元素设置( )属性，并赋值为( ) 。 visibility none visibility hidden display hidden display none 预习检查 CSS盒状模型规定盒子由四个content , margin , padding , border部分组成。由盒子的外部到盒子内部，这四个部分的顺序依次是( ) 。 border padding margin content margin border padding content content padding border margin border margin content padding 网站重构与WEB标准 网站重构 把“未采用CSS，大量使用HTML进行定位、布局，或者虽然已经采用CSS，但是未遵循HTML结构化标准的站点”变成“让标记回归标记的原本意义。通过在HTML文档中使用结构化的标记以及用CSS控制页面表现，使页面的实际内容与它们呈现的格式相分离的站点。”的过程就是网站重构 。 网站重构 WEB标准 WEB标准 网页主要由三个部分构成：结构（Structure）、表现（Presentation）和行为（Behavior）。它们都有各自的标准。 结构 结构是指一个网页有哪些内容以及这些内容如何被清晰地组织在一起。 网页结构的标准主要是XML语言和XHTML语言。 表现 表现是指一个网页的内容以何种样式来展现。 网页表现的标准是CSS语言。 行为 行为是指一个网页及其所它包含的网页元素以及它所属的浏览器窗口如何与用户交互。 网页行为由JavaScript脚本语言来实现。 XHTML XHTML是HTML的替代者，它是从HTML继承而来，但使用了XML的规则进行严格规范。 XHTML与传统的HTM