网页设计与制作 课件 28 实现完整的响应式页面.pptxVIP

;入门测

作业分析

知识回顾

%单位

vw和vh单位

rem和em单位;本任务结合前两次课内容，形成一个完整的响应式页面。;制作响应式导航栏

大屏端：导航栏中的各导航链接水平排放。

中小屏端：将导航栏折叠成一个汉堡图标，点击汉堡图标后展开导航栏，再次单击汉堡图标又隐藏导航栏。

;制作响应式Banner

大屏端：屏幕宽度大于1200px，文字区块宽度占容器30%，内边距50px，字体22px，采用绝对定位，顶部偏移30%，右侧偏移10%。

中屏端：屏幕宽度在996px到1200px之间，文字区块宽度占容器50%，内边距30px，字体18px，采用绝对定位，顶部偏移20%，右侧偏移10%。

小屏端：屏幕宽度小于等于996px，文字区块宽度占容器80%，内边距20px，字体14px，采用绝对定位，顶部偏移10%，右侧偏移10%。

;制作响应式Banner

大屏端：1行显示3个li，每个li的宽度应小于34%；

中屏端：当视口宽度在768px至1024px时，1行显示2个li，每个li的宽度要小于50%；

小屏端：视口宽度小于996px时，1行显示1个li。

;将前期完成的页面改写成响应式页面。