《HTML5 CSS3Web前端开发技术（第2版）》思考与练习题答案 第12--18章.docx

《《HTML5 CSS3Web前端开发技术（第2版）》思考与练习题答案 第12--18章.docx》由会员分享，可在线阅读，更多相关《《HTML5 CSS3Web前端开发技术（第2版）》思考与练习题答案 第12--18章.docx（30页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、思考与练习题参考答案第十二章1.简答题(1 )在HTML 5中，涉及到文件操作的重要对象有哪些？这些对象的功能是什么？在HTML5中，涉及到文件操作的重要对象有 国eList对象、file对象、ArrayBuffer对象、 ArrayBufferView 对象、Blob 接口和 FileReader 接口等。file对象是表单input的一种类型，用来选择一个文件实现上传操作。在HTML 5中，为 input元素添加multiple属性,file元素允许一次选择多个文件，用户选择的每一个文件都是一个 file对象。FileLisi对象是file对象的列表，代表用户选择的所有文件，是file对象

2、的集合。ArrayBuffer实际上是JavaScript操作二进制数据的一个接口，它的作用是分配一段可以存 放数据的连续内存区域。一个ArrayBuffer对象代表一个固定长度的用于装载数据的缓存区。在HTML5中，不能直接操作ArrayBuffer对象中的内容，需要ArrayBufferView对象来读 写。ArrayBufferView对象可以将缓存区中的数据转换为各种数据类型的数组。Blob表示二进制原始数据，Blob对象有两个属性，size属性表示一个Blob对象的字节长 度，type属性表示Blob对象的MIME类型，如果是未知类型，那么返回一个空字符串。FileReader接口主

3、要用来将文件读入到内存中，并且读取文件中的数据。(2 )在HTML 5中，过渡所选择文件类型的方法有哪些？在HTML 5中，可以通过为file类型的input元素添加accepi属性来指定要过滤的文件类型。在设置完accept属性之后，在浏览器中选择文件时会自动筛选符合条件的文件。目前有少数浏color:red;font-family:黑体;a:active (color: #666;)第十四章1.简答题(1 )文本的font属性在应用时需要注意哪些问题？font属性是个复合属性，可一次性设置各种字体属性(属性之间以空格分隔b在使用font 属性设置字体格式时，字体属性名可以省略o fon【属

4、性的排列顺序是：fon【-weighi、font-varian【、 font-styles font-size 和 font-family。需要说明的是，font-weight、font-variant、font-style这3个属性的顺序是可以改变的，但 font-sizex font-family必须按指定的顺序出现，如果顺序不对或缺少一个，那么整条样式定义可 能不起作用。(2 )设置图像边框需要使用border-image属性，说明该属性各参数的意义，并在不同的浏 览器中调试显示结果。CSS3增加的border-image属性，该属性指定一个图像文件作为边框，边框的长或宽会随着 网页元素

5、承载内容的多少自动调整。使用border-image属性，浏览器在显示图像边框时，自动将 用到的图像分割成9局部进行处理，不需要用户再考虑边框与内容的适应问题。border-image属性的第一个参数需要指明边框图像的地址，接着4个参数是浏览器将边框图 像分割时的上右下左四个边距，最后一个参数是边框宽度。例如：border-image:url(images/borderimage.png) 5 10 15 20/25px;-moz-border-image:url(images/borderimage.png) 5 10 15 20/25px;-webkit-border-image:url(

6、images/borderimage.png) 5 10 15 20/25px;(3 )比拟word-wrap属性与word-break属性的区别，并通过例如加以验证。word-wrap是CSS3新增加的属性，该属性允许超过容器的长单词换行到下一行，它的取值为normal和break-word ,默认值为normal ,表示只在允许的断字点换行，break-word表示在长 单词或URL地址内部进行换行。word-break是CSS3新加的属性,用来处理如何自动换行。它的取值为normak break-all 和keep-alU默认值为normal ,表示使用浏览器默认的换行规那么，break

7、-all表示允许在单词内换 行，keep-all表示只能在半角空格或连字符处换行。(4 )本章中介绍的各种CSS属性既有CSS2以前的属性，也有CSS3新增的属性，列举出 CSS3新增属性，说明其释义。word-break ,用来处理如何自动换行。word-wrap ,该属性允许超过容器的长单词换行到下一行。border-radius ,可以设计各种类型的圆角边框。border-image属性，该属性指定一个图像文件作为边框，边框的长或宽会随着网页元素承载 内容的多少自动调整。max-width和max-height分别用来设置图片宽度最大值和高度最大值。2.操作题(1 )用CSS设计如下图的

8、页面，要求如下。 设 置背景 background-attachment、 background-image、 background-repeat、 background-position 等属性； 设置图片的borderx width、height等属性；为控制图片位置，可将图片置于table标记或标记中。body background-attachment: fixed;background-image: url(images/bj3.jpg);background-repeat: no-repeat;background-position: center center;).my_css

