在html中实现家用电器商品分类,综合练习(一)——网站首页的整体布局、商品分类版块.doc...

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

姓名张燕斌学号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 贵美左边的商品分类版块

实

验

内

容

(由学

生

填

写)练习——贵美首页的整体布局：代码如下：

box

#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;

}

header

商品分类(cat)

内容(content)

右侧(sidebar)

footer

运行结果如下：

练习——贵美商品分类版块：代码如下：

贵美商城

#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;

}