2天快速掌握xHTML+CSS网页布局技巧

"2天掌握DIV+CSS网页制作技术" 在网页设计领域，`DIV+CSS`是一种常见的布局方法，但这种叫法并不准确。实际上，正确的术语应该是`xHTML+CSS`，它强调的是结构（xHTML）与样式（CSS）的分离。`xHTML`是一种增强版的HTML，遵循更严格的语法规范，而`CSS`则是用于控制网页表现的样式语言。将结构和样式分开，可以提高网页的可维护性、可扩展性和搜索引擎优化（SEO）性能。 基础篇中提到几个关键知识点： 1. **基础一**：`DIV+CSS`的叫法源于传统布局方式——`Table`布局，而现在更推崇使用`DIV`作为布局容器，结合`CSS`实现页面设计。 2. **基础二**：`Table`布局在复杂布局中容易导致代码冗余，不易维护，且对SEO不友好，因此使用`Table`布局是不明智的。 3. **基础三**：`xHTML+CSS`有利于SEO，因为搜索引擎更容易理解结构清晰的代码。 4. **基础四**：`CSS`通过选择器和属性控制页面元素的样式、位置和布局。 5. **基础五**：`CSS选择器`用于选取页面中的特定元素，如ID选择器（`#div1`）、类选择器（`.class`）和元素选择器（`div`）等。 6. **基础六**：`CSS选择器命名`和`常用命名`是良好的编程习惯，便于团队协作和代码可读性。 7. **基础七**：`盒子模型`是`CSS`布局的核心，包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。 8. **基础八**：`块状元素`（如`div`）占据整行，而`内联元素`（如`span`）在同一行内显示。 课程篇中，逐步介绍了以下几个主题： 1. **第一课**：盒模型、块状元素与内联元素的基础，以及`CSS选择器`的使用。 2. **第二课**：`浮动`（float）用于元素的布局，使元素可以左右移动。 3. **第三课**：`清除浮动`（clear浮动）解决因浮动引起的父元素高度塌陷问题。 4. **第四课**：`导航条`的制作，通常涉及浮动和链接样式。 5. **第五课**：`浮动布局`用于创建多列布局，常用于早期网页设计。 6. **第六节**：`定位`（positioning）包括相对定位、绝对定位和固定定位，允许元素相对于其正常流或相对于其他元素定位。 7. **第七节**：`定位应用`展示如何在实际场景中灵活运用定位。 8. **第八课**：`CSS Hack`处理浏览器之间的兼容性问题，通过特定的语法让样式只对某些浏览器生效。 小技巧部分涵盖了实践中的一些实用方法，如： - **单张图片按钮实例**：如何利用CSS将一张图片制作成按钮，控制其样式和交互效果。 - **首行文字两文字缩进**：使用CSS实现首行或首字母的特殊排版需求。 在学习`DIV+CSS`的过程中，理解这些基础概念和技术，并通过实践来巩固，是快速上手的关键。只有深入理解`xHTML`和`CSS`的工作原理，才能更好地创建符合现代网页设计标准的页面。