9、border: 20px #FFFF99 ridge;width:200px;height:200px;)第十五章1.简答题(1 )什么是css盒模型概念，如何计算其宽度？盒模型是CSS控制页面布局的一个非常重要的概念，页面上的所有元素，包括文本、图像、 超级链接、div块等，都可以被看作盒子。由盒子将页面中的元素包含在一个矩形区域内，这个 矩形区域那么称为“盒模型”。盒模型由内到外依次分为内容(content 填充(padding 边框(border )和边界(margin ) 4局部，如图15-i所示。盒子的实际大小为这几局部之和，盒子宽度为：左边界+左边框+左填 充+内容宽度+右填充+右

10、边框+右边界。(2 ) CSS3新增哪些与盒相关的属性？简述其各自功能。宽度和高度，定义内容的大小属性；如果盒子里信息过多，超出width和height属性限定 的大小，盒子的高度将自动放大。这时需要使用overflow属性设置处理方式。定义盒模型语法 格式如下：width: auto | length;height: auto | length;overflow: auto | visible | hidden | scroll;边界（margin ）是盒模型与其他盒模型之间的距离，使用margin属性定义，其语法格式 如下。margin: auto | length;填充（padding

11、）用来设置内容和盒子边框之间的距离，可用padding属性设置，其语法格 式如下。padding: length;边框（border ）是盒模型中介于填充（padding ）和边界（margin ）之间的分界线，可用 border-widthx border-stylex border-color属性定义边框的宽度、样式、颜色，也可以直接使用border 属性后加3个对应值，用空格隔开进行设置。（3 ）说明以下 border-style 属性值的含义：solid outset ridge、dottedo边框样式用border-style属性描述，其值可取的关键字如下。 none ：无边框，默认

12、值 hidden ：隐藏边框 dashed ：点划线构成的虚线边框 dotted :点构成的虚线边框 solid ：实线边框 double ：双实线边框 groove ：根据color值，显示3D凹槽边框 ridge :根据color值，显示3D凸槽边框 inset ：根据color值，显示3D凹边边框 outset ：根据color值，显示3D凸边边框（4）简述绝对定位的设置效果。设置position属性的值为absolute时即为绝对定位，是盒子相对其具有position属性设置的 父对象进行定位。如果父对象无position属性设置，盒子以浏览窗口为参照绝对定位。绝对定位 的元素浮于页面

