HTML5+CSS3移动Web开发实战 单元4 商品信息展示网页设计.pptxVIP

单元?4 商品信息展示网页设计 购物网站通常会以图文混排的方式展示商品外观和有用信息，以吸引顾客选购商品。本单元通过对购物网站的商品列表网页和品牌展示网页设计的探析与训练，重点讲解HTML5中的列表标签、CSS的列表属性、表格属性和定位属性等内容。读者应学会在网页中合理地使用列表、表格和CSS定位属性展示相关信息，以及应用列表、表格和CSS定位设计商品信息展示网页的方法。实例探析任务4-1 探析麦包包网触屏版的热销商品网页【效果展示】 麦包包网触屏版的热销商品网页0401.html的浏览效果如图4-1所示。 麦包包网触屏版的热销商品网页0401.html的主体结构为顶部、中部、底部结构，顶部内容包括Logo图片、用户登录超链接按钮和购物车超链接按钮，中部内容为热销商品列表，底部为多个导航超链接。图4-1　麦包包网触屏版的热销商品网页0401.html的浏览效果【网页探析】1．网页0401.html的HTML代码探析 网页0401.html的HTML代码如表4-1所示。表4-1　网页0401.html的HTML代码续表续表 网页0401.html主体结构的HTML代码如表4-2所示。该网页主体结构包括3个组成部分，分别为顶部、中部和底部，其中，顶部结构使用header标签实现，中部结构使用section标签实现，底部结构使用footer标签实现。表4-2　网页0401.html主