模块六 综合案例设计与开发 任务3：制作网站首页中部和底部区域.pdfVIP

网页设计与Web应用开发基础

课程名称可修改课程名称可修改

课程名称可修改

模块六综合案例设计与开发

COURSECOURSETITLETITLE

COURSETITLE

任务2：制作网站首页导航栏

NAMENAME白会肖可修改可修改

课堂案例：企业网站设计

网站首页效果图

实训目标

•使用DIV+CSS的布局模式；

•多个DIV的排列方式；

•CSS样式的定义。

menu

Logo区域banner区域

区域

top区

图片轮播区域

left区域right区域主体内容区

产品展示区

企业信息及版权信

息区

教师示范

实现任务：CSS控制div样式

/*图片轮播区域的样式，暂且用图片进行占位*/

.lunbo{

height:320px;

width:1000px;

text-align:center;/*图片居中显示*/

margin-top:5px;

}

教师示范

实现任务：CSS控制div样式

/*页面主体区域的样式*//*主体区域右侧的样式*/

.main{.right{

height:300px;float:left;

width:1000px;height:300px;

}width:480px;

.left{/*主体区域左侧的样式*/border:1pxsolid#CCCCCC;

float:left;}

height:300px;

width:480px;

margin-right:10px;

border:1pxsolid#CCCCCC;

}

教师示范

实现任务：CSS控制div样式

/*left区域中公司图片的样式*//*left区域中公司简介文字的样式*/

.left1{.left2{

height:238px;height:238px;

width:210px;width:255px;