13、之上，不占用原页面空间，后续元素不受其影响，填充其原有位置。(5 )简述CSS的定位属性position的值的含义。使用position属性可以精确控制盒子的位置，其语法格式如下。position: static (relative | absolute | fixedstatic :静态定位，默认的定位方式，盒子按照HTML规那么定位，定义top% lefts bottomx right 无意义。absolute :绝对定位,通过top、left、bottom、right等属性值定位盒子相对其具有position设 置的父对象的偏移位置，不占用原页面空间。relative ：相对定位，通过t

14、op、left、bottomright等属性值定位元素相对其原本应显示位置 的偏移位置，占用原位置空间。fixed ：固定定位，通过top、left、bottomx righl等属性值定位盒子相对浏览器窗口的偏移位 置。2.操作题(1 )设置盒模型，实现图15-30所示效果。div height: 20px;width: 150px;background-color: #EFEFEF;margin: lOpx;)-Pl(padding: 20px;margin: 60px;border-style:outset;border-width:10px;border-color:#OFO; 盒模型

15、(2 )设计实现购物网站商品橱窗展示，效果参考图15-31o图15-30盒模型浏览效果图15-30盒模型浏览效果图15-31购物网站商品橱窗展示浏览效果bodyfont-size:12px;).e floatdeft; margin:2px;).img/*内层虚线框*/border: thin dotted #999;.b/*图标识*/margin:5px; cleanleft;) 运动裤 99.00运动鞋Y 159.00(3)请参考本章案例完成如下页面的设计。bodyfont-size:12px;background-color:#CCC; text-align: center;#heade

16、rmargin:5px auto;background :#FFC;width:80%;/*自适应页面大小”/height:60px;)#main padding-top: lOpx;line-height:150%;margin:5px auto;background: ffDOFFFF;width:80%;/*自适应页面大小*/height:300px; text-align:left;)#footermargin:5px auto;background:#FFC;width:80%;/*自适应页面大小*/height:30px;).h font-size:32px;padding-top

17、:10px;margin:5px;,imgl/*第一种环绕方式*/float:right;margin:10px;padding:5px;/*/).img2 /*第.种环绕方式*/floatJeft；margin:10px;padding:5px/*/)span实现首字下沉*/ floatleft;font-size:36px;font-family:黑体；padding:10px Opx;摘自大师的预言美国著名的连线杂志，曾就一系列事物的开展前景向一批各自领域的专家 征询。这些专家的看法可能有些武断，但令人欣赏地直奔主题。下面是他们对互联网络所预言的另一 张时间进程表：2001远程手术将卜分

18、普及，最好的医学专家可以为全世界的人诊断治疗疾病。2001财 富500家上榜者中将出现批虚拟企业。2003全球可视 将支持更普遍的远程会议，企 业家将通过网络管理公司。2003 远程工作将是更多的人主要的上班方式。2007光纤电 缆广泛通向社区和家庭，无限带宽不再停留在梦想中。2016出现第一个虚拟大型公共图书馆， 虚拟书架上推满了虚拟书籍和资料。这些预言中，还包括了所谓食品药片、冷冻复活等匪益所思的言论。仅从与网络相关的预 言看，人类全方位的数字化生存”一包括工作、生活和学习等相当广泛的领域一都不是那么遥远。 这一张时间进度表究竟能不能如期兑现？阿伦凯(A.Kay)首先提出，又被尼葛洛庞帝引

19、用过 的著名论断说得好：预测未来的最好方法就是把它创造出来。当今的社会，预测再也不是消极地等 待某个事实的出现，而是积极地促成这个事实。从这个意义上讲，创造和创新才是我们对21世纪电 脑开展趋势最准确的预测，远胜过一切天才的预言。 ：xxxxxx 邮箱:xxxxxxxxxxx xxxxxxxxxxxxxxxxxxx第十六章1.简答题(1 )什么是响应式布局？列举出3个具有响应式布局的网站。响应式布局是指创立的网页页面能自动适应PC机屏幕、打印机、手机等多个不同大小的终端。响应式布局可以通过CSS3新增的媒体查询(Media Queries )模块实现。(2 ) CSS3的媒体查询有哪些方法？分

20、别举例说明。应用媒体类型的方法主要有使用link标记引用样式、使用import标记导入样式、使用CSS3 的media标记说明样式等3种。&使用link方法引用样式link方法引入媒体类型其实就是在标记引用样式时，通过link标记中的media属性来 指定不同的媒体类型，例如。b. import方法导入样式import导入样式文件也可以用来引用媒体类型，在vheadv/head标记中的v/style 中引入，代码如下。importurl(mystyle.css) screen and (min-width:980px);c. media 方法media是CSS3中新增的媒体查询特性，在页面中可

