官网横幅轮播页面

学习了基于Bootstrap3框架结合HTML、CSS和jQuery制作适配电脑与手机端的官网横幅轮播页面，首先掌握了标准网页基础骨架的编写，了解文档声明、页面头部与主体结构的搭建，学会添加字符编码设置和移动端视口标签，让网页在手机上可以正常自适应显示，同时养成了模块化拆分页面的编写思路，把页面从上到下拆分为顶部导航区域和中间轮播大图区域，条理清晰地搭建页面结构；接着熟悉了Bootstrap自带轮播carousel组件的完整HTML结构，知晓外层容器固定类名的用法，依靠data自定义属性设置页面加载后自动播放、两秒的图片切换时长，清楚轮播内容容器、默认展示项需要添加active类、轮播文字放置区域以及左右切换按钮的绑定写法，依靠框架封装好的功能不用自己编写切换逻辑；样式部分学会了传统浮动布局实现导航栏左右内容排布，利用overflow清除浮动带来的布局塌陷问题，调整文字、链接、间距与鼠标样式，最重要的是掌握了用opacity透明度隐藏箭头图标却保留点击区域的技巧，区分开opacity和display:none的差异，前者只是视觉消失、按钮区域仍可点击，后者会让元素彻底移除无法触发切换，还自定义调整了轮播文字的位置、字号与样式，去掉默认文字阴影贴合广告设计效果；脚本层面记住了引入文件的先后顺序，必须先加载jQuery再引入Bootstrap的js文件，顺序出错轮播功能会无法生效；除此之外还理解了响应式网页开发、组件化高效开发的思路，学会把文字需求拆解成具体的代码实现步骤，同时留意开发里的常见易错细节，比如遗漏移动端视口标签会导致移动端页面显示异常、首个轮播项不加active会出现空白、引入脚本顺序颠倒功能失效这些问题。