《商务网站前台设计》课程实训任务书6Word格式.docx
- 文档编号:20179656
- 上传时间:2023-01-17
- 格式:DOCX
- 页数:19
- 大小:214.55KB
《商务网站前台设计》课程实训任务书6Word格式.docx
《《商务网站前台设计》课程实训任务书6Word格式.docx》由会员分享,可在线阅读,更多相关《《商务网站前台设计》课程实训任务书6Word格式.docx(19页珍藏版)》请在冰豆网上搜索。
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"
htmlxmlns="
//www.w3.org/1999/xhtml"
metahttp-equiv="
Content-Type"
content="
text/html;
charset=utf-8"
/>
title>
苗木练习<
/title>
.aa{height:
120px;
width:
950px;
background-image:
url(images/h01_02.gif)}
.aa-1{
height:
52px;
65px;
float:
left;
margin-top:
32px;
24px;
.aa-2{
font-size:
20px;
color:
#0C0;
30px;
300px;
41px;
9px;
font-weight:
bold;
.aa-3{
27px;
188px;
49px;
58px;
.aa-4{
170px;
.ab{
260px;
950px
.ac{height:
45px;
background-color:
#FF0}
.bc{
730px;
950px;
#9FF
.db{height:
90px;
/*导航部分*/
.dh{width:
url(images/h01_22.gif)}
.dhul{width:
margin:
0auto}
.dhulli{list-style:
none;
left;
}
.dhullia
{
color:
#FFF;
/*文字颜色是白色*/
font-size:
16px;
/*用16号*/
font-weight:
bold;
/*加粗*/
text-decoration:
/*去掉下划线*/
display:
block;
/*这个比较关键,因为a本身就是联级元素,本身不具有宽高,用这个把它变成块级元素,就有本身的宽和高了*/
78px;
/*设置元素宽为78px*/
/*设置高度为45px*/
line-height:
/*设置行距为45px,让文字在每行的中间位置*/
margin:
015px;
/*外间距15px*/
.ss1{width:
1px;
28px;
margin-top:
7px;
left}
.zt-zuo{
padding:
0;
700px;
40px
/*主体左侧上*/
.zt-zuo-shang{width:
170px;
290px;
16px}
.ztz{
12px;
120px;
3px;
15px;
.ztzul{margin:
0;
20px000;
}
.ztzulli{list-style:
margin-left:
20px;
.ztz1{width:
160px}
.ztz1ul{margin:
.ztz1ulli{list-style:
20px010px20px;
.ztz-biaoti{font-size:
16px}
.mm{
100px;
13px;
16px;
.line{
130px;
2px;
#CCC;
10px;
/*主体左侧下*/
.zt-zuo-xia{
370px;
.lxwm{margin:
20px030px10px}
.dianhua{
0030px10px
.rexian{
0020px10px;
30px
.qier{
margin-bottom:
.lxdh{
/*主体右侧整体*/
.zt-you{
740px;
.zt-you-shang{
192px;
740px}
/*主体右侧上左侧*/
.zt-you-shang-zuo{
500px;
/*主体右侧上右侧*/
.zt-you-shang-you{
240px;
left
.jdjj{
.more{
400px;
#0F0;
.more1{
640px;
.jdjj-xx{
450px;
25px;
text-indent:
line-height:
.zzry-line{
136px;
#999;
40px;
.zzry{
.zzry-1{
35px;
165px;
17px;
.zzry-1-1{
5px;
2px;
.zzry-1-2{
text-align:
center;
.zt-you-zhong{
50px
.mmlb{
.jdzs{
img{vertical-align:
middle;
2px4px}
.zt-you-xia{
100px;
100px
.ziti{width:
740px;
.zitiulli{
list-style:
none;
margin-right:
60px;
.ziti1{width:
.ziti1ulli{
padding-right:
.db-line{
#0C3
.ss2{width:
10px;
.db1{
80px;
auto0;
.db1-dh{
.db1-dhulli{
35px;
.db1-dhullia{
#000;
/*文字颜色是黑色*/
text-decoration:
015px;
.ss1{
1px;
28px;
left
.db-zt{
0auto;
20px
.dbb{width:
950px}
body>
--logo-->
divclass="
aa"
aa-1"
imgsrc="
images/h01_05.gif"
width="
65"
height="
52"
alt="
苗木花卉"
/div>
aa-2"
长沙市碧雅园花卉苗木基地<
aa-3"
images/h01_08.gif"
188"
27"
aa-4"
images/h01_11.gif"
80"
20"
--banner-->
ab"
images/h01_20.gif"
950"
259"
--导航-->
ac"
dh"
ul>
li>
ahref="
Untitled-1111111.html"
导航首页<
/a>
/li>
ss1"
images/h01_25.gif"
1"
28"
#"
基地介绍<
ziye1.html"
苗木品种<
/ul>
--主体-->
bc"
zt-zuo"
zt-zuo-shang"
mm"
images/h01_30.gif"
15"
13"
苗木分类<
ztz"
images/h01_34.gif"
14"
&
nbsp;
苗木分类<
zt-you"
zt-you-zhong"
jdzs"
基地展示<
hr/>
div>
images/h01_52.gif"
125"
94"
images/h01_54.gif"
124"
images/h01_56.gif"
95"
images/h01_58.gif"
96"
images/h01_60.gif"
128"
ziti"
罗汉杉林<
--底部-->
db"
db-line"
db1-dh"
ss2"
|<
特色苗木<
工程案例<
苗木配送<
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 商务网站前台设计 商务 网站 前台 设计 课程 任务书