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