2016样式控制与面布局.pptVIP

第3章 样式控制与页面布局 第3章 样式控制与页面布局 3.1 样式与样式生成器 3.2 网页布局与页面元素定位 3.3 CSS样式控制 3.4 页面布局 3.5 样式控制与布局综合举例 3.1 样式与样式生成器 XHTML 每一个标记都是一个元素 样式 指元素在浏览器中呈现的形式。在XHTML中，使用style设置元素的样式，每个style内包含一个或多个属性，其一般形式为： style=属性名1:属性值1; 属性名2:属性值2; …… 属性名与属性值之间用冒号“:”分隔，如果一个样式中有多个属性，各属性之间用分号“;”隔开。 3.1.1 在源视图下设置样式 【例3-1】使用style设置样式。 3.1.1 在源视图下设置样式 %@ Page Language=VB AutoEventWireup=false CodeFile=Default.aspx.vb Inherits=_Default % !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head id=Head1 runat=server title无标题页/title /head body style=text-align: center form id=form1 runat=server div style=text-align:center; width:408px; border:solid 1px green; h1 style=color:Red 登鹳雀楼/h1 p style=color:#ff7f50 王之涣/p h2 style=color:Blue 白日依山尽，/h2 h2 style=color:Blue 黄河入海流。/h2 h2 style=color:Blue 欲穷千里目，/h2 h2 style=color:Blue 更上一层楼。/h2 /div /form /body /html 3.1.2 利用样式生成器设置样式 样式生成器 可以帮助设计者快速设置元素的样式，在“设计”视图下，选择某个元素，然后用鼠标右键单击该元素，在快捷菜单中选择“样式”命令，即可弹出如下图所示的“样式生成器”对话框。 3.1.2 利用样式生成器设置样式 “样式生成器”对话框分为两个窗格。左窗格列出8个常规类别（字体、背景、文本、位置、布局、边缘、列表和其他）。当选择某个类别时，右窗格显示所选类别下的选项。选择了样式选项并单击“确定”按钮后，样式生成器会自动在“源”视图中生成对应的样式定义。 注意：当选择属性为“未设置”时，不会向样式中添加任何代码。可以利用这个特点清除原来设置的样式。 【例3-2】利用样式生成器，在例3-1的基础上添加一个背景图。 3.1.2 利用样式生成器设置样式 3.1.2 利用样式生成器设置样式 3.2.1 网页布局 网页布局方式 左对齐（默认情况下，网页布局为水平左对齐显示） 居中 满宽度显示 网页水平居中显示，宽度固定 在body的style样式中，设置text-align属性为center。如果希望页面宽度固定，可以通过设置div的width属性实现，代码示例如下： body style=text-align: center; form id=form1 runat=server div id=div1 style=width: 760px; text-align: left; height: 200px; /div /form /body 3.2.1 网页布局 网页满宽度显示，宽度随浏览器显示界面大小自动调整 将固定宽度变为百分比： body style=text-align: center; form id=form1 runat=server div id=div1 style= width: 98%; text-align: left; height: 144px; border:solid 1px red