45站开发实用教程电子教案 杨春元 第四.pptVIP

* 第*页 页面满宽度显示 设置页面满宽显示的方法是将div的固定宽度设置为百分比即可。例如下面的代码： body style=text-align:center; form id=form1 runat=server div id=div1 style=width:98%; text-align:center; height:200px/div /form /body * 第*页 页面元素定位 页面元素的定位分为流布局和坐标定位布局两种，其中，坐标定位布局又分为绝对定位和相对定位，这里仅介绍流布局和坐标绝对定位。 如果采用该布局，则页面中的元素将按照从左到右、从上到下的顺序显示，各元素之间不能重叠。如果不设置元素的定位方式，则默认就是流式布局。 在使用坐标绝对定位之前，必须先将style元素的position属性设置为absolute，然后就可以由style元素的left、top、right、bottom和z-index属性来决定元素在页面中的绝对位置。left属性表示元素的x坐标，top属性表示元素的y坐标，坐标的位置是以它最近的具有position属性的父容器为参照物的。 * 第*页 表格布局 坐标定位布局又分为绝对定位和相对定位，这里仅介绍流布利用表格可以将网页中的内容合理地放置在相应的区域，每个区域之间互不干扰。 * 第*页 DIV和CSS布局 在传统的表格布局中，完全依赖于表格对象TABLE，通常，在页面中绘制多个单元格，在表格中放置内容，通过表格的间距或者用无色透明的GIF图片来控制布局版块的间距，达到排版的目的。而以DIV对象为核心的页面布局中，通过层来定位，通过CSS定义外观，最大程度地实现结构和外观彻底分离的布局效果，因此习惯上对层布局又称为DIV和CSS布局。 层布局最核心的标签就是DIV。DIV是一个容器，在使用时以DIV/DIV形式存在。在XHTML中，每一个标签都可以称为容器，能够放置内容。但DIV是XHTML中专门用于布局设计的容器对象。 * 第*页 盒子模型 自从 1996 年CSS1 的推出，W3C 组织就建议把所有网页上的对象都放在一个盒子(box)中，设计师可以通过创建定义来控制这个盒子的属性，这些对象包括段落、列表、标题、图片以及层。盒子模型主要定义了4个区域：内容(content)、边框距(padding)、边界(border)和边距(margin)，如图所示。 * 第*页 层的定位 在一个页面中定义多个层，会发现这些层自动排列在不同的行，而要真正实现左右排列，就要加入新的属性——float(浮动属性)。float浮动属性是DIV和CSS布局中的一个非常重要的属性。大部分的DIV布局都是通过float的控制来实现的。具体参数如下。 float:none用于设置是否浮动 float:left用于表示对象向左浮动 float:right用于表示对象向右浮动 * 第*页 利用DIV和CSS实现页面布局 DIV只是一个区域标识，划定了一个区域，要实现样式还需要借助于CSS。CSS可以实现左右分栏，也可以实现上下分栏，而表格则没有这么大的灵活性。CSS与DIV的无关性，决定了DIV在设计上有极大的伸缩性，而不拘泥于单元格固定的模式束缚。因此，实现网页布局，通常是先在网页中将内容用DIV标记出来，然后再用CSS来编写样式。 采用DIV和CSS布局之前，首先要分析网页有哪些内容块，以及每个内容块的含义，这就是所谓的网页结构。 * 第*页 本章内容 4.1 CSS样式 4.2 在VS中使用CSS 4.3 页面布局 4.4 主题 4.5 母版页 4.6 上机练习 4.7 习题 * 第*页 4.4 主题 主题是定义页面和控件外观的文件的集合。它通常包含外观文件(扩展名为.skin)、级联样式表文件(扩展名为.css)、图片和其他资源等的组合，但一个主题至少包含一个外观文件。 主题概述 创建和应用主题 主题的应用级别 动态切换主题 * 第*页 外观文件 外观文件是主题的核心文件，也称为皮肤文件，专门用于定义服务器控件的外观。在主题中可以包含一个或多个外观文件，外观文件的后缀名为.skin。 在控件外观设置中，只能包含主题的属性定义，如样式属性、模板属性、数据绑定表达式等，不能包含控件的ID，如Label控件的外观设置： asp:Label runat=server BackColor=Blue Font-Names=Arial Narrow / 这样,一旦将该外观应用到Web页面中，所有的Label控件都将显示外观所设置的样式。 * 第*页 级联样式表文件 主题中可以包含一个或多个CSS文件，一旦CSS文件被放在主题中，则应用时无需再在页面中指定CSS文件链接，而是