《商务网站前台设计》课程实训任务书14.docVIP

第 PAGE 1 页 共 NUMPAGES 11 页 《商务网站前台设计》课程实训任务书14 实训名称 主体右侧（中、下） 学时 2 指导教师 王玥 班级 姓名 实训目的： 熟练掌握div布局与css样式基本使用。 实训任务： 完成苗木花卉网站主页右侧页面制作。 实训指导： 代码部分： 样式总体格式，体现网页头部head /head部分 style type=text/css .aa{ ; ; ;} .bb{ ; ; ;} /style (2)css样式基本格式 例如: .aa{ } （3）冒号与分号的使用 冒号：冒号后面是具体参数值； 分号：分号将两个命令分割开来。 （4）样式应用 width：宽度 height:高度 background:背景颜色 float:left 左浮动 font-size:字符大小; margin-left:左侧间距 letter-spacing:字符间距 （5）css样式区间的注释书写格式：例如： /*字符间距2像素*/ （6）div布局区间的注释书写格式：例如：!--br/软回车进入下一行-- 操作步骤详解： 1、主体区效果图如下： 分析：此区域共分为五个div布局 3、上节课完成位置 本节课操作位置 Div布局代码： div class=zt-you-zhong 4 /div 其中，zt-you-zhong的样式如下： 或者这样表达： 共添加5个div区块 在上述div中具体添加内容如下： 其中这里先不填写内容 对应呈现页面如下： 以上内容对应代码如下： .jdzs 对应css样式： 或者 .jdzs{ width: 100px; height: 20px; margin-top: 30px; margin-left: 10px; font-size: 16px; } 呈现结果如下： .more1的样式内容设置如下： 或者这样书写也可以： .more1{ width: 100px; height: 20px; margin-left: 640px; color: #0F0; } 呈现页面如下： 分割线内容 图片区域div内容，直接插入图片即可： 对应样式区域可以这样写，可以保证div中的img图片可以全部是垂直和水平居中的效果。 .tupian img{ vertical-align:middle; margin:2px 4px} Div布局代码： div class=tupianimg src=images/h01_63.gif width=20 height=12 /img src=images/h01_52.gif width=125 height=94 /img src=images/h01_54.gif width=124 height=94 /img src=images/h01_56.gif width=125 height=95 /img src=images/h01_58.gif width=125 height=96 /img src=images/h01_60.gif width=128 height=95 /img src=images/h01_66.gif width=21 height=12 //div 其中这部分的内容和中部的内容是相同的，只需要拷贝粘贴再进行修改即可。 接下来，我们看文字的设置，首先看”基地展示”部分文字 Div代码如下： div class=zt-you-zhong div class=jdzsimg src=images/h01_30.gif width=15 height=13 /基地展示/div div class=more1more/div hr/ divimg src=images/h01_63.gif width=20 height=12 /img src=images/h01_52.gif width=125 height=94 /img src=images/h01_54.gif width=124 height=94 /img src=images/h01_56.gif width=125 height=95 /img src=images/h01_58.gif width=125 height=96 /img src=images/h01_60.gif width=128 height=95 /img src=images/h01_66.gif width=21 height=12 //div div class=ziti ul li罗汉杉林/li li罗汉杉林/li li罗汉杉林/li li罗汉杉林/li li罗汉杉林/li /u