课程简介
如果将各种各样的信息如文字、图片、动画等不加考虑的塞到页面上，就会导致页面主次不分，喧宾夺主；如果一味追求简洁，就会让人难以找到需要的东西，使页面如一片散沙，只有合理的安排、有机的组合，才能使页面达到平衡，让用户能求有所得，同时给用户带来更优质的视觉体验，这就是web布局的魅力。
本课程详细介绍了web布局的发展、演变和代表类型，结合实际应用，帮助学员梳理不同场景需求下各种布局方式的应用流程，并掌握一套完整的web布局构建方法论，为企业网站建设提供重要支持。
课程收益
1、帮助学员深入了解Web布局的发展和演变；
2、帮助学Flexbox 和 Grid 布局中的具体应用和注意事项；
3、帮助学员构建可适配多终端、兼具创造和艺术性的 Web 布局方案；
4、帮助学员掌握最新 CSS 特性
受众人群
从事网站建设开发人员或对网站建设感兴趣的人员
课程周期
1天（6H）
课程大纲
标题 | 授课内容 |
一、Web 布局的演进和术语 | 1. Web布局技术演进：了解 Web 布局发展史 2. 现代 Web 布局技术术语 |
二、Flexbox 弹性布局 | 1. Flexbox 布局基础使用 2. Flexbox布局中的对齐方式 3. Flexbox 布局中的 flex 属性基础运用 4. Flexbox中的计算：通过扩展因子比例来扩展 Flex 项目 5. Flexbox 中的计算：通过收缩因子比例来收缩 Flex 项目 6. Flexbox 布局中的 flex - basis ：谁能决定 Flex 项目的大小？ 7. 使用 Flexbox 构建经典布局：10种经典 Web 布局 |
三、网格布局 | 1. Grid布局的基础知识 2. 定义一个网格布局 3. Grid布局中的计算 4. 可用于 Grid 布局中的函数 5. 网格项目的放置和层叠 6. Grid 布局中的对齐方式 7. 网格布局中的子网格和嵌套网格 8. 使用子网格构建 Web 布局 9. 使用 Grid 构建经典布局：10种经典布局 10. 使用 Grid 构建创意性 Web 布局 |
四、Flexbox or Grid
| 1. Flexbxo or Grid ：如何选择合适的布局？ 2. display : contents 改变Flexbox 和 Grid 布局模式 3. Web中的向左向右： Flexbox 和 Grid 布局中的 LTR 与 RTL 4. Web中的向左向右： Web 布局中 LTR 切换到 RTL 常见错误 |
五、 未来的 Web 布局
| 1. 内在 Web 设计 2. 创建不规则 Web 布局 3. 如何构建响应式 UI ? 4. 下一代响应式 Web 设计：组件式驱动式 Web 设计 5. 下一代响应式 Web 设计：容器查询 |
京ICP备2022035414号-1
