【论文】CSS样式表在常见网页布局结构中的实现.pdfVIP

第 25 卷 第 3 期 文山学院学报 Vol. 25 No. 3 2012 年 6 月 JOURNAL OF WENSHAN UNIVERSITY Jun. 2012 CSS样式表在常见网页布局结构中的实现 吴保文 （文山学院 计科系，云南 文山 663000） 摘要：CSS 样式表技术经过多年的发展，在网页格式化中的运用已经相对成熟，随着 Web 标准在国内的 普及，使用 CSS 技术布局网站也将成为网页设计的主流．文章通过对 CSS 概念和几个简单示例的说明， 探 讨了 CSS 在几种常用网页布局中的实现方法． 关键词： 网页设计；层叠样式表；布局 中图分类号：TP393.092.2 文献标识码： A 文章编号：1674-9200（2012）03-0066-04 1 CSS样式表布局网页的优势 容宽度 + 右填充 + 右边框 + 右边界． CSS 在网页中是和 HTML 结合在一起使用的， 3 CSS在常见网页结构中的实现 它可以控制 HTML 中元素的显示格式并扩展它的功 3.1 创建Div对象 能．通过使用 CSS 样式表，不仅可以对文字格式进 使用 Web 标准化设计后，CSS 布局的重点不再 行设置，还可以更加精确地控制布局、字体、颜色、 放在 table 元素的设计上，而是放在 HTML 中的 Div 背景和其他图文效果，从而避免在标识字符和设置 元素上，即采用 Div+CSS 的方式进行布局，但并不 段落格式等操作时重复定义需要的样式，提高网页 意味着完全排除表格的使用．使用 CSS 对页面进行 ［1］ 编辑的效率． 很多人认为 CSS 的主要功能就体现 布局是通过创建 Div 标签并对其应用 CSS 定位或浮 在那些特殊效果的实现上，它的真正核心在于强大 动属性来实现的，若要向文档窗口中插入 Div 标签， 的页面布局能力． 可以选择菜单栏插入→布局对象→ Div 标签命令， 许多 Web 站点都使用基于表格的布局显示页面 或者在插入栏的布局类别中单击 Div 标签按钮，这 信息，传统的表格排版是通过大小不一的表格或表 时将会弹出插入 Div 标签的对话框． 格嵌套来排版网页内容．表格对于显示表格数据很 3.2 二列式布局的实现 有用，且容易创建，但同时表格也会生成大量难以 3.2.1 二列宽度固定 阅读和维护的代码．许多设计者优先选择基于 CSS 二列宽度固定布局在页面设计中通常作为主 的布局，正是因为 CSS 可以在定位元素方面更好地 框架或内容分栏．对于二列式布局，需要用到两个 进行控制，减少所需的代码数量，并可以使用边距、 Div 对象