第3章-a sp.net-使用CSS布局网页.pptVIP

* HTML标签分为两大类： div、p、h2等是常见的块级（block）元素标签 span、a、img等是常见的行内（inline）元素标签 每一个块级元素都定义了一个盒子。 div与span没有特殊的语义，多用于页面布局与排版，因此是网页布局设计中打交道最多的两个标签。 * Demo:ShowBox.htm * div{ border-width:6px; border-color:#000000; margin:20px; /*盒子间距*/ padding:5px;/*内容与边界距离*/ background-color:#FFFFCC; border-style:dashed; } 要点： 通过设定盒子的边框和线型可以在页面上清晰地显示出盒子所占用的页面区域。 属性值个数 说明 2 第1个值表示上下边框的属性 第2个值表示左右边框的属性 3 第1个值表示上边框的属性 第2个值表示左右边框的属性 第3个值表示下边框的属性 4 依次表示上、右、下、左边框的属性（成顺时针方向） * div { border-color:Red Green; border-width:1px 2px 3px; border-style:dotted dashed solid double; } 默认情况下的布局方式 默认情况下，浏览器新起一行显示块元素，而在同一行显示行内元素，这种方式被称为“标准流式布局”。 * Demo:InlineMargin.htm * 行内元素之间的左右距离＝ 左元素的右边距+右元素的左边距 Demo:BlockMargin.htm * 两块之间的上下间距＝ max{上一个块元素的下边距，下一个块元素的上边距} 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 按如下格式定义圆角框逻辑结构 * + 标题 ＝ ＝ ＝ ＝ + 正文 关键： 1 块元素的背景图像可以设置放在哪个角 2 将块的背景色设为与图像一样 * * * 有多种网页的布局模型，根据实际情况选择一种合适的。 在设计前要分析并确定网页的逻辑结构，用div进行界定。 然后通过CSS规则定义出基本块（block）的显示效果。 使用定义好的基本块布局网页，在具体设计时要灵活应用块元素的浮动和定位方式。 在各种版本的浏览器中进行测试。 * 展示一个Demo ASP.NET 程序设计教程 北京理工大学计算机学院 金旭亮 3.1 CSS简介 3.2 在HTML文档中使用CSS 3.3 编写CSS样式规则 3.4 样式的继承与