【使用HTML开发商业网站-DIV（CSS布局布局及常用属性课件）】`：段落标签。 - `

`~`

`：标题标签。 - ``：超链接。 - ``：图片标签。 --- 二、DIV + CSS布局原理 在传统的表格布局（Table Layout）逐渐被淘汰后，现代网页设计普遍采用DIV + CSS布局方式。这种方式更加灵活、可维护性更强，也更符合响应式设计的需求。 1. 布局基本思想 - 语义化结构：使用合理的HTML标签组织内容，提高代码可读性和SEO优化。 - 盒模型：每个元素都可以看作是一个盒子，包括内容、内边距、边框和外边距。 - 定位方式：通过`position`属性实现元素的绝对定位、相对定位、固定定位等。 2. 常见布局类型 - 流式布局（Fluid Layout）：根据浏览器窗口大小自动调整布局。 - 弹性布局（Flexbox）：适用于一维布局，适合对齐和分布元素。 - 网格布局（Grid）：适用于二维布局，适合复杂页面结构。 - 浮动布局（Float）：传统布局方式，常用于多列布局。 --- 三、CSS常用属性详解 CSS（Cascading Style Sheets）用于控制网页的外观和格式。以下是部分常用的CSS属性及其用法： 1. 文本样式 | 属性 | 说明 | |------|------| | `color` | 设置文字颜色 | | `font-size` | 设置字体大小 | | `font-family` | 设置字体类型 | | `text-align` | 设置文本对齐方式 | | `line-height` | 设置行高 | 2. 盒模型相关 | 属性 | 说明 | |------|------| | `width` / `height` | 设置元素宽度和高度 | | `padding` | 内边距 | | `margin` | 外边距 | | `border` | 边框设置 | | `box-sizing` | 控制盒模型计算方式（content-box / border-box）| 3. 定位与布局 | 属性 | 说明 | |------|------| | `position` | 定位方式（static, relative, absolute, fixed, sticky） | | `top` / `right` / `bottom` / `left` | 定位偏移量 | | `display` | 元素显示方式（block, inline, flex, grid） | | `float` | 浮动属性（left, right, none） | 4. 背景与边框 | 属性 | 说明 | |------|------| | `background-color` | 背景色 | | `background-image` | 背景图片 | | `background-repeat` | 背景重复方式 | | `border-radius` | 圆角边框 | | `box-shadow` | 阴影效果 | --- 四、实际案例分析 以一个简单的商业网站页面为例，展示如何利用HTML和CSS进行布局设计： 1. HTML结构示例 ```html

公司名称

侧边栏

主要内容区域

版权信息

``` 2. CSS样式示例 ```css body { margin: 0; font-family: Arial, sans-serif; } .header { background-color: 333; color: white; padding: 10px; text-align: center; } nav ul { list-style-type: none; padding: 0; display: flex; justify-content: center; } nav li { margin: 0 15px; } .content { display: flex; } .sidebar { width: 200px; background-color: f4f4f4; padding: 10px; } .main { flex: 1; padding: 20px; } .footer { background-color: 333; color: white; text-align: center; padding: 10px; } ``` --- 五、总结 通过本课件的学习，我们了解了HTML和CSS的基本结构与功能，掌握了使用DIV + CSS进行页面布局的方法，并熟悉了常见的CSS属性及其应用场景。在实际开发中，合理运用这些技术能够有效提升网页的可维护性、兼容性和用户体验。 随着Web技术的不断进步，建议持续学习最新的CSS规范（如Flexbox、Grid），并关注响应式设计、渐进增强等先进理念，以适应不断变化的市场需求。