网页设计试题

注意：所有题目中涉及的素材都在考试文件夹内，其中图片在下面的pic文件夹中，音乐、flash等多媒体元素在media文件夹，插件、软件在addons文件夹。

1) 将1.html中的所有链接的默认样式改成红色14像素字体带下划线，鼠标移上去时链接字变 24像素、加粗、蓝色、无下划线，(请务必使用CSS规则超链接a:的两个伪类)。此外我从网站上下载到一个好看的字体（addon中的汉仪柏青体简.ttf），现在请将1.html页面中的所有默认字都变成这种字体。

2) 将1.html中的顶部目录设置为列表项，且列表项无符号，排列成水平一行，列表项宽度为75，各项间隔5px，背景颜色为蓝色，字白色。另为了更好的被搜索引擎收录，请设置1.html的关键词为：“九江学院简介，九江学院概况”；网页标题为：“欢迎来九江学院！”

3) 将1.html中的顶部目录设置为列表项，默认垂直排列，且列表项符号设置为pic中的lipic1.jpg，列表项宽度为75，列表项行间距10像素。且列表鼠标移上去后背景会变蓝色，移开时还原。

1 / 12

4) 在1.html页面中将“教学建设” “科研机构 ”两组词上增加效果，鼠标移上去会在右侧显示图片jju5.jpg和jju6.jpg。移开则消失。

5) 在3.html中添加一个会飞的蝴蝶（butterfly.gif）的动画，要求在网页打开后的5秒才开始飞，飞10秒的路径后停止3秒再如此循环。

6) 在1.html中移动的小猫APdiv上增加一个鼠标移上去就停止，且会弹出一句话“我是HelloKitty！”鼠标移开又继续飞，且弹出的话消失。

7) 将3.html中的表格边框设置成只有外边框而内部单元格则没有，再将表格单元格2拆成2列，其中第二列插入图片（pic/xixi.jpg），并且让图片靠上边对齐，如下图所示：

2 / 12

8) 在5.html页面中制作一个简易的Flash相册，要求每隔2秒自动翻页，并包含2张图片（pic/jju5和jju6.jpg）其中第一张图片链接到1.html，标题为“九江学院竞知楼”，第二张图片链接到2.html标题为“九江学院大门”。

9) 将1.html的背景图像设置为back.jpg ，固定在页面的顶部居中，页面内容滚动时背景图像不动，且不重复铺设。 10)

在7.html页面中实现如下效果：默认层2，3都是隐藏的，

当鼠标点击层1时，同时显示层2，3，而层1则消失。 11)

在7.html页面中实现如下效果，将层3中的古诗文字在

层中的位置往下挪60像素，往右移100像素，然后再调整层的大小使之适合文字宽高，删除除了诗句以外的所有文字，另修改背景色及文字颜色使之如下图所示：

3 / 12

12)

已知4.html中有3个apdiv内含各一张图片，它们完全

叠在一起了，现在需要你做的是当我们在最上面的图片上点击一下的时候会换下面一张，如此一直点击可循环显示这3张图片。（利用改变属性行为） 13)

在9.html中将K1框的背景和字色改成下图的样子后再复

制3个，使之如下图排列（如果一行不是2个话则修改它的宽度-间距等数值使之达到这个效果）

。 14)

利用任意方法实现将7.html中的层4中的锄禾这首诗文

4 / 12

字不能被访问者直接右键复制。 15)

在10.html页面中添加一个新的DIV：ad1使之处于header

区域内靠右下达到如下图所示的效果：ad1尺寸宽200高120px

16) 在10.html页面中添加多个新的DIV：youshang和youxia

使之处于body区域右边且大小与header和body边对齐，已知header：90%宽150像素高，居中；body30%宽，300px高，要求做的DIV数值自己计算，达到如下图所示的效果： ****提示本题需要借助额外的辅助DIV****

5 / 12

17) 在6.html中增加一名为zhong的div，使他距离已经存

在的zuo you DIV各10像素，宽度自动伸缩，高度和左右相同为300.打到如下效果：

18) 将6.html页面中的2个DIV：zuo和you取消中间的间隔，

让他们挨着一起居中出现在网页上，不破坏里面的内容。达到如下效果：

6 / 12

19) 将5.html中的横向列表处理成如下图所示外观（注意列

表的宽度、间隔、背景颜色、边框样式、边框颜色等都有所变化，务必接近下图效果）

20) 将5.html中的两个列表中的下面那个表格中的列表变成

如下图所示的样子，上面的列表则不变化，且下面的表格边框变成了单线条。

21) 修改10.html页面中的DIV：body和header使它们在修

改前后有这些图上所示的差异（各DIV距离上边界都有10px，边框样式发生了变化。）。

7 / 12

修改前：

修改后：22)

10.html中body DIV中有个列表非常不协调，请将它美

化成如下所示（注意它的位置、背景、下划线、宽度等属性尽量和参考图接近）：

8 / 12

23)

在新建的页面中制作一个3级菜单，如下图所示 鼠标所

在的选项为白底蓝字，其它则为黑底白字。

24)

制作如下图所示的一个选项卡式的页面，选项卡位置在页

面的距离左边300px，宽度为500px，要求默认打开的是博客，博客中有图片jju2.jpg（缩小点）

9 / 12

25) 在11.html中文字和图片都在一个DIV里，我们要让这些

文字靠在图片的右边，但是图片及文字相对于边框有10个像素的距离，此外图片和文字之间也有10像素间距，在不使用表格的情况下想办法，效果如下图

26)

要求在打开11.html后鼠标移到浮动广告时会弹出一个

400*300大小的广告页面（12.html），该广告页面12.html则会在打开时弹出对话框提示“亲爱的网友，请认真做这个

10 / 12

测试题吧！” 27)

请将12.html网页中的这个心理测试题的答案不要设置

为打开就看到，而是网友在选择答案后才揭露。（自由发挥任意方法都可以） 28)

在12.html中将所有的文本重新美化，达到如下图所示效

果，其中每段字开头都空2个汉子左右，同一行中的字 间距加到到5像素，行与行间距1个字高度。已知这些字都是16px大小。此外添加一首背景音乐cnhk.mp3.

29)

在1.html中利用右键扩展插件制作一个个性化右键菜

单，菜单中有以下2个功能，一个是访问九江学院官网的链接，一个是当页面在下方时点击会跳转到页面顶部的链接。 30)

请在最快的时间内完成下面的布局。（方法任意，考查速

度，注意控制各宽度使之接近下图展示）

11 / 12

[文档可能无法思考全面，请浏览后下载，另外祝您生活愉快，工作顺利，万事如意!]

12 / 12