阅读下列说明、效果图和 HTML 代码,进行静态网页开发,填写( 1 )至( 10 )代码。 【说明】 这个某项目中的其中一个活动页,应用 HTML5 和 css3 技术完成页面的布局。项目包含主页 index.html 、 style.css 和 img,js 文件夹。要求页面的文字随着屏幕的大小变化而变化,根据效果图和已有的代码补全( 1 ) - ( 10 )的代码 【效果图】 【代码:主页 index.html 】 花花个人赛 1 ,initial-scale=1,user-scalable=no"> 2 花花个人赛 我的奖品 3 所有电子券请在 10 月 31 日 前使用 , 逾期作废 获奖名单 中奖用户 RP 排名 具体奖品 张三 1 一年学费 + 特别礼品 五 23 4 个月学费 + 特别礼品 35 2 个月学费 + 特别礼品 四 38 100 元红包 + 特别礼品 玖 42 50 元红包 + 特别礼品 刘一 48 30 元红包 + 特别礼品 【代码: style.css 】 body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{ margin:0; padding:0; } img{ display: block; } .wrap{ 3 ;/* 设置最大宽度 720px*/ margin:0 auto; background:url("../img/bottomImg.jpg") no-repeat bottom/100% #AAEE99; padding-bottom:4rem; } header{ width: 100%; height: 2rem; background-color: #46BC41; } header h2{ position:relative; margin:0 .8rem; line-height: 2rem; font-size: .7rem; font-weight: normal; padding-left:1rem; color:#fff; } header h2 span{ position:absolute; left:0; top:0.1rem; width: 0.8rem; height: 2rem; background: url("../img/back.jpg") no-repeat center/100%; } .banner{ width: 100%; } .banner img{ width: 100%; } .main{ margin:0 .8rem; padding-top:0.7rem; } .main .prize{ position: relative; width: 100%; height: 2rem; margin-bottom:0.33rem; line-height: 2rem; font-size: 0.5rem; background-color: #CCF4C2; 4 ;/* 设置 5px 的圆角 */ color:#2C6C22; } .main .prize p{ padding:0 2rem; } .main .prize span{ display: block; position: absolute; top:50%; right: 2.5rem; color:#AB431C; font-size: .7rem; transform: translateY(-50%); } .main .prize:after{ content: ""; display: block; position: absolute; top:50%; right: 2rem; width: 0.3rem; height: 0.3rem; border-right:2px solid #2C6C22; border-top:2px solid #2C6C22; 5 ;/* 设置垂直位移一半,并旋转 45deg,*/ 6 ;/* 设置层级为 2*/ } .main .description{ width: 100%; background-color: #fff; border:3px dashed #F8E42D; padding:.6rem 2rem; margin-bottom:0.33rem; line-height: 0.8rem; font-size: 0.6rem; color:#0E1B23; 7 ;/* 设置盒子大小始终为 100%*/ } .main .description span{ color:#C83F2D; } .main .nameList{ margin-bottom:0.33rem; } .main .nameList h2{ position: relative; line-height: 2rem; height: 2rem; text-align: center; font-weight: normal; font-size: 0.7rem; color:#1D6911; } .main .nameList h2 span{ position: relative; background-color:#AAEE99; padding:0 10px; z-index: 1; } .main .nameList h2:after{ content:""; display: block; position: absolute; top:50%; width: 100%; height: 1px; background-color: #8CD07B; z-index: 0; } .main .nameList table{ width: 100%; background-color: #C4F4B8; text-align: center; font-size: .6rem; 8 ;/* 设置边框重叠 */ color:#09331F; } .main .nameList table tr td{ border:1px solid #AEDF9E; } .main .nameList table tr td span{ color:#666; } /* 设置 td 的第三列 */ .main .nameList table tr td: 9 { padding:.5rem .6rem; text-align: left; } .main .nameList table th{ width: 33.33%; height: 2rem; background-color: #95E455; color:#fff; font-size: .7rem; font-weight: normal; } 【代码: resetFont.js 】 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { // 在以下横线中填写,如何宽度大于 720 那就按 720 执行,否则按实际宽 var clientWidth = 10 ; if (!clientWidth) return; docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);