网站建设和管理4.ppt

CSS 定位 (Positioning) 如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”： CSS 定位 (Positioning) 行框和清理 浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。因此，创建浮动框可以使文本围绕图像。 CSS 定位 (Positioning) 要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。 为了实现这种效果，在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面： CSS 定位 (Positioning) 假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。 CSS 定位 (Positioning) 这种情况下，出现了一个问题。因为浮动元素脱离了文档流，所以包围图片和文本的 div 不占据空间。 如何让包围元素在视觉上包围浮动元素呢？需要在这个元素中的某个地方应用 clear CSS 尺寸 CSS尺寸属性 CSS尺寸属性允许你控制元素的高度和宽度。 同样，还允许你增加行间距。 属性 描述 height 设置元素的高度。 line-height 设置行高。 max-height 设置元素的最大高度。 max-width 设置元素的最大宽度。 min-height 设置元素的最小高度。 min-width 设置元素的最小宽度。 width 设置元素的宽度。 作业 内容 构建符合Web标准的网页（一个HTML页面） 美工可不作考虑，关键是html/css标准化 要求 使用严格的文档类型，xhtml 1.0以上 内容和表现分离，css单独写，不得嵌入标签内 作业 要求 页面应具有基本内容（展示不同内容样式） 页面应具备基本的布局结构（不许用表格布局） header footer lefter mainbody header footer lefter mainbody righter 作业 评分标准 两级标准 合格、不合格 作为平时成绩评定的的重要依据 不合格（满足如下任一条件） css、html混乱，工作量严重不足（100行）； 没有页面布局结构； css嵌入标签5处以上； 其他错误超过5处，如标签未正确闭合、嵌套错误等。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head title/title style type=text/css body { font-size: large; font-weight: bold; font-family: 微软雅黑; } div, p, span { border: solid 1px black; background-color: #fbb; margin: 2px; } /style /head body div 这是div/div div 这是div/div div 这是div/div p 这是p/p span这是span/spanspan这是span/span /body /html * !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head style type=text/css body { font-size: large; font-weight: bold; font-family: 微软雅黑; } div, p, span, h1, h2, h3, h4, h5, h6 { bor