《Web前端技术》（张晓如 诸峰）书后习题答案.docx

1、Web前端技术书后习题答案第1章：略第2章：一、选择题：15：CCDAC610：BCDAB1112：CB二、填空题（1）超文本标记语言 浏览器（2） （3）（4） （5）bgcolor background（6）face（7）ol ul li （8）img border alt（9）get post post get（10）type三、简答题略第3章：一、选择题：15：ADABD610：CDCCD二、填空题（1）层叠样式表 Cascading Style Sheeet（2）内联样式 内部样式 外部样式（3）display visibility（4）边框 外边距（5）块级元素 行内元素三、简答题

2、略四、设计分析题1. body font-size: 12px;font-style: normal;text-decoration: underline;color: #ff3300;2.#div1background-color: #ffc33c;border: 2px solid #333;height: 300px;width: 300px;float: left;margin-right:25px ;#div2background-color: #ff33cc;border: 2px solid #333;height: 300px;width: 300px;float: left;

3、margin-left: 25px;margin-right: 25px;#div3background-color: #ff33cc;border: 2px solid #333;height: 300px;width: 300px;float: left;margin-left: 25px;margin-right: 25px;左列右列1右列23.divborder: 1px red solid;width: 400px;height: 200px;background-color: gray;color: white;a:linkcolor: #ff0000;text-decoratio

4、n: none;a:visitedcolor: #00ff00;a:hovercolor: #ff00ff;a:activecolor: #0000ff;欢迎访问我的个人网站第4章：一、选择题：14：DBBD58：CDDD二、填空题（1）:firstChild 选中 子元素（2）border-radius border-top-left-radius（3）box-shadow x_offset blur（4）border-image border-image-repeat round stretch（5）线性渐变 径向渐变（6）perspective三、简答题略四、设计分析题1. /*水平导航

5、条*/ 水平导航条 ullist-style-type:none;margin:0;padding:0;overflow:hidden;lifloat:left;a:link,a:visiteddisplay:block;width:120px;font-weight:bold;color:#FFFFFF;background-color:#98bf21;text-align:center;padding:4px;text-decoration:none;a:hover,a:activebackground-color:#7A991A;首页新闻联系方式关于我们/*垂直导航条：去除li中的flo

6、at:left样式即可*/2. div.img border: 1px solid #ccc;div.img:hover border: 1px solid #777;div.img img width: 100%; height: auto;div.desc padding: 15px; text-align: center;* box-sizing: border-box;.responsive padding: 0 6px; float: left; width: 24.9%;media only screen and (max-width: 800px) .responsive wid

7、th: 49.9%; margin: 6px 0; media only screen and (max-width: 400px) .responsive width: 100%; 响应式图片相册 img1 img2 img3 img4 第5章：一、选择题：15：CACBC610：BCBBA二、填空题（1）文档对象模型 浏览器对象模型（2）分号（3）单行注释 多行注释（4）标识符 数字 关键字（5）键 值 内置对象 浏览器对象三、设计分析题1. var sum = 0;for(var i=1; i=1000; i+)sum += i;document.write(11000间整数的和等于:+

8、sum); 2. var sum = 0;for(var i=1; i1000; i+=2)sum += i;document.write(1000以内奇数和等于:+sum); 第6章：一、选择题：15：BCCCC610：DCACD二、填空题（1）文档对象模型 W3C（2）getAttribute setAttribute（3）浏览器对象模型 window navigator（4）绑定事件 解除事件绑定（5）confirm prompt（6）w d三、设计分析题1. 1-9d5(18|19|(23d)d2(01-9)|(10|11|12)(0-21-9)|10|20|30|31)d30-9Xx

9、$2. 停止 var myVar = setInterval(myTimer(),1000); function myTimer() var d = new Date(); var t = d.toLocaleTimeString(); document.getElementById(demo).innerHTML = t; function stop() clearInterval(myVar); 第7章：一、选择题：17：ADCBACC二、填空题（1）lang zh-CN en（2）charset gbk（3）header nav section（4）summary details（5）p

10、rogress meter（6）contenteditable hidden dragable（7）w d三、简单题略第8章：一、选择题：15：CBCBC610：DBACD二、填空题（1）canvas svg（2）screenX screenY（3）getContext（4）createLinearGradient createRadialGradient （5）矢量 可缩放的矢量图形三、简单题略第9章：一、选择题：16：CBCCDA二、填空题（1）audio video（2）autoplay（3）mp4 ogg webm（4）OGG Vorbis 有损 （5）Web Audio API（6）

11、preload poster第10章：一、选择题：15：CABAB610：BDCBA二、填空题（1）multiple FileList（2）name size MIME lastModified（3）readAsText readAsBinaryString（4）dragable （5）JSON 键值对（6）sessionStorage localStorage三、简单题略第11章：一、选择题：17：BADCBDB二、填空题（1）AJAX轮询 长轮询（2）TCP 全双工（3）HTTP （4）XMLHttpRequest 不刷新 （5）Web Worker三、简单题略第12章：一、填空题（1）弹

12、性容器 弹性项目 display flex（2）主轴 交叉轴（3）flex-direction flex-wrap二、设计分析题1. 布局* box-sizing: border-box;body font-family: Arial; padding: 10px; background: #f1f1f1;/* 头部标题 */.header padding: 30px; text-align: center; background: white;.header h1 font-size: 50px;/* 导航条 */.topnav overflow: hidden; background-co

13、lor: #333;/* 导航条链接 */.topnav a /*float: left; display: block;*/ display:inline-block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; /* 链接颜色修改 */.topnav a:hover background-color: #ddd; color: black;/* 创建两列 */* Left column */.leftcolumn float: left; width: 75%;/* 右侧栏 *

14、/.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;/* 底部 *

15、/.footer padding: 20px; text-align: center; background: #ddd; margin-top: 20px;/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */media screen and (max-width: 800px) .leftcolumn, .rightcolumn width: 100%; padding: 0; /* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */media screen and (max-width: 400px) .topnav a float: none; width: 100%; 我的网页 重置浏览器大小查看效果。 链接 链接 链接 链接 文章标题 2019 年 4 月 17日 图片 一些文本. 一些文本. 文章标题 2019 年 4 月 17日 图片 一些文本. 一些文本. 关于我 图片 关于我的一些信息. 热门文章 图片 图片 图片 关注我 一些文本. 底部区域第13章：一、选择题：18：DCBABBDA二、简答题略