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

模块5 网站内容与结构优化策略 项目5.1 用户体验优化 5.1.2 响应式布局（一） 学习目标 1、 了解什么是Bootstrap框架 2、知道流式布局的应用 3、 使用Bootstrap构建菜单 任务列表 任务1、制作两列响应式网页 任务2、制作两行多列响应式页面 任务3、制作三幅图文并茂的响应式网页 任务4、制作图片响应按钮隐藏显现 拓展任务、自己设计制作一个响应式网页 任务一 宽屏水平排列小屏垂直排列 重要代码 脚本文件和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水平排列否则垂直排列 图片样式设计 排版 源代码 任务4 宽屏没有立即购买小屏显示 知识点 1、img-responsive 图片响应 divimg src=”” class=”img- re