【简答题】
阅读下列说明、效果图、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圆角”;为【技术特点】中列表设置文本内容“居左”。【效果图】 图1-1 【代码:首页index.html】 Web技术社区 欢迎来到XX网 本站包括了HTML、CSS、Javascript、jQuery等各种基础编程教程。 本站致力于推广各种前端技术,所有资源... (1 ) "> HTML 指的是超文本标记语言 /* ...省略其它li,参见【效果图】内容 */ CSS 指层叠样式表 /* ...省略其它li,参见【效果图】内容 */ JavaScript 是一种轻量级的编程语言 /* ...省略其它li,参见【效果图】内容 */ jQuery是一个JavaScript函数库 /* ...省略其它li,参见【效果图】内容 */ 【代码:CSS文件index.css】 (2 ) { margin: 0; padding: 0;/* 内边距 */ (3 ) ;/* 字体 */ font-size: 35px; } body { animation-name: fadeIn; (4 ) ; animation-iteration-count: 1; } (5 ) fadeIn { from {opacity: 0;} to {opacity: 1;} } #introduction { background-color: #000000;/* 背景颜色 */ width:100%; height:400px; color: #FFFFFF;/* 字体颜色 */ } #content { (6 ) ;/* 绝对布局 */ (7 ) ;/* 顶部边距 */ left: 16%; width: 68%; text-align: center; } #main { (8 ; text-align: center; } #main img { (9 ) ; border-radius: 20px; height: 200px; width: 200px; } .card { width: 17%; margin: 4%; } .card li{ (10 ) ; } 【问题】(10分,每空1分) 进行静态网页开发,补全代码,在(1)至(10)处填入正确的内容。
手机使用
分享
复制链接
新浪微博
分享QQ
微信扫一扫
微信内点击右上角“…”即可分享
反馈
收藏
举报
参考答案:
参考解析: