Div+css布局方法.docVIP

Div+Css布局方法 一、定义窗体。 新建一个空白html文档，并保存。 打开窗口css样式，打开css面板，切换到“全部”模式，在css面板底部单击“新建css规则”按钮。 当“新建css规则”对话框出现时，选择“选择器类型：标签”，在标签框中选择body标签，选择定义在“新建样式表文件”，然后单击确定按钮。 将css另起名保存在站点中。 在“body的css规则定义”对话框中，从“分类”栏单击“背景”，在右侧选择“背景颜色”，定义背景颜色为白色。 在左侧分类栏中单击区块，在右侧文本对齐中选择居中。 在左侧分类栏中单击方框，在填充区域“上”中输入“0”，在边界区域中“上”中输入“0”，单击确定按钮。 二、定义外部封套。 新建css规则，选择“选择器类型：高级”，在“选择器”中输入#wrapper，定义在刚才建立的css文件中。（以下凡新建css规则均如此）注：开头的#标记为一种id选择器，这种选择器每页只能应用一次。 在“#wrapper的css规则定义”对话框中，从分类里单击区块，从文本对齐中选择左对齐。 从分类中单击方框，在宽中输入760，边界区域中取消全部相同复选框，在上、下中输入0，在左、右中选择自动，单击确定。注：左右边框被设置为自动，是为了使“#wrapperdiv”及其中包含的页面内容居中显示。如果浏览器窗口比760像素大，多出的宽度值就会被划分并自动平均应用于左右边框。 在“插入”工具栏中“常用类”里单击“插入div标签”按钮，选择如下图： 三、建立主要部分 新建css规则#header，如下图： 单击分类栏中的方框，设置如下： 新建css规则“#content”，设置如下图： 在css面板中，右键单击“#header”标签，选择复制，在选择器框中输入“#footer”，然后单击确定。 在css面板中选择“#footer”，然后从属性窗格中，单击“添加属性”。在栏中输入“clear”，在右侧选择“both”。注：clear.both属性确保不会有浮动元素侵入#footer中。 选择占位符文本“此处显示 id wrapper 的内容”，按delete删除掉。 插入header标签，单击常用插入栏中的“插入div标签”按钮，设置如下图： 注：选择“在开始标签之后”表示要将header插入到wrapper之中而不是之后。 插入contentr标签，单击常用插入栏中的“插入div标签”按钮，设置如下图： 注：“在标签之后”表示把content标签插入到header标签之后而不是之中。 插入footer标签，单击常用插入栏中的“插入div标签”按钮，设置如下图： 四、添加内容区域 1、新建#logocss规则，如下图： 2、在分类栏中选择方框，设置如下： 3、在插入工具栏中，单击“插入div标签”按钮，设置如下： 4、删除占位符文本“此处显示 id header 的内容” 5、在css面板中复制#logo标签，命名为#nav，并在#nav属性窗口修改高度为28，并删除padding-bottom属性。 6、插入nav标签，设置如图: 7、在css面板中复制#nav标签，命名为#banner，并在#banner属性窗口中修改高度为200. 8、插入banner标签，设置如图： 9、新建css规则，在选择器中输入“#leftcolomn”，确定选择器类型为高级。 10、在分类中选择方框。设置如下： 11、在css面板中右键选择#leftcolomn标签，复制，命名为#rightcolomn，修改对齐属性（float）的值left改为right。 12、插入左浮动元素，在常用工具栏中单击插入div标签按钮，设置如下： 13、插入右浮动元素，在常用工具栏中单击插入div标签按钮，设置如下： 14、删除占位符文本“此处显示 id content 的内容” 五、插入占位符 1、选择占位符“此处显示 id logo 的内容”，按delete删除，并在常用插入栏中，图像菜单按钮的下拉列表中选择“图像占位符”。 2、当图像占位符对话框打开时，在名称中输入logo，宽度中输入760，高度中输入71，其他保留默认。单击确定按钮。 3、重复1—2步，将nav和banner标签创建占位符。 4、将光标定在占位符文本“此处显示 id leftcolomn 的内容”中，从标签选择器中选择“div #leftcolomn”按键盘上的左箭头一次，然后输入“Main Heading”,并在属性栏中找到格式，从下拉列表中选择标题1. 5、选择占位符文本“此处显示 id leftcolomn 的内容”，按delete键删除，输入文本“Subheading”， 并在属性栏中找到格式，从下拉列表中选择标题2，按Enter键在标题下面创建新的一行，再输入大量文本