AdMaster响应式导航页面制作

本次练习我完成AdMaster响应式导航页面制作学习了完整的响应式网页开发相关知识首先掌握标准HTML文档骨架编写理解所有标签需要成对闭合同时使用无序列表搭建导航结构添加视口meta标签保障移动端正常展示利用button标签制作移动端菜单触发按钮。样式部分重点学习弹性盒模型flex布局借助display:flex实现横向导航通过justify-content设置不同的主轴对齐方式适配不同屏幕在小屏幕中使用flex-direction将导航改为纵向排布同时学习媒体查询media设置多个屏幕宽度断点根据浏览器宽度自动切换布局样式使用display属性控制元素显示与隐藏还学习了利用通配符进行基础样式重置统一页面盒模型、清除列表默认样式。交互层面学习使用querySelector获取页面元素通过addEventListener绑定点击事件运用classList.toggle动态切换元素类名实现移动端菜单点击展开与收起效果。整体理解了响应式网页的设计思路同一套页面可以根据设备宽度自适应调整布局满足大屏、中等屏幕、移动端不同的展示需求同时在Dreamweaver工具实操过程中意识到编写代码时要保证完整结构分段粘贴代码容易造成标签缺失引发语法报错。