实验四 层叠样式

《实验四 层叠样式》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、实验四层叠样式、模板和库一、实验目的和要求：1.掌握附加和编辑外部样式表的方法2.掌握CSS样式的各种特殊效果的方法3.掌握创建和应用CSS样式及CSS样式表的方法4.掌握模板的创建、编辑和应用的方法5.掌握对象的创建、编辑和应用的方法二、实验内容：1.CSS样式表的创建、编辑和应用（1）在网页编辑窗口中，打开本地站点Mysitehtml文件夹中的art.htm文件。修改文档的标题为“生活和艺术”，文档每段文符改成首行缩进两个字样。（2）在本地根文件夹Mysite中，成绩名为docformat.css的层叠样式表文件，以及背

2、景色为＃９９ＦＦＣＣ的层叠样式docformat。（3）创建名为.char1的层叠样式，并将这个样式定义在docformat.css的层叠样式表文件中。将其【类型】的参数设置：【字体】为方正舒体、【大小】为３６像素、【样式】为谢体、【颜色】＃方法FF0000。样式作用于标题文字“生活和艺术”。（4）将名为.char1的样式复制成名为.char2的层叠样式，并将其【类型】的参数设置：【字体】为楷体、【大小】为１８像素、【样式】为正常、【颜色】为＃００００００。样式作用第１段文字。（5）新建名为.char3的层叠样式，并将其【类型

3、】的参数设置：【字体】为仿宋体、【大小】为１８像素、【样式】为正常、【颜色】为＃333333。样式作用于第２段文字，浏览网页观察效果。（6）将名为　.char3的样式修改：【字体】为方正舒体、【大小】为１６像素、【样式】为偏斜体、【颜色】为＃000099。（7）创建名为border1的样式，选择【边框】类型，并将其参数设置：【样式】为双线、【宽度】的【上】、【右】、【下】、【左】的值为４个像素、【颜色】为＃99CC33。（8）在新建网页exe16-1.htm上的创建８个１行１列的表格，表格的宽度和高度是100*３０像素。分别用

4、border1、border2………border8为名新建层叠样式，选择【边框】类型，并分别定义他们的【样式】为：【虚线】、【点划线】、【实线】、【双线】、【槽状】、【脊状】、【凹陷】、【凸出】８种风格，并设置合适的边框高度和颜色，作用于８个表格，预览网页观察其效果。然后保存样式表文件docformat.css和网页文档exe16-1.htm。（1）在网页编辑器窗口中，打开literature.htm文件，并链接外部样式表文件docformat.css。（2）修改名为　.char1的样式，将【颜色】值＃FF0000该为＃000

5、0CC，并作用约标题文字“中国文学”。浏览网页文档art.htm和literature.htm，观察标题文字的颜色变化。２.ＣＳＳ样式特殊效果的应用（１）创建名exe16-2.htm的网页，在网页合时的位置上插入３８０＊２８５像素的层，并将Mysiteimg文件夹中的图像文件campus3.jpg插入层中，用ＣＳＳ的Ａlpha滤镜制作如图１６－５所示的效果。图16-5Alpha滤镜效果（2）创建名为exe16-3.htm的网页，在网页的合适位置上插入2行2列4个布局单元格，每个单元格为120*100像素，并在每个单元格中插入

6、Mysiteimg文件夹中的图像文件f01.jpg，如图16-6所示。然后用CSS的翻转滤镜制作出如图16-7所示的效果。图16-64幅相同的图像图16-7CSS翻转滤镜效果（3）创建名为exe16-4.htm的网页，在网页合适位置上插入1行3列3个布局单元格，每个单元格为120*220像素，并在每个单元格中插入Mysiteimg文件夹中的图像文件campus4.jpg。然后用CSS的波浪滤镜制作出如图16-8所示的效果。左边图参数为Wave(Add=1，Freq=2，LightSrenth=70，Phase=50，Str

7、ength=10);右边图参数为Wave(Add=0，Freq=3，LightSrenth=10，Phase=75，Strength=10);中间图为原始图。预览后，用exe16-4.htm为名将网页保存在本地站点根文件夹中。图16-8CSS波浪滤镜效果（4）创建议个名为exe16-5.htm的网页，然后用CSS样式的翻转滤镜制作出如图16-9所示的效果。预览网页后，用exe16-5.htm为名将网页保存在本地站点根文件夹中。图16-9CSS翻转滤镜效果（5）利用显示滤镜（RevealTrans）设置进入网页art.htm的切

8、换效果为随机效果，其参数为Revealtrans(Transition=23，duration=3.0)，选择标题文字与地1行文字，建立与literature.htm和exe16-6.htm的超链接。设置离开网页文件literture.htm的效果代号是8号的垂直百叶窗，其参