HTML CSS DIV网页设计与布局（第3版）（微课版） 课件 第15章 网页布局综合案例——BABY HOUSING网上商店.pptx

第15章网页布局综合案例——

BABYHOUSING网上商店

15.1案例分析 15.2内容分析 15.4布局设计 15.5交互效果设计 15.6Banner自动轮播效果 15.7小结

15.1案例分析网站首页效果如图15.1所示。

页头部分的导航菜单具有鼠标指针经过时发生变化的效果，如图15.2所示。

15.2内容分析标题、标志、主导航栏、关于我们、登录账号、购物车、今日推荐、最受欢迎、分类推荐、搜索商品框、商品分类、特别提示、版权信息。

15.3原型设计先设计图15.3所示的网站首页原型线框图。

页面从上至下依次分为3部分，如图15.4所示。页头部分可以细化为图15.5所示的效果。

中间内容部分分为左、右两栏，如图15.6所示，再进一步细化为图15.7所示的效果。

15.4布局设计15.4.1整体样式设计 15.4.2页头部分 15.4.3中间内容部分 15.4.4页脚部分

15.4.1整体样式设计代码分为3部分：页头部分、中间内容部分和页脚部分，每部分用一个div元素划分。

15.4.2页头部分1．设置头部样式2．设置h1标题样式3．设置网站Logo样式4．设置顶部导航栏样式5．设置主导航栏样式6．设置登录账号与购物车样式

15.4.3中间内容部分1．主要内容2．侧边栏3.设置圆角框中的样式

15.4.4页脚部分

15.5交互效果设计15.5.1顶部导航栏 15.5.2主导航栏 15.5.3登录账号和购物车 15.5.4图像边框 15.5.5商品分类

15.5.1顶部导航栏

15.5.2主导航栏

15.5.3登录账号和购物车

15.5.4图像边框

15.5.5商品分类

15.6Banner自动轮播效果

15.7小结本章为BABYHOUSING儿童用品网上商店的网站制作一个完整的首页。希望读者通过这个案例的学习，可以了解网页设计流程，并能熟练应用前面介绍的HTML、CSS和JavaScript语言的相关知识。读者也可以根据网站首页的设计，自己设置一个简单的网站，以巩固所学的知识。