2025年高职网页设计与制作（网页特效制作）试题及答案.doc

2025年高职网页设计与制作（网页特效制作）试题及答案

（考试时间：90分钟 满分100分）
班级______ 姓名______

第I卷（总共10题，每题4分，每题只有一个正确答案，请将正确答案填写在括号内）

w1. 以下哪种CSS属性可以用来设置元素的透明度？（ ）
A. opacity B. visibility C. display D. background

w2. 在HTML中，用于创建无序列表的标签是（ ）
A. <ul> B. <ol> C. <li> D. <dl>

w3. 下列哪个JavaScript方法可以用于获取当前页面的URL？（ ）
A. document.URL B. window.location.href C. navigator.url D. history.href

w4. 要使一个元素在页面中水平居中显示，以下哪种CSS样式设置是正确的？（ ）
A. margin: 0 auto; B. text-align: center; C. display: flex; justify-content: center; D.以上都可以

w5. 以下哪种动画效果不能通过CSS3实现？（ ）
A. 淡入淡出 B. 旋转 C. 跳跃 D. 平移

w6. 在HTML中，用于插入图片的标签是（ ）
A. <img> B. <image> C. <pic> D. <photo>

w7. 下列哪个事件可以在元素获得焦点时触发？（ ）
A. click B. focus C. blur D. change

w8. 要设置一个元素的背景颜色为渐变效果，应该使用以下哪种CSS属性？（ ）
A. background-color B. background-image C. background-gradient D. background: linear-gradient;

w9. 在JavaScript中，用于循环遍历数组的语句是（ ）
A. for B. while C. do-while D. for-in

w10. 以下哪种CSS选择器可以选择所有class为“example”的元素？（ ）
A. .example B. example C. example D. [class="example"]

第II卷

w11. （10分）请简述CSS盒模型的组成部分，并说明如何设置元素的宽度和高度。

w12. （12分）写出一段JavaScript代码，实现当用户点击按钮时，弹出一个提示框显示“Hello, World!”。

w13. （14分）在HTML中创建一个简单的表单，包含用户名、密码和提交按钮。并使用CSS对表单进行样式美化，使其看起来更美观。

材料：有一个网页，页面上有一个按钮，按钮的id为“btn”。

w14. （20分）请编写JavaScript代码，当点击上述按钮时，获取页面上所有class为“item”的元素，并将它们的背景颜色设置为红色。

材料：有一个网页，页面上有一个列表，列表项的class为“list-item”，列表项内有一个链接，链接的文本为“更多内容”。

w15. （24分）请编写JavaScript代码，当点击列表项内的“更多内容”链接时，如果当前列表项的背景颜色为蓝色，则将其改为绿色；如果当前列表项的背景颜色为绿色，则将其改为蓝色。同时，在控制台输出当前列表项的文本内容。

答案：
w1. A
w2. A
w3. B
w4. A
w5. C
w6. A
w7. B
w8. D
w9. A
w10. A
w11. CSS盒模型由内容区、内边距、边框和外边距组成。设置元素宽度可以使用width属性，高度使用height属性。若包含内边距和边框，实际宽度和高度需考虑这些因素。例如：width: 200px; height: 100px; padding: 十px; border: 五px solid red; 此时元素实际宽度为200 + 2 十 + 2 五 = 230px，高度同理。
w12. <button onclick="alert('Hello, World!')">点击我</button>
w13. <form>
<label for="username">用户名：</label>
<input type="text" id="username" required>
<br>
<label for="password">密码：</label>
<input type="password" id="password" required>
<br>
<input type="submit" value="提交">
</form>

<style>
form label {
display: block;
margin-bottom: 五px;
}
form input {
width: 200px;
padding: 五px;
margin-bottom: 十px;
}
form input[type="submit"] {
background-color: lightblue;
color: white;
cursor: pointer;
}
</style>
w14. document.getElementById('btn').addEventListener('click', function() {
var items = document.querySelectorAll('.item');
for (var i = 0; i < items.length; i++) {
items[i].style.backgroundColor ='red';
}
});
w-15. document.querySelectorAll('.list-item a').forEach(function(link) {
link.addEventListener('click', function(event) {
event.preventDefault();
var listItem = this.parentNode;
if (listItem.style.backgroundColor === 'blue') {
listItem.style.backgroundColor = 'green';
} else {
listItem.style.backgroundColor = 'blue';
}
console.log(listItem.textContent);
});
});