HTML与CSS实现的通栏布局实例分析
5星
- 浏览量: 0
- 大小:None
- 文件类型：PDF
简介：
本篇文章详细解析了使用HTML和CSS创建全屏宽度（通栏）布局的实际案例，深入探讨了各种布局技巧及其应用。
HTML DIV与CSS是网页设计中的常用技术组合，用于布局和样式控制。在这篇文章里，我们将探讨如何使用这些技术创建一个具有通栏样式的网页。
所谓通栏（Full-Width），是指网页元素横跨整个浏览器窗口宽度的设计方式，通常用来创造更广阔的视觉效果或统一的背景颜色。在这个例子中，`#header`、`#menu_bg`和`#footer_bg`都设置为 `width:100%` ，确保它们占据整个浏览器窗口的宽度，实现了通栏的效果。
HTML部分主要由几个 `
` 标签构成，每个 `
` 对应一个页面元素，如页头、菜单、主要内容区域（wrap）和页脚。这些块级元素可以容纳其他内容，并用于组织网页结构。
CSS部分则是通过设置各种属性来控制这些元素的样式与布局：
1. `*{ margin:0; padding:0; }` 这个选择器将所有元素的内外边距设为零，以避免浏览器默认样式的干扰。
2. `#header`、`#menu_bg`和`#footer_bg`分别设置了背景颜色（如灰色或粉色），以便区分不同的区域。
3. `#menu`内的 `
- ` 和 `
- ` 元素定义了菜单的样式。通过浮动设置使菜单项水平排列，并规定链接的颜色及悬停时的变化效果。 4. 主要内容区 `#wrap` 设置了一个固定的宽度（980px），并居中显示，背景颜色为绿色。 5. `.friend_links li` 定义友链列表的样式，使得每个 `
- ` 元素以行内元素方式展示，并使它们水平排列。 此外，在 `