Web前端技术书后习题答案_第1页
Web前端技术书后习题答案_第2页
Web前端技术书后习题答案_第3页
Web前端技术书后习题答案_第4页
Web前端技术书后习题答案_第5页
已阅读5页,还剩8页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

《Web前端技术》书后习题答案第1章:略

第2章:

一、选择题:1~5:

C

C

D

A

C

6~10:

B

C

D

A

B

11~12:

C

B二、填空题(1)超文本标记语言浏览器(2)<head><body>(3)<metahttp-equiv=”refresh”content=”1”>(4)<b><strong><sup>(5)bgcolorbackground(6)face(7)olulli(8)imgborderalt(9)getpostpostget(10)type三、简答题略第3章:一、选择题:

1~5:

A

D

A

B

D

6~10:

C

D

C

C

D二、填空题(1)层叠样式表CascadingStyleSheeet(2)内联样式内部样式外部样式(3)displayvisibility(4)边框外边距(5)块级元素行内元素三、简答题略四、设计分析题1.<style>body{font-size:12px;font-style:normal;text-decoration:underline;color:#ff3300;}</style>2.<html><head><metacharset="utf-8"/><title></title><style>#div1{background-color:#ffc33c;border:2pxsolid#333;height:300px;width:300px;float:left;margin-right:25px;}#div2{background-color:#ff33cc;border:2pxsolid#333;height:300px;width:300px;float:left;margin-left:25px;margin-right:25px;}#div3{background-color:#ff33cc;border:2pxsolid#333;height:300px;width:300px;float:left;margin-left:25px;margin-right:25px;}</style></head><body><divid="div1">左列</div><divid="div2">右列1</div><divid="div3">右列2</div></body></html>3.<html><head><metacharset="utf-8"/><title></title><style>div{ border:1pxredsolid; width:400px; height:200px; background-color:gray; color:white;}a:link{ color:#ff0000; text-decoration:none;}a:visited{ color:#00ff00;}a:hover{ color:#ff00ff;}a:active{ color:#0000ff;}</style></head><body><div> <ahref="">欢迎访问我的个人网站</a></div></body></html>第4章:

一、选择题:1~4:

D

B

B

D

5~8:

C

D

D

D二、填空题(1):firstChild选中子元素(2)border-radiusborder-top-left-radius(3)box-shadowx_offsetblur(4)border-imageborder-image-repeatroundstretch(5)线性渐变径向渐变(6)perspective三、简答题略四、设计分析题1./*水平导航条*/<html><head><metacharset="utf-8"><title>水平导航条</title><style>ul{ list-style-type:none; margin:0; padding:0; overflow:hidden;}li{ float:left;}a:link,a:visited{ display:block; width:120px; font-weight:bold; color:#FFFFFF; background-color:#98bf21; text-align:center; padding:4px; text-decoration:none;}a:hover,a:active{ background-color:#7A991A;}</style></head><body><ul><li><ahref="#home">首页</a></li><li><ahref="#news">新闻</a></li><li><ahref="#contact">联系方式</a></li><li><ahref="#about">关于我们</a></li></ul></body></html>/*垂直导航条:去除li中的float:left样式即可*/2.<html><head><metacharset="utf-8"><title></title><style>div.img{border:1pxsolid#ccc;}div.img:hover{border:1pxsolid#777;}div.imgimg{width:100%;height:auto;}div.desc{padding:15px;text-align:center;}*{box-sizing:border-box;}.responsive{padding:06px;float:left;width:24.9%;}@mediaonlyscreenand(max-width:800px){.responsive{width:49.9%;margin:6px0;}}@mediaonlyscreenand(max-width:400px){.responsive{width:100%;}}</style></head><body><h2style="text-align:center">响应式图片相册</h2><divclass="responsive"><divclass="img"><atarget="_blank"href="img1.jpg"><imgsrc="img1.jpg"alt="img1"></a><divclass="desc">img1</div></div></div><divclass="responsive"><divclass="img"><atarget="_blank"href="img2.jpg"><imgsrc="img2.jpg"alt="img2"></a><divclass="desc">img2</div></div></div><divclass="responsive"><divclass="img"><atarget="_blank"href="img3.jpg"><imgsrc="img3.jpg"alt="img3"></a><divclass="desc">img3</div></div></div><divclass="responsive"><divclass="img"><atarget="_blank"href="img4.jpg"><imgsrc="img4.jpg"alt="img4"></a><divclass="desc">img4</div></div></div><divclass="clearfix"></div><divstyle="padding:6px;"></div></body></html>第5章:一、选择题:1~5:

CACBC

6~10:

BCBBA二、填空题(1)文档对象模型浏览器对象模型(2)分号(3)单行注释多行注释(4)标识符数字关键字(5)键值内置对象浏览器对象三、设计分析题1.<html><body><script> varsum=0; for(vari=1;i<=1000;i++){ sum+=i; } document.write("1~1000间整数的和等于:"+sum);</script></body></html>2.<html><body><script> varsum=0; for(vari=1;i<1000;i+=2){ sum+=i; } document.write("1000以内奇数和等于:"+sum);</script></body></html>第6章:

一、选择题:1~5:

BCCCC

6~10:D

C

A

C

D二、填空题(1)文档对象模型W3C(2)getAttributesetAttribute(3)浏览器对象模型windownavigator(4)绑定事件解除事件绑定(5)confirmprompt(6)\w\d三、设计分析题1.^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$2.<pid="demo"></p><buttononclick="stop()">停止</button><script>varmyVar=setInterval(myTimer(),1000);functionmyTimer(){vard=newDate(); vart=d.toLocaleTimeString(); document.getElementById("demo").innerHTML=t;}functionstop(){clearInterval(myVar);}</script>第7章:一、选择题:1~7:ADCBACC二、填空题(1)langzh-CNen(2)charsetgbk(3)headernavsection(4)summarydetails(5)progressmeter(6)contenteditablehiddendragable(7)\w\d三、简单题略第8章:

一、选择题:1~5:

CBCBC

6~10:D

B

A

C

D二、填空题(1)canvassvg(2)screenXscreenY(3)getContext(4)createLinearGradientcreateRadialGradient(5)矢量可缩放的矢量图形三、简单题略第9章:

一、选择题:1~6:

CBCCDA二、填空题(1)audiovideo(2)autoplay(3)mp4oggwebm(4)OGGVorbis有损(5)WebAudioAPI(6)preloadposter第10章:一、选择题:1~5:

CABAB

6~10:BDCBA二、填空题(1)multipleFileList(2)namesizeMIMElastModified(3)readAsTextreadAsBinaryString(4)dragable(5)JSON键值对(6)sessionStoragelocalStorage三、简单题略第11章:

一、选择题:1~7:

BADCBDB二、填空题(1)AJAX轮询长轮询(2)TCP全双工(3)HTTP(4)XMLHttpRequest不刷新(5)WebWorker三、简单题略第12章:一、填空题(1)弹性容器弹性项目displayflex(2)主轴交叉轴(3)flex-directionflex-wrap二、设计分析题1.<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>布局</title><style>*{box-sizing:border-box;}body{font-family:Arial;padding:10px;background:#f1f1f1;}/*头部标题*/.header{padding:30px;text-align:center;background:white;}.headerh1{font-size:50px;}/*导航条*/.topnav{overflow:hidden;background-color:#333;}/*导航条链接*/.topnava{/*float:left;display:block;*/display:inline-block;color:#f2f2f2;text-align:center;padding:14px16px;text-decoration:none;}/*链接颜色修改*/.topnava:hover{background-color:#ddd;color:black;}/*创建两列*//*Leftcolumn*/.leftcolumn{float:left;width:75%;}/*右侧栏*/.rightcolumn{float:left;width:25%;background-color:#f1f1f1;padding-left:20px;}/*图像部分*/.fakeimg{background-color:#aaa;width:100%;padding:20px;}/*文章卡片效果*/.card{background-color:white;padding:20px;margin-top:20px;}/*列后面清除浮动*/.row:after{content:"";display:table;clear:both;}/*底部*/.footer{padding:20px;text-align:center;background:#ddd;margin-top:20px;}/*响应式布局-屏幕尺寸小于800px时,两列布局改为上下布局*/@mediascreenand(max-width:800px){.leftcolumn,.rightcolumn{width:100%;padding:0;}}/*响应式布局-屏幕尺寸小于400px时,导航等布局改为上下布局*/@mediascreenand(max-width:400px){.topnava{float:none;width:100%;}}</style></head><body><divclass="header"><h1>我的网页</h1><p>重置浏览器大小查看效果。</p></div><divclass="topnav"><ahref="#">链接</a><ahref="#">链接</a><ahref="#">链接</a><ahref="#"style="float:right">链接</a></div><divclass="row"><divclass="leftcolumn"><divclass="card"><h2>文章标题</h2><h5>2019年4月17日</h5>

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论