试题二代码.rar 试题二( 30 分) 阅读下列说明、效果图、 HTML 代码和 CSS 代码,开发网页动态页面样式,填写( 1 )至( 15 )代码。 【说明】 这是“ Web 技术社区”网站,该网站致力于推广和分享各种前端技术,如 HTML 、 CSS 、 JavaScript 和 jQuery ,现在我们需要编写该网站首页样式。 项目名称为 web_skill ,包含首页 index.html 、 css 文件夹和 img 文件夹,其中, css 文件夹包含 index.css 文件, img 文件夹包含 html.png 、 css.png 、 js.png 和 jquery.png 图片。 首页( index.html )内容分为两部分,一是【网站介绍】,位于页面上端,内容为【欢迎语】和【网站内容介绍】,以文字的形式展示;二是【技术介绍】,位于页面下端,展示四项【技术】,每项都包括【技术 logo 】和【技术特点】,以图片和列表的形式展示。 对页面样式进行设计,要求为: ( 1 )页面全局样式:设置页面全局属性,页面外边距和内边距为“ 0 ”,字体为“宋体”,字体大小为“ 35px ”。为页面设置透明度动画,在页面加载时执行,透明度从“ 0 ”到“ 1 ”,动画持续时间为“ 1s ”,动画次数为“ 1 ”次。 ( 2 )【网站介绍】样式:为页面上端【网站介绍】部分添加背景颜色“ #000000 ”,并设置宽度为“ 100% ”、高度为“ 400px ”、字体颜色为“ #FFFFFF ”。另外,为【欢迎语】和【网站内容介绍】内容设置“绝对布局”、距顶部边缘“ 16% ”、距左边缘“ 16% ”、宽度为“ 68% ”、文本内容“居中”。 ( 3 )【技术介绍】样式:为页面下端【技术介绍】设置“弹性布局”、文本内容“居中”。另外,为【技术】设置宽度为“ 17% ”、外边距为“ 4% ”;为【技术 logo 】设置高度为“ 200px ”、宽度为“ 200px ”、边框颜色为“ #000000 ”、边框为“ 1px 、实线”、边框设置“ 20px 圆角”;为【技术特点】中列表设置文本内容“居左”。 【效果图】 图 2-1 【代码:首页 index.html 】 Web 技术社区 欢迎来到 XX 网 本站包括了 HTML 、 CSS 、 Javascript 、 jQuery 等各种基础编程教程。 本站致力于推广各种前端技术,所有资源 ... HTML 指的是超文本标记语言 /* ... 省略其它 li ,参见【效果图】内容 */ CSS 指层叠样式表 /* ... 省略其它 li ,参见【效果图】内容 */ JavaScript 是一种轻量级的编程语言 /* ... 省略其它 li ,参见【效果图】内容 */ jQuery 是一个 JavaScript 函数库 /* ... 省略其它 li ,参见【效果图】内容 */ 【代码: CSS 文件 index.css 】 ( 3 ) { margin: 0; ( 4 ) ; /* 内边距 */ ( 5 ) ; /* 字体 */ font-size: 35px; } body { animation-name : fadeIn; ( 6 ) ; animation-iteration-count: 1; } ( 7 ) fadeIn { from { opacity: 0; } to { opacity: 1; } } #introduction { ( 8 ) ; /* 背景颜色 */ width:100%; height:400px; ( 9 ) ;/* 字体颜色 */ } #content { ( 10 ) ; /* 绝对布局 */ ( 11 ) ; /* 顶部边距 */ left: 16%; width: 68%; text-align: center; } #main { ( 12 ) ; text-align: center; } #main img { ( 13 ) ; border-radius: 20px; height: 200px; width: 200px; } .card { width: 17%; margin: 4%; } ( 14 ) {/* 列表样式,以 class 加子元素选择器的方式填写 */ ( 15 ) ; } 【 问题 】( 30 分,每空 2 分) 开发网页动态页面样式,补全代码,在( 1 )至( 15 )处填入正确的内容。