综合练习 网站首 的整体布局 商品分类版块Word格式.docx
- 文档编号:5110938
- 上传时间:2023-05-04
- 格式:DOCX
- 页数:10
- 大小:210.57KB
综合练习 网站首 的整体布局 商品分类版块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>
评
语
(由教
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 综合练习 网站首 的整体布局 商品分类版块 综合 练习 网站 整体 布局 商品 分类 版块