W3C网页标准之网布局学习任务书.docVIP

附件一： 《DIV+CSS浮动布局复杂页面工作任务书》 工作背景 某知名线下食品连锁店计划开展电子商务业务，主要通过独立B2C站点进行产品销售，后台与前台开发同步进行，目前已经完成了页面模板的设计。你作为网页前端开发人员需要着手进行页面的前台编码工作，页面必须采用DIV+CSS布局完成，要求代码规范、格式良好，能跨浏览器兼容运行。 工作目标 完成页面布局草图的绘制。 完成页面各模块参数的测量。 完成页面布局DIV+CSS代码的编写。 学习目标 能够对设计稿进行分析，并合理划分页面模块。 能够使用Photoshop准确测量页面模块宽度、高度、外边距等参数。 能够使用Photoshop绘制页面布局草图。 能够编写DIV+CSS代码实现页面简单布局。 能配合组长工作，与小组成员紧密合作，提高团队合作能力。 浏览器中最终参考效果图如下： 知识点准备 通过观看教师下发的微课视频，填空回答下面的问题。 1、在宽度符合条件的情况下，假设需要将上图中左边布局通过浮动设置成右边布局，那么，需要先写 模块的div标签，然后设置A模块 浮动，B模块 浮动，C模块 浮动。 2、在宽度符合条件的情况下，如果需要设置成以上布局，那么，需要先写 模块的div标签，然后设置A模块 浮动，B模块 浮动，C模块 浮动。 3