综合练习(一)—网站首页的整体布局、商品分类版块.docVIP

姓名 张燕斌 学号 1267159206 实验成绩 班级 软件12级 2 班 实验日期 第 17 周（星期一 ） 12 月22 日第 34 节 项目号、实验名称 实验11 综合练习（一）——网站首页的整体布局、商品分类版块. 实 验 要 求 （任课 教 师 提 供） 实验目标： 掌握使用DIV+CSS页面布局的方法实现网站首页。 实验所需软件： Ultra Edit 实验内容： 1、练习——贵美首页的整体布局 。 需求说明： 重新实现贵美首页的整体布局，如图1.1所示。 图1.1 贵美首页的整体布局 2、练习——贵美商品分类版块。 需求说明： 在上一练习基础上，根据提供的素材，重新实现贵美左边的商品分类版块。如图1.2所示。 （1）实现页面HTML结构 （2）实现CSS 图1.2 贵美左边的商品分类版块 实 验 内 容 （由学 生 填 写） 练习——贵美首页的整体布局：代码如下： html head titlebox/title style type=text/css #container { width:980; margin:0px auto; } #header { height:136px; background:#ccc; } #main1 { float:left; height:300px; width:240px; background:green; } #main2 { float:left; height:300px; width:500px; background:blue; } #main3{ float:right; height:300px; width:240px; background:yellow; } #footer { clear:both; height:136px; background-color:#ccc; } /style /head body div id=container div id=header header /div div id=main1 商品分类（cat） /div div id=main2 内容（content） /div div id=main3 右侧（sidebar） /div div id=footer footer /div /div /body html 运行结果如下： 练习——贵美商品分类版块：代码如下： html head title贵美商城/title style type=text/css #container{ width:1000px;margin:auto; } #header{ width:100%; height:136px;background:url(images/logo.jpg) no-repeat;float:left; } #main{ width:100%; height:600px;} #cat{ width:20%; height:100%; background:url(images/bg.gif) no-repeat; float:left; } #kongge{height:12px;}