CSS定位与布局教学

CSS定位与布局教学

本次课程主要讲解了CSS定位、背景固定及JS倒计时的实现方法，并布置了相关的实践任务。

小结

1. CSS定位与背景固定

•定位原理: 介绍了使用position属性进行定位，特别是left/right/top/bottom的百分比定位方式。当定位元素有自身宽度/高度时，50%的定位并非居中，需额外使用transform: translateX(-50%)来实现精确居中。

•背景固定: 强调了background-position属性用于背景图的固定，其原理与前景元素的position固定不同，不能混为一谈。

2. JS倒计时实现

•实现步骤: 详细讲解了通过setInterval实现倒计时的过程，包括：使用HTML和CSS搭建页面布局；通过JavaScript获取DOM元素；利用setInterval函数周期性地执行代码；并通过if判断实现倒计时归零后重置的功能。

•关键要点: 强调了测试的重要性，需确保倒计时从15秒开始，到0秒后能自动重置回15秒。

待办

1. 完成今日课程的四个实践任务

•背景图固定效果。

•工具栏按钮固定效果。

•结束签到按钮固定效果。

•实现15秒倒计时功能。

2. 课后巩固练习

•在书上192-193页，实现指定的图形偏移效果。

•使用按钮控制，将四张图片错位放置。