18、网页布局与样式设置及办公应用网页选项配置指南

网页布局与样式设置及办公应用网页选项配置指南

一、网页布局与样式设置

（一）创建两列浮动布局

1. 创建样式表并添加 CSS 规则
   - 按照之前所述创建样式表，并添加 CSS 规则。以下是创建两列所需的样式表示例：

/* Acme Virtual Industries 两列样式表, acme_two_cols.css */
#leftcolumn { 
    float: left; 
    width: 35% 
}
#rightcolumn { 
    float: left; 
    width: 60% 
}

• 实际应用中，样式表通常还会包含文本元素的格式设置。
  2. 保存样式表并显示 HTML 页面
• 保存样式表的更改，然后显示 HTML 页面。此时图片及其说明会显示在左侧，主文本显示在右侧。
• 提示 ：如果在让包裹元素显示在正确位置上遇到问题，可以为每个规则添加不同颜色的边框，这样就能看到其边界。

（二）创建三列浮动布局

1. 在 HTML 文件中创建列的 <div> 部分
   - 在 HTML 文件中，为三列分别创建单独的 <div> 部分。