综合练习(一)——网站首页的整体布局、商品分类版块
姓名张燕斌学号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)
运行结果如下:
练习——贵美商品分类版块:代码如下:
贵美商城#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;
}