CSS层显示/隐藏特效与元素操作实践

本资源是北大青鸟的JavaScript教程，主要聚焦于层的显示/隐藏特效。章节内容涉及HTML元素的display属性，这是一种关键的CSS属性，用于控制元素在页面上的可见性。display属性有三个主要值： 1. **block**：这是默认值，元素按照块级元素的方式展示，会换行并占用新的行位置。 2. **none**：完全隐藏元素，不占据任何空间，与visibility属性的hidden不同，none隐藏不会保留元素的空间。 3. **inline**：元素按行内元素展示，不会换行，与其他元素在同一行。 学习重点包括了如何通过JavaScript动态地控制层（如DIV）或图片的display属性，实现元素的隐藏和显示切换。此外，还介绍了CSS样式表的相关概念和用法，如： - **CSS样式规则语法**：如何定义和应用样式，包括选择器、属性和值的组合。 - **onMouseOver与onMouseOut**：鼠标悬停事件和离开事件的区别，它们通常用于实现鼠标交互效果。 - **CSS属性**：如`font-size`、`font-family`、`color`等文本属性，以及`background-color`、`background-image`等背景属性的使用。 通过一系列的演示示例，学员将学习如何制作如51job弹出层、图片切换、“点卡”效果以及改变边框样式和按钮图片样式等视觉特效。此外，还将掌握如何使用`style`样式属性来动态改变边框颜色，以及`className`类名属性来改变按钮背景图片，同时利用`display`属性进行层和图片的隐藏/显示切换。 整个教程旨在帮助学生深入理解CSS样式和JavaScript在实现网页交互和动态效果中的作用，从而提升他们的前端开发技能。课程内容涵盖了从基础概念到实践操作的全面覆盖，有助于学员巩固和扩展CSS和JavaScript的知识体系。