21、以通过这个属性来引入媒体类型。media引入媒体类型和由甲()11有些类似，使用格式如下。media媒体类型and (媒体特性)样式定义例如：(max-width: 480px)(3 )列举出5个Bootstrap框架常用的CSS元素、Components组件和JavaScript插件。CSS元素 ：addressx list abbi smalk blockquote组件：button、menu、nav、pagnation% labek inputgroup插件：carouseL tooltip collapse, nav-labs、navbar2 .操作题第十七章1.简答题(1 )简述HT

22、ML5新增的结构元素的含义及使用方法。HTML 5中新增了 sectionx article、naw asidex header和fooler等结构元素。运用这些结构 元素，可以让网页的整体布局更加直观和明确、更富有语义化和更具有现代风格。header元素：用来展示网站的标题、企业的logo图片、网站导航条等。nav元素:用于页面导航。aside元素：aside结构元素可以有多种形式，其中最常见的形式是侧边栏，通常用来展示 与当前网页或整个网站相关的一些辅助信息。section元素：网页中要显示的主体内容通常被放置在section结构元素中，每个section元 素都应该有一个标题，用于说明该

23、section的主要内容。footer元素：用来放置网站的版权声明和备案信息等内容，也可以放置企业的联系 和 等联系信息。(2)举例说明网站中有那些元素适合定义为全局样式。设计网页时，为网站设置一个全局样式，例如背景、边界、字体、字号和行高等属性参数， 这样既可以保证不同页面有相对一致的风格也可以保证网页在不同浏览器中稳定的显示效果。(3 )说明CSS应采用什么措施防止样式无法兼容多种浏览器的问题。在网站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使用DIV CSS 设计的网站，就应该更注意浏览器对CSS样式的兼容性。不同类型浏览器对于CSS技术的支持 是不完全统一的，如果再

24、加上浏览器对于CSS解析时存在各种Bug , CSS兼容性处理就变得异常复杂。解决浏览器兼容问题的方法被称之为Hack (即补丁的意思)，就是利用各种过滤方法专 览器还不支持accept属性。使用这种方法过滤上传文件类型时，还需要谨慎。(3 ) FileReader接口的常用方法有哪些？每种方法都实现什么功能？FileReader接口有5个方法，无论读取成功或失败，方法并不会返回读取结果，这一结果存 储在调用该方法的对象的result属性中。abort。：中断读取。readAsBinaryString(in Blob blob)：将文件读取为二进制字符串并保存在result属性中，通 常将它传

25、送到后端，后端可以通过这段字符串存储文件。(5)readAsDataURL(in Blob blob):读取文件，并将数据以URL的形式保存在实例对象result 属性中，如可以直接赋给图片的src属性等。readAsArrayBuffer(in Blob blob)：该方法将Blob对象或File对象中的内容读取为 Array Buffer 对象。readAsTcxt(in Blob blob, optional in DOMString encoding)：以纯文件的形式读取文件，并 将取到的文本保存在实例对象的result属性中。该方法有两个参数，其中第二个参数是文本的编 码方式，默认值

26、为UTF-8o这个方法将文件以文本方式读取，读取的结果即是这个文本文件中 的内容。(4 )在HTML 5中，拖放功能的实现方法是唯一的吗？拖放是一种常见的特性，即抓取对象以后拖到另一个位置。要使用传统的HTML4实现拖 放的功能，开发者要么使用复杂的JavaScript变成，要么使用JavaScript框架，比方jQucry等。 现在HTML5提出了拖放(DnD ) API ,为浏览器带来了原生拖放支持，让编码变得更容易。所 有的主流浏览器比方Chrome .FireFox 3.5以及Safari 4等等都支持HTML5拖放。在HTML5 中，拖放是标准的一局部，任何元素都能够拖放。HTML5

