阅读下列说明、效果图和 HTML 代码,进行静态网页开发,填写( 1 )至( 10 )代码。 【说明】 这个某项目中的其中一个活动页,应用 HTML5 和 css3 技术完成页面的布局。项目包含主页 index.html 、 style.css 和 img,js 文件夹。要求页面的文字随着屏幕的大小变化而变化,根据效果图和已有的代码补全( 1 ) - ( 10 )的代码 【效果图】 【素材】 1-1素材.zip 【代码:主页index.html】 【代码:style.css】 body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{ margin:0; padding:0; } img{ display: block; } .wrap{ ;/*设置最大宽度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; ;/*设置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; ;/*设置垂直位移一半,并旋转45deg,*/ ;/*设置层级为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; ;/*设置盒子大小始终为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; ;/*设置边框重叠*/ 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: { 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 = ; 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);