搜索引擎优化教学课件作者俞国红模块5网站内容与结构优化策略项目5.1用户体验优化5.1.2响应式布局（一）.pptVIP

模块五 网站内容与结构优化策略 项目5.1用户体验优化 5.1.2 响应式布局 学习目标 1、 了解什么是Bootstrap框架 2、知道流式布局的应用 3、 使用Bootstrap构建菜单 任务列表 任务1、制作两列响应式网页 任务2、制作两行多列响应式页面 任务3、制作三幅图文并茂的响应式网页 拓展任务、自己设计制作一个响应式网页 课堂练习 简单的两列式布局，创建一个 .row 容器，并在容器中加入合适数量的 .span* 列 任务一 重要代码 脚本文件和css文件利用 script src=jquery.min.js/script script src=bootstrap.min.js/script link href=bootstrap.min.css rel=stylesheet 源代码 任务二 拉伸保持不变 知识点 class=“row”一行 class=“col-xs-”始终保持水平排列 12列分配 源代码 任务三 大屏 中屏 移动端 知识点 hidden-xs 小于728px隐藏 class=“col-sm-”大于768px水平排列否则垂直排列 图片样式设计 排版 源代码 本课小结 class=“row”行 class=“col-xs-”始终保持水平排列 class=“col-sm-”=768px水平排列 class=“col-m