综合练习 网站首 的整体布局 商品分类版块Word格式.docx

综合练习 网站首 的整体布局 商品分类版块Word格式.docx

《综合练习 网站首 的整体布局 商品分类版块Word格式.docx》由会员分享，可在线阅读，更多相关《综合练习 网站首 的整体布局 商品分类版块Word格式.docx（10页珍藏版）》请在冰点文库上搜索。

实验所需软件：

UltraEdit

实验内容：

1、练习——贵美首页的整体布局。

需求说明：

重新实现贵美首页的整体布局，如图1.1所示。

图1.1贵美首页的整体布局

2、练习——贵美商品分类版块。

在上一练习基础上，根据提供的素材，重新实现贵美左边的商品分类版块。

如图1.2所示。

（1）实现页面HTML结构

（2）实现CSS

图1.2贵美左边的商品分类版块

内

容

（由学

生

填

写）

1、练习——贵美首页的整体布局：

代码如下：

<

html>

<

head>

title>

box<

/title>

styletype="

text/css"

>

#container

{

width:

980;

margin:

0pxauto;

}

#header

height:

136px;

background:

#ccc;

#main1

float:

left;

300px;

240px;

green;

#main2

height:

500px;

background:

blue;

#main3{

right;

yellow;

#footer

clear:

both;

background-color:

/style>

/head>

body>

divid="

container"

header"

header

/div>

main1"

商品分类（cat）

main2"

内容（content）

main3"

右侧（sidebar）

footer"

footer

/body>

运行结果如下：

2、练习——贵美商品分类版块：

<

贵美商城<

<

#container{

1000px;

margin:

auto;

}

#header{

width:

100%;

height:

background:

url（images/logo.jpg）no-repeat;

float:

}

#main{

600px;

}

#cat{width:

20%;

background:

url（images/bg.gif）no-repeat;

#kongge{height:

12px;

#cat-class{width:

color:

#ff7300;

font:

bold;

font-size:

20px;

height:

30px;

list-style:

none;

#cat-li{width:

50px;

38px;

#content{width:

60%;

100%;

red;

#sidebar{width:

#footer{

width:

100px;

}

linkrel="

stylesheet"

href="

css/layout.css"

type="

/>

<

divclass="

menu"

ul>

liclass="

pic5"

aherf="

#"

注册<

/a>

/li>

登陆<

li>

设位首页<

pic4"

加入收藏<

pic3"

帮助中心<

pic2"

购物车<

pic1"

/ul>

hello"

p>

你好，欢迎访问贵美商城！

2014年12月22日<

/p>

nav"

ulclass="

space"

首页<

家用电器<

手机数码<

日用百货<

书籍<

aherf"

免费开店<

全球咨询<

main"

cat"

ulid="

kongge"

liid="

cat-class"

cat-li"

大家电<

洗衣机<

电冰箱<

相机<

电视<

DVD<

>

书籍<

肥皂<

洗衣粉<

纸巾<

洗发水<

洗洁精<

毛巾<

content"

内容（content）<

sidebar"

右侧<

（sidebar）<

底部footer<

/html>

评

语

（由教