C#语言Web程序设计课堂教学教案(第六章)
洛阳理工学院课堂教学教案
教师姓名： 课程名称：Web程序设计 授课时数：6 第12-14次课
C#语言Web程序设计课堂教学教案(第六章)
以下内容属于第12次课：
第6章 页面布局
6.1 CSS样式控制
一、概念
样式是指XHTML标记元素在浏览器中呈现的形式，如字体的大小、颜色等。 一般形式为：
<元素名称 style=” 属性名1:属性值1;属性名2:属性值2; ”> 显示内容</元素名称>
CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
CSS规定了两种定义样式的方法：
直接将样式控制放在单个HTML 元素内，称为内联式 或行内样式
例子：使用style 样式化一个简单页面
<body style="text-align:center">
<form id="form1" runat="server">
<div style="text-align:center; width:400px; border:solid 1px blue">
<h1 style="font-size:x-large; color:red ">欢迎光临</h1>
<h2 style="font-size:large; color:blue ">这是一个被style修饰的
页面</h2>
</div>
</form>
</body>
在网页的head 部分定义或导入的样式，称为级联式样式。
级联式样式又可以分为两种方式来控制样式：
在head 部分直接实现的CSS 样式，称为内嵌式
在head 部分通过导入以扩展名为.css 的文件来实现CSS 样式，称为链
接式
二、设置样式
1、在“源”视图下设置样式
演示：打开VWD 2008，新建一个名为“StyleTest”的http://www.77cn.com.cn Web应用程序，在Default.aspx源文件的body部分输入代码
2、在可视化窗口中设置样式
[实际操作演示]
三、样式规则
C#语言Web程序设计课堂教学教案(第六章)
样式规则是指网页元素的样式定义，包括元素的显示方式以及元素在页中的位置等
演示：在【解决方案资源管理器】中，添加一个样式表文件StyleSheet1.css，打开“添加样式规则”对话框
样式的定义格式：
样式选择符{ 属性1:值1; 属性2:值2; }
样式定义选择符是指样式定义的对象，可以是:
HTML 标记元素、用户自定义的类、用户自定义的ID 、伪类和伪元素等。 样式选择符的分类：
1. 标记选择符
任何HTML 元素都可以是一个CSS 的标记选择符
例如：div{ text-align:center }
2. 类选择符
每一个标记选择符都能自定义不同的类(CLASS) ，从而允许同
一元素具有不同的样式
– 标记选择符. 类名{ 样式属性1: 值1; 样式属性2: 值2; }
–. 类名{ 样式属性1: 值1; 样式属性2: 值2; }
3. ID 选择符
ID 选择符用于分别定义每个具体元素的样式
例如：#index { color:blue }
4. 伪类
伪类是CSS 中非常特殊的类，能自动地被支持CSS 的浏览器所
识别。伪类可以指定XHTML 中的A 元素以不同的方式显示连接
(links) 、已访问连接(visited links) 和可激活连接(active
links)
5. 关联选择符
关联选择符是一个用空格隔开的两个或更多的单一标记选择符组成的
字符串
格式：选择符1 选择符2 { 属性: 值; }
6. 并列选择符
如果有多个不同的元素定义的样式相同，则可以使用并列选择
符简化定义。例如：
例如：h1,h2,h3{ color:blue}
以下内容属于第13次课：
C#语言Web程序设计课堂教学教案(第六章)
6.2 页面布局
网页的基本布局方式
常见的网页布局方式有左对齐、居中和满宽度显示
默认情况下，网页内容水平左对齐
一、页面元素定位
页面元素的定位分为流布局和坐标定位布局两种，其中，坐标定位布局又分为绝对定位和相对定位。
1. 流布局static
如果采用该布局，则页面中的元素将按照从左到右、从上到下的顺序显示，各元素之间不能重叠
如果不设置元素的定位方式，则默认是流式布局
2. 坐标绝对定位absolute
元素在页面中的绝对位置，以坐标定位的父容器为坐标系。
在使用坐标绝对定位之前，必须先将style 元素的position 属性的值设置为absolute ，然后就可以由style 元素的left 、top 、right 、bottom 和z-index 属性。
页面元素定位 （3/3）
3. 坐标相对定位relative
元素在网页中的相对位置，以所在容器内流布局位置为坐标系原点。
在使用坐标相对定位之前，必须先将style 元素的position 属性的值设置为relative ，然后就可以由style 元素的left 、top 、right 、bottom 属性来决定元素在页面中的相对显示位置 。
二、表格布局
利用表格可以将网页中的内容合理地放置在相应的区域，每个区域之间互不干扰
1.表格布局实现方法：
(1)新建一个.aspx 页面，设置body 元素的style 属性为"text-align:center" ，div 元素的style 属性为"width: 780px; text-align:center“
（2）切换到【 设计】 视图，将鼠标光标停在div 标记内。选择菜单【 表】 中的【 插入表】 命令，打开【 插入表】 对话框，定义表格大小为4 行3 列，指定宽度为100% ，边框值为1 ，边框颜色为红色
…… 此处隐藏：2256字，全部文档内容请下载后查看。喜欢就下载吧 ……
，请把【付款记录详情】截图给客服，同时把您购买的文章【网址】发给客服。客服会在24小时内把文档发送给您。
