第2章 网页设计基础39623.pptVIP

2.4 页面布局 2.CSS+DIV布局技术的常用技巧（三） 2.4 页面布局 2.CSS+DIV布局技术的常用技巧（四） 2.4 页面布局 2.CSS+DIV布局技术的常用技巧（五） 2.4 页面布局 2.4.3 页面元素的定位 流布局定位（static） 使页面中所有元素按照从左到右、从上到下的顺序显示，各元素之间不重叠。（XHTML默认） 实现布局页面时需要配合float属性和clear属性使用。 2.4 页面布局 2.4.3 页面元素的定位 坐标绝对定位（absolute） 使元素显示在页面中的位置由style样式中left、right、top和bottom以及z-index属性值决定 具有相同z-index属性值的元素可以重叠，其效果就像多张透明纸按顺序叠放在一起一样， z-index属性值大的显示在上层。 left、right、top和bottom分别表示元素距左、右、上、下边的距离。 虽然这种定位方式的名称叫“绝对定位”，但实际上元素的坐 标位置是以距元素最近的具有定位属性（position）的父容器 作为参照物的。如果不存在具有position属性的父容器，则元 素将以浏览器窗口为参照物。 2.4 页面布局 2.4.3 页面元素的定位 坐标相对定位（relative） 使元素显示在页中的位置由style样式中left、top和z-index的属性值决定。 与绝对定位不同，具有相同z-index属性值的元素不会重叠。 2.4 页面布局 【例2-3】新建一个ASP.NET网站，在Default.aspx页面的源视图中，参照下列的代码修改页面。按 键在浏览器中打开网页并改变浏览器窗口的宽度，观察各层位置的变化情况。 2.4 页面布局 2.4 页面布局 分析： div1的父容器是body，而body位置相对浏览器居中，而且div1没有设置position属性，故div1相对浏览器居中显示。 div2的父容器是div1，即div2是div1的一个元素，故div2的显示方式要相对父容器左对齐。 div3的父容器是div2，但div2和div1都没有设置position属性，而且div3的position属性为absolute，且设置了top、left和z-index属性，故div3相对浏览器窗口固定不变 。 div4的父容器是设置了position属性的div3，其所有位置设置都是相对div3而言的。Div4相对div3顶端20px，相对div3左边框30px。 2.4 页面布局 思考：如果将div4的position属性改为absolute其显示效果会发生变化吗？为什么？ 2.2 在Visual Studio中设计网页 2.2.2 .aspx文件与XHTML Web服务器端控件与普通XHTML元素的不同点就是具有runat “srever”（在服务器端运行）的属性。 例如： asp:Button ID “Button1” runat “server” Text “确定”/ asp:Label ID “Label1” runat “server” Text “Label” /asp:Label 2.2 在Visual Studio中设计网页 2.2.2 .aspx文件与XHTML %@ Page Language “C#” AutoEventWireup “true” CodeFile “Default.aspx.cs” Inherits “_Default”% !DOCTYPE html PUBLIC”_//W3C//DTD XHTML1.0 Transitional//EN” ”/TR/xhtml/DTD/xhtml1-transitional.dtd” html xmlns “/1999/xhtml” head runat “server” form id “form1” runat “server” 在Visual Studio中新建一个网站项目或 添加一个新页面时，系统会创建一个空 白的.aspx文件的内容。 页面的“@Page指令” Language：指示程序代码使用的语言，如C#、VB等。 AutoEventWireup：指示是否自动与某些特定事件关联。 如Page_Init 页面初始化 ，Page_Load（页面装 入）等。默认值为true. CodeFile：指示了实现功能的程序文件名称，如果使用 C#为程序设计语言，则程序文件的扩展名为.cs。 Inherits：指示供页面继承的代码隐藏类。 Visual Studio默认地将整个.aspx页面包含到一个 用于布局的“层”中，通过对层的属性进行统一的设 置就能影响页面中所有的XHTML元素的外观。 2.2 在Visu