CSS布局网页基础幻灯片.ppt

3.1 CSS简介 3.2 在HTML文档中使用CSS 3.3 编写CSS样式规则 3.4 样式的继承与层叠 3.5 CSS盒模型 3.6 流式布局与浮动布局 3.7 盒子的定位方式 3.8网页布局实践;SimplestPage.htm;*;行内式：在HTML标签的style属性中编写CSS代码 嵌入式：在head/head中编写CSS代码 链接式：使用link链接外部CSS文件 link type=text/css rel=stylesheet href=mycss.css / 导入式：使用@import指令 style type=text/css @import mystyle.css; /style;CSS文档由一条或多条CSS规则组成，规则拥有特定的格式：;;用于设定HTML文档中指定标签的显示样式;给特定的一组CSS代码取名，然后可以应用于多个不同的标签： ;对于页面中独一无二的元素，如页脚，可以给其id属性赋予一个独一无二的值;超链接标签a支持几个特殊的CSS样式类，用于定义超链接不同状态的样式，这些样式类被称为“伪类（pseudo class）”;将前面介绍 的“标记选择器”、“类别选择器”和“ID选择器”统称为“基本选择器”。 “复合选择器”包括： （1）交集选择器 （2）并集选择器 （3）后代选择器 ;直接指定特定标记中特定类别或ID的样式。;一次定义多个标签或类别或ID的样式;选择嵌套在指定元素的内部元素的样式;CSS选择器是编写样式表文档的基础，一定要熟悉并掌握这六种基本的选择器样式，从而为今后网页设计打下基础。;浏览器如何显示未定义样式的元素？ 样式定义相互冲突时如何决定最终显示效果？;*;选择器定义的规则相互冲突怎么办？ Demo:CascadingExample.htm;页面布局的关键 CSS强大排版能力的根基;;;;HTML标签分为两大类： div、p、h2等是常见的块级（block）元素标签 span、a、img等是常见的行内（inline）元素标签 每一个块级元素都定义了一个盒子。 div与span没有特殊的语义，多用于页面布局与排版，因此是网页布局设计中打交道最多的两个标签。;Demo:ShowBox.htm;;默认情况下，浏览器新起一行显示块元素，而在同一行显示行内元素，这种方式被称为“标准流式布局”。;Demo:InlineMargin.htm;Demo:BlockMargin.htm;默认??况下的布局方式;Demo:EmbodiedBoxMargin.htm;让一切“动”起来！;盒子拥有一个float属性，可以设置为向左或向右浮动 Demo: floatleft.htm和SreamLayout.htm 要点： float属性让盒子浮动起来，自动贴靠于其父元素的左或右边缘。 设置了float属性的盒子自身宽度由其内部保持标准流布局的元素宽度决定。;决定元素的真正位置;主要影响网页布局的是块元素。 块元素有两种主要的显示方式：流式布局与浮动布局 流式布局比较简单： （1）块元素分行显示 （2）行内元素在同一行内显示，一行显示不下则折行。 对于浮动布局，情况就复杂得多，盒子模型中定义了一个position属性用于指定元素的布局方式。;position=static demo: staticPosition.htm 这是默认的属性值，表明盒子中的元素按照标准流方式进行定位，“该在哪就在哪”。;position=relative demo: relativePosition.htm.htm 要点： 使用相对定位方式的盒子，会相对于它原本的位置有一个偏移，到达一个新位置。 使用相对定位方式的盒子仍在标准流中，因此会影响其后继元素的定位 关键：弄清楚以什么为基准定位;position=absolute demo: absolutPosition_1.htm和absolutPosition_2.htm 要点： 使用绝对定位的盒子以它“最近”的一个已经定位的父元素为基准进行定位，如果没有这样的元素，则以浏览器窗口为基准。 绝对定位的盒子从标准流中脱离，它们对其后元素的定位没有影响。 “已经定位”：指position属性被设置为除static以外的所有值之一。 ;position=fixed Demo:fixedPosition.htm 要点： 1 采用固定定位方式的盒子以浏览器窗口为基准定位。 2 采用固定定位方式的盒子脱离了原来的标准流，它的兄弟盒子定位时将其视为“不存在”。 3 采用固定定位的盒子不理会父盒子的定位方式。 ;灵活应用所学知识进行实践;步骤： 1 创建四个角的小图像 2 按如下格式定义圆角框逻辑结构;;;;;有多种网页的布局模型，根据实际情况选择一种合适