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

图1.1 图1.1贵美首页的整体布局 姓名 张燕斌 学号 1267159206 实验成绩 班级 软件12级2班 实验日期 第17 周（星期一）12月22日第34节 项目号、实验名称 实验11综合练习（一）一一网站首页的整体布局、商品分类版块 ? 实验目标： 掌握使用DIV+CSS页面布局的方法实现网站首页。 实验所需软件： Ultra Edit 实验内容： 1练习——贵美首页的整体布局 。 需求说明： 重新实现贵美首页的整体布局，如图 1.1所示 实 验 要 求 （任 课 教 师 提 供） 2、练习 贵美商品分类版块。 需求说明： 在上一练习基础上，根据提供的素材，重新实现贵美左边的商品分类版块。如图 1.2所示。 （1） 实现页面HTML吉构 （2） 实现CSS ~9t M3 刑：，gg zl： N? V Jh^rg +R KU nr? *i| ￥*ii 咄 g e* 怦ww MH BA m tn nr bi 鳏4通 it g en tr M Mtt MR m 1恥 Tm VM ?lf* **l K 冬 Un vr. rr* HU |内容伽tent) (sidebar) .Wi .- ■:i ■ 图1.2贵美左边的商品分类版块 1练习一一贵美首页的整体布局：代码如下: html head titlebox/title vstyle type=text/css ★container { width:980; margi n:0px auto; 实 验 内 容 （由 学 生 填 写）} 实 验 内 容 （由 学 生 填 写） #header { height:136px; backgro un d:#ccc; } #ma in1 { float:left; height:300px; width:240px; backgro un d:gree n; #mai n2 { float:left; height:300px; width:500px;backgro un d:blue; } #mai n3{ float:right; height:300px; width:240px; backgro un d:yellow; } #footer { clear:both; height:136px; backgro un d-color:#ccc; } v/style /head body vdiv id=con tai ner div id=header header /div div id=mai n1 商品分类（cat） /div div id=mai n2 内容（content ） /div div id=mai n3 右侧（sidebar ） /div div id=footer footer /div v/div v/body html 运行结果如下: rjEsder fDDTW 2、练习 贵美商品分类版块：代码如下: html head title 贵美 商城 /title style type=text/css #container{ width:1000px;margi n:auto; #header{ width:100%; height:136px;backgro un d:url(images/logo.jpg) no-repeat;float:left; } #mai n{ width:100%; height:600px;} #cat{ width:20%; height:100%; backgro un d:url(images/bg.gif) no-repeat; float:left; } #ko ngge{height:12px;} #cat-class{width:100%;color:#ff7300; fon t:bold;fo nt-size:20px;height:30px;float:left;list-style: non e;} #cat-li{width:50px;float:left;height:38px;list-style: non e;} #content{ width:60%; height:100% ;backgro un d:red; float:left; } #sidebar{ width:20%; height:100%; backgrou nd:blue; float:left; #footer{ width:100%; height:100px; backgrou nd:#ccc; } v/style li nk rel=stylesheet href=css/layout.css type=text/css/ /head body div id