27、也支持jQuery实现的拖放效果。(5)请描述完成一次成功页面内元素拖拽行为事件的过程。门为特定类型浏览器定义样式，即称之为过滤器（Filter ）,从而实现在不同类型浏览器中呈现相同的渲染效果。2.操作题（1 ）设计实现图片展示页面，效果如图16-8所示。成年卡成年卡560元咪适用于一名1 5米以上（不含1 5米）的营客图16-8购物网站商品橱窗展示浏览效果无标题文档 成年卡 5607L/适用于名1.5米以上（不含1.5米）的游客CSS样式如下：charset utf-8;/* CSS Document 7.content background-color: #E1FOED;height:

28、lOOpx;width: 700px;border: lpx solid #39F;vertical-alignimiddle;）.leftfloat: left;height: 80px;width: 150px;font-family:微软雅黑，Arial;line-height: 24px;color: #069;font-size: 26px;text-align:center;vertical-align:middle;margin-top:30px;.imgpadding:15px;float:left;).rightfloat:right;height:100px;width:3

29、50px;padding:10px;color:#000;.right span font: 14px;color: #000;).right span em font-family:微软雅黑；font-size:26px;color:#F60;padding:10px;line-height:50px;).detailfont-size: 14px;color:#036;)(2 )请参考综合案例完成如下页面效果的设计，如图16-9所示。图16-9页面效果页面HTML代码如下：!-精品推荐开始 精品推荐 大连去丹东鸭绿江,九水峡漂流,风城大梨树生态旅游区纯玩 大连旅游花花旅游为您提供特价大连周

30、边旅游团购报价行程天数：2 天280起a href= target=_blankh3成园山庄温泉游近市区，满足孩童的需求！ 行程天数：1 天 120$da href= target=_blankh3大连老虎滩、滨海路、棒植岛、东海公园纯玩日 一次走遍大连精华景点，网罗所有美好记忆，让您的行程更精彩。 行程天数：1 天 320i蒸衣草庄园大连薰衣草庄园是大连市重点景点，也是国家AAAA级旅游景点行程天数：1 天80起a href= target=_blankh3圣亚海洋世界 行程天数：1 天 220il金石滩 行程天数：1 天 黄金海岸免费 大连去丹东鸭绿江，九水峡漂流，凤城大梨树生态旅游区纯玩

31、大连旅游花花旅游为您提供特价大连周边旅游团购报价行程天数：2 天Y280起成园山庄温泉游近市区，满足孩童的需求！ bclass=fleft，行程天数：1 天 120il!-精品推荐结束CSS代码如下：/*精品推荐样式开始/.main-jp height: 590px;overflow: hidden;width: 980px;overflow: hidden;border:solid #aaa lpx;margin:10px auto;.main-jp hl.title font: normal 24px 微软雅黑；height: 45px;margin-left:10px;text-alig

32、n:left;).main-jp background: none;.main-jp ul.fright width: 980px;height: 525px;.main-jp ul.fright li float: left;width: 243px;height: 267px;).main-jp ul.fright li a float: right;display: inline-block;width: 225px;height: 255px;border: Ipx solid #ccc;).main-jp ul.fright li a div.pic, .main-jp ul.fri

33、ght li a div.pic img width: 225px;height: 150px;).main-jp ul.fright li a div.pic overflow: hidden;).main-jp ul.fright li a h3 font: normal 18px 微软雅黑;height: 40px;line-height: 50px;color: #666;padding: 0 lOpx;overflow: hidden;).main-jp ul.fright li a h4 font: normal 12px 微软雅黑;color: #999;height: 20px

34、;line-height: 20px;text-indent: lOpx;overflow:hidden;).main-jp ul.fright li a p padding: 0 lOpx;height: 30px;).main-jp ul.fright li a p b font-size: 14px;color: #0097e0;line-height: 40px;).main-jp ul.fright li a p span font: 12px;color: #f90;.main-jp ul.fright li a p span em font: normal 26px Arial;

35、).main-jp ul.fright li a:hover div.pic img transform: scale(1.2,1.2);-webkit-transform: scalefl.2,1.2);-moz-transform: scale(1.2,1.2);-ms-transform: scale(1.2,1.2);-o-transform: scale(1.2,1.2);transition: all 0.3s ease;- webkit-transition: all 0.3s ease;- moz-transition: all 0.3s ease;- ms-transition: all 0.3s