8-20 响应式 栅格 组件

1.手写响应式

2.flex布局

3定位（float 面试，相对定位+绝对定位+默认流）

4.响应式网页/自适应布局(Responsive Web Page)，根据浏览器设备的不同(pc、pad、phone、print)而自动改变页面布局，图片文字的效果，不影响用户体验

手写响应式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tnPUPiDA-1597931551984)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20200820213952564.png)]

5.组件

1下拉菜单

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xDYY6dvM-1597931551985)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20200820214111228.png)]

事件 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HAaxDH2f-1597931551990)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20200820214154752.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kbnCJsUL-1597931551992)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20200820214215987.png)]

2导航栏

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CSwIacQx-1597931551995)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20200820214439868.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Srs77gt7-1597931551999)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20200820214452405.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZPQUDxLl-1597931552001)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20200820214458853.png)]

6.栅格布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D4Z5YLQI-1597931552004)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20200820214258748.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eThCzPt9-1597931552005)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20200820214311853.png)]

[外链图片转存中…(img-eThCzPt9-1597931552005)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VpUIrejT-1597931552007)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20200820214340374.png)]