《商务网站前台设计》课程实训任务书6.docx
- 文档编号：7087090
- 上传时间：2023-01-17
- 格式：DOCX
- 页数：19
- 大小：214.55KB
《商务网站前台设计》课程实训任务书6.docx
《《商务网站前台设计》课程实训任务书6.docx》由会员分享，可在线阅读，更多相关《《商务网站前台设计》课程实训任务书6.docx（19页珍藏版）》请在冰豆网上搜索。
《商务网站前台设计》课程实训任务书6
《商务网站前台设计》课程实训任务书6
实训名称
二级页面1
学时
2
指导教师
王玥
班级
姓名
实训目的：
熟练掌握div布局与css样式基本使用、超级链接。
实训任务：
完成苗木花卉网站二级页面制作。
实训指导：
1、代码部分：
（1）样式总体格式，体现网页头部
部分.aa{;;;}
.bb{;;;}
（2）css样式基本格式
例如:
.aa{}
（3）冒号与分号的使用
冒号：
冒号后面是具体参数值；
分号：
分号将两个命令分割开来。
（4）样式应用
width：
宽度
height:
高度
background:
背景颜色
float:
left左浮动
font-size:
字符大小;
margin-left:
左侧间距
letter-spacing:
字符间距
（5）css样式区间的注释书写格式：
例如：
/*字符间距2像素*/
（6）div布局区间的注释书写格式：
例如：
--br/软回车进入下一行-->
操作步骤详解：
操作步骤详解：
1、主体区效果图如下：
2、保留原有左侧导航
3、修改局部内容
4、其余复制粘贴即可
5、导航上的超级链接
设置超级链接
6、参考代码如下见实训任务书16：
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">
.aa{height:
120px;width:
950px;background-image:
url（images/h01_02.gif）}
.aa-1{
height:
52px;
width:
65px;
float:
left;
margin-top:
32px;
margin-left:
24px;
}
.aa-2{
font-size:
20px;
color:
#0C0;
height:
30px;
width:
300px;
float:
left;
margin-top:
41px;
margin-left:
9px;
font-size:
24px;
font-weight:
bold;
}
.aa-3{
height:
27px;
width:
188px;
float:
left;
margin-top:
49px;
margin-left:
58px;
}
.aa-4{
height:
20px;
width:
170px;
float:
left;
margin-top:
52px;
margin-left:
30px;
}
.ab{
height:
260px;
width:
950px
}
.ac{height:
45px;width:
950px;background-color:
#FF0}
.bc{
height:
730px;
width:
950px;
background-color:
#9FF
}
.db{height:
90px;width:
950px;}
/*导航部分*/
.dh{width:
950px;height:
45px;background-image:
url（images/h01_22.gif）}
.dhul{width:
950px;margin:
0auto}
.dhulli{list-style:
none;float:
left;}
.dhullia
{
color:
#FFF;/*文字颜色是白色*/
font-size:
16px;/*用16号*/
font-weight:
bold;/*加粗*/
text-decoration:
none;/*去掉下划线*/
display:
block;/*这个比较关键，因为a本身就是联级元素，本身不具有宽高，用这个把它变成块级元素,就有本身的宽和高了*/
width:
78px;/*设置元素宽为78px*/
height:
45px;/*设置高度为45px*/
line-height:
45px;/*设置行距为45px，让文字在每行的中间位置*/
margin:
015px;/*外间距15px*/
}
.ss1{width:
1px;height:
28px;margin-top:
7px;float:
left}
.zt-zuo{
padding:
0;
margin:
0;
width:
170px;
height:
700px;
float:
left;
margin-left:
40px
}
/*主体左侧上*/
.zt-zuo-shang{width:
170px;height:
290px;font-size:
16px}
.ztz{
font-size:
12px;
width:
120px;
margin-top:
3px;
margin-left:
15px;
}
.ztzul{margin:
0;padding:
0;margin:
20px000;}
.ztzulli{list-style:
none;margin-left:
20px;}
.ztz1{width:
160px}
.ztz1ul{margin:
0;padding:
0;margin:
20px000;}
.ztz1ulli{list-style:
none;margin:
20px010px20px;}
.ztz-biaoti{font-size:
16px}
.mm{
width:
100px;
margin-top:
24px;
margin-left:
13px;
height:
20px;
font-size:
16px;
}
.line{
width:
130px;
height:
2px;
margin-top:
20px;
background-color:
#CCC;
margin-left:
10px;
}
/*主体左侧下*/
.zt-zuo-xia{
width:
170px;
height:
370px;
}
.lxwm{margin:
20px030px10px}
.dianhua{
margin:
0030px10px
}
.rexian{
margin:
0020px10px;
height:
30px
}
.qier{
font-size:
12px;
margin-left:
10px;
margin-bottom:
30px;
}
.lxdh{
font-size:
12px;
margin-left:
10px;
letter-spacing:
2px;
}
/*主体右侧整体*/
.zt-you{
width:
740px;
float:
left;
height:
700px;
}
.zt-you-shang{
height:
192px;
width:
740px}
/*主体右侧上左侧*/
.zt-you-shang-zuo{
height:
192px;
width:
500px;
float:
left;
}
/*主体右侧上右侧*/
.zt-you-shang-you{
height:
192px;
width:
240px;
float:
left
}
.jdjj{
width:
100px;
height:
20px;
margin-top:
30px;
margin-left:
10px;
float:
left;
font-size:
16px;
}
.more{
width:
100px;
height:
20px;
margin-top:
30px;
margin-left:
400px;
color:
#0F0;
}
.more1{
width:
100px;
height:
20px;
margin-left:
640px;
color:
#0F0;
}
.jdjj-xx{
width:
450px;
margin-top:
30px;
margin-left:
25px;
font-size:
12px;
text-indent:
24px;
line-height:
20px;
}
.zzry-line{
height:
136px;
width:
1px;
background-color:
#999;
margin-top:
40px;
float:
left;
}
.zzry{
height:
20px;
width:
100px;
margin-left:
13px;
margin-top:
24px;
}
.zzry-1{
height:
35px;
width:
165px;
background-color:
#CCC;
margin-left:
17px;
margin-top:
10px;
}
.zzry-1-1{
margin-left:
5px;
margin-top:
2px;
float:
left
}
.zzry-1-2{
font-size:
12px;
width:
130px;
margin-left:
35px;
margin-top:
2px;
text-align:
center;
}
.zt-you-zhong{
width:
740px;
height:
50px
}
.mmlb{
width:
100px;
height:
20px;
margin-top:
30px;
}
.jdzs{
width:
100px;
height:
20px;
margin-top:
30px;
margin-left:
10px;
font-size:
16px;
}
img{vertical-align:
middle;margin:
2px4px}
.zt-you-xia{
height:
100px;
line-height:
100px
}
.ziti{width:
740px;}
.zitiulli{
list-style:
none;
float:
left;
font-size:
12px;
margin-left:
25px;
margin-right:
60px;
}
.ziti1{width:
740px;}
.ziti1ulli{
list-style:
none;
float:
left;
font-size:
12px;
padding-right:
25px;
}
.db-line{
height:
2px;
width:
950px;
background-color:
#0C3
}
.ss2{width:
1px;height:
10px;margin-top:
1px;float:
left}
.db1{
width:
950px;height:
80px;margin:
auto0;}
.db1-dh{
width:
950px;height:
35px;}
.db1-dhulli{
list-style:
none;float:
left;height:
35px;}
.db1-dhullia{
color:
#000;/*文字颜色是黑色*/
font-size:
12px;/*用16号*/
text-decoration:
none;/*去掉下划线*/
margin:
015px;/*外间距15px*/
}
.ss1{
width:
1px;
height:
28px;
float:
left
}
.db-line{
height:
2px;
width:
950px;
background-color:
#0C3
}
.db-zt{
font-size:
12px;
margin:
0auto;
width:
260px;
text-align:
center;
line-height:
20px
}
.dbb{width:
950px}
--logo-->
如何打造酒店企业文化2刘田江doc.docx
