项目3线上博物馆

HTML5的优势解决了跨浏览器的问题新增多个新特性（语义化标签、多媒体标签、canvas元素、本地存储等）用户优先原则化繁为简的优势学习目标知识目标理解网页模块命名的规范理解布局视口、视觉视口和理想视口的概念掌握百分比布局的使用理解Flex布局的结构掌握Flex容器属性与项目属性的使用掌握媒体查询的语法和用法掌握Rem布局和Grid布局的使用技能目标熟练使用视口和百分比布局完成移动端线上博物馆的基础布局熟练使用Flex布局搭建更丰富与个性化的移动端线上博物馆熟练使用媒体查询、Rem布局和Grid布局搭建更美观与便捷的移动端线上博物馆

HTML5的优势解决了跨浏览器的问题新增多个新特性（语义化标签、多媒体标签、canvas元素、本地存储等）用户优先原则化繁为简的优势学习目标素质目标培养学生具备响应式设计思维，能够从用户体验出发设计网页培养学生养成良好的网页模块命名规范意识，注重代码的可读性和可维护性

HTML5的优势解决了跨浏览器的问题新增多个新特性（语义化标签、多媒体标签、canvas元素、本地存储等）用户优先原则化繁为简的优势学习内容任务1完成移动端线上博物馆的基础布局任务2为线上博物馆添加Flex布局任务3为线上博物馆设置Rem与Grid布局

HTML5的优势解决了跨浏览器的问题新增多个新特性（语义化标签、多媒体标签、canvas元素、本地存储等）用户优先原则化繁为简的优势项目描述移动端线上博物馆项目主要以首页为例，使用不同布局展示不同的首页效果。首页展示的内容主要包括标题模块、广告模块、栏目分类模块、专题展览模块和底部导航栏模块（任务3中实现）。通过对移动端线上博物馆项目的学习，读者将掌握网页模块的命名规范、视口、百分比布局、Flex结构、Flex容器与项目属性、媒体查询、Rem布局和Grid布局等知识的运用。

任务1完成移动端线上博物馆的基础布局1

HTML5的优势解决了跨浏览器的问题新增多个新特性（语义化标签、多媒体标签、canvas元素、本地存储等）用户优先原则化繁为简的优势需求分析需求的具体介绍如下。1.移动端线上博物馆首页包含标题模块、广告模块、栏目分类模块和专题展览模块。2.标题模块中展示页面的名称。3.广告栏模块中展示一张博物馆的图片。4.栏目分类模块中展示历史故事、展馆活动、旅游指南和预订中心的图标和文字信息5.专题展览模块中展示中国古代不同专题的图片信息。

HTML5的优势解决了跨浏览器的问题新增多个新特性（语义化标签、多媒体标签、canvas元素、本地存储等）用户优先原则化繁为简的优势需求分析通过需求使用百分比布局实现线上博物馆首页的效果如右图所示。

HTML5的优势解决了跨浏览器的问题新增多个新特性（语义化标签、多媒体标签、canvas元素、本地存储等）用户优先原则化繁为简的优势知识储备一、网页模块命名规范二、视口三、百分比布局

HTML5的优势解决了跨浏览器的问题新增多个新特性（语义化标签、多媒体标签、canvas元素、本地存储等）用户优先原则化繁为简的优势一、网页模块命名规范一般而言，为网页模块命名时需遵循三大核心原则。（1）命名避免使用中文字符（如id=内容）。（2）命名不能以数字开头（如id=1header）。（3）命名不能使用关键字（如id=div）。在网页开发中，常用驼峰式和帕斯卡这2种命名方式，具体说明如下。（1）驼峰式命名：除第一个单词后面的单词首字母都要大写(如navOne)。（2）帕斯卡命名：每个单词之间用“_”连接(如nav_one)。

HTML5的优势解决了跨浏览器的问题新增多个新特性（语义化标签、多媒体标签、canvas元素、本地存储等）用户优先原则化繁为简的优势二、视口在PC端，视口仅表示浏览器的可视区域，视口宽度与浏览器窗口宽度保持一致。在移动端，视口与移动端浏览器的宽度并不关联，移动端视口较为复杂，主要涉及三个视口：布局视口、视觉视口和理想视口。