Web全栈开发案例教程课件 第2章3 响应式布局.pptxVIP

2.3响应式布局;问题起源;响应式网页与传统网页在手机上显示效果;响应式网页设计;2.3.1媒体查询;注意;2.3.2流式布局;注意;;注意;2.3.3自适应图片;2.3.3自适应图片;2.3.4flex布局;2.3.4弹性盒布局;1.开启弹性盒布局;flex-flow属性;2.设置子元素的对齐方式;设置子元素的排列顺序和占据的比例;4.一列固定一列变宽的弹性盒实现;比较：一列变宽一列固定的传统方法;使用弹性盒模型进行1-3-1版式布局;1-3-1版式布局代码;实现响应式布局;5.6.2分栏布局;2.3.5头部代码设置;7.2响应式布局的网站实例;页面布局的代码实现;移动端页面布局的实现;7.2.2页头的设计;7.2.3响应式导航条的制作;小屏幕下导航条的按钮切换;汉堡按钮的本质;制作网站的方法;7.2.4响应式栏目的制作;习题