2024年3月6日发(作者：jspp软件是干嘛的)
Web开发基础练习题
试题题型：配伍题、判断题、单选题、多选题、编程题
第1章 Web的工作方式
判断题
1. Web（World Wide Web）即全球广域网，也称为万维网。（ ）
2. Web服务器主要功能包括: 存储网站资源文件，代用户发送请求，提供基本的安全功能。（ ）×
3. Web服务端应用程序开发主要可以使用以下几种编程语言: PHP、等。（）√
4. FTP协议规定了Web服务器与浏览器之间如何打包及如何传输数据。（ ）×
5. Web中采用HTML（HyperText Markup Language, 超文本标记语言）通信协议。（ ）×
单选题
1. Internet上提供的主要服务有:Telnet、E-mail、（ ）、FTP。C
A．App B. Windows C. WWW D. W3C
2. 万维网联盟（World Wide Web Consortium），简称（ ），专门负责制定Web应用的标准。C
A. WWW B. Web C. W3C D. 3WC
3. Web分为（ ）和Web服务器程序。A
A．Web客户端 B. HTML C. 数据库 D. 浏览器
4. Web程序要想顺利运行，就需要Web服务器、浏览器、（ ） 三者相互配合，共同发挥作用。D
A. 数据库 B. HTML C. 网页 D. 通信协议
5. 创建Web内容主要包括三部分: Web设计、（ ）和Web服务器端应用程序开发。B
A. 数据库开发 B. Web前端网页开发 C. App开发 D. 通信协议
配伍题
1.
请为名词①⑤选择表示其含义的描述，将配对好的ae填写到括号中
① WEB服务器
② WEB浏览器
③ HTTP协议
④ Internet
⑤ 远程访问服务
[参考答案]
① ：b ②：a ③：d ④：e ⑤：c
a
b
代用户发送请求，作为HTML的解释器和内嵌脚本的执行器，用图形化方式显示Web网页的内容。
存储网站资源文件，响应浏览器发来的请求，提供基本的安全功能
c 用于支持客户机跨广域网访问公司内部网络的服务
d 规定了Web服务器与浏览器之间如何打包及如何传输数据
e 由那些使用公用语言互相通信的计算机连接而成的全球网络
请填写：①： ②： ③： ④： ⑤：
1
第2章 HTML5基础知识
判断题
1. HTML规定元素标签可以嵌套，但不允许交叉。（ ）
2. 单标记只有开始标记，没有结束标记。开始标记中的/可有可无。（ ）
3. 如果网页中包含多个拥有相同id属性值的元素，则网页报错，无法显示。（ ）×
4.
元素中不允许包含以下元素：标题元素（h1~h6）、span元素、div元素。（ ）×
5. HTML 源代码中的空格都是无效的，最终显示时，都会被浏览器删掉。（ ）×
6. 查找父级目录中的文件或文件夹，可使用“.../父级目录文件或文件夹”返回上级目录。（ ） ×
7. 若不指定元素的target属性，则在单击超链接时，默认会在当前窗口打开新网页。（ ）
8. 设置
的colspan属性可让单元格跨多行显示。（ ）× 9. 表格元素的align属性不是设置表格内容居中对齐。而是设置整个表格在其父元素中整体居中对齐。（ ） 10. 有序列表可自动将列表项按内容排序后显示。（ ）× 单选题 1. 下面定义HTML注释正确的是（ ）。B A． > B. C. --> D. <--这里是注释--> 2. 下面定义页面编码格式的元素正确的是（ ）。C A． B. C. D. </p><p style="text-indent: 2em;";>3. 以下可以实现当鼠标悬停在元素上时，出现工具提示效果的是（ ）。 C </p><p style="text-indent: 2em;";>A. <div><title>工具提示的内容 B. C. D. A.只要网页中包含中文，都必须设置 B.只要网页中同时包含中文和英文，都必须设置 C. 必须和当前网页.html文件的编码格式保持一致 D. 在中文版操作系统中，必须设置 A． B. C. D. 6. ![]() 元素的（ ）属性用于设置要引入的图片的URL地址。B A. href B. src C. alt D. link 5. 下面定义页面编码格式的元素不正确的是（ ）。D 4. 以下说法正确的是（ ）。C 2 7. 将元素的target属性值设置为（ ），可实现单击在新窗口打开新链接。C A. _self B. 不指定值 C. _blank D. blank 8. 以下定义锚点位置错误的是（ ）。B A. B. top C. D. 9. 关于绝对路径的组成，以下描述正确的是（ ）。A A.协议://域名/目录路径/文件名 B. 协议/>域名/目录路径/文件名 C. 目录路径:/协议/域名/文件名 D. 目录路径:>协议/域名/文件名 10. HTML5结构标记中专门定义主导航区域的元素是（ ）。B A. 多选题 1. 以下标记定义正确的是:（ ）。BCD A. B. C. D. 2. 以下说法正确的是（ ）。BC A. 元素中所有子元素的内容，都会显示在网页上 B. 元素中包含对网页的配置 C. 元素中包含要显示的网页的主要内容 D. 元素即可定义在<head>中，又可定义在<body>中 </p><p style="text-indent: 2em;";>3. 下列说法错误的是（ ）。ABC </p><p style="text-indent: 2em;";>A.<b>元素专门用于代替换行 </p><p style="text-indent: 2em;";>B.<i>元素专门用于给文字加下划线 </p><p style="text-indent: 2em;";>C. <u>元素专门用于加粗显示文字 </p><p style="text-indent: 2em;";>D.<p>元素专门用于显示一段文字，并在开头和结尾自动换行。 </p><p style="text-indent: 2em;";>4. 对<audio>标记的属性描述正确的是（ ）。 BD </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>A. href属性用于设置要播放的音频文件的路径 </p><p style="text-indent: 2em;";>B. src属性用于设置要播放的音频文件的路径 </p><p style="text-indent: 2em;";>C. auto属性用于设置在网页加载时自动播放音频文件 </p><p style="text-indent: 2em;";>D. loop 属性用于设置是否循环播放 </p><p style="text-indent: 2em;";>A.当前格td，向右跨4列（含自己）,可写为: <td colspan=”3”> </p><p style="text-indent: 2em;";>B.当前格td，向右跨4列（含自己）,可写为: <td colspan=”4”> </p><p style="text-indent: 2em;";>C.当前格td，向下跨2行（含自己）,可写为:<td rowspan=”2”> </p><p style="text-indent: 2em;";>D.当前格td，向下跨2行（含自己）,可写为: <td rowspan=”1”> </p><p style="text-indent: 2em;";>6. 以下关于列表元素的描述正确的是（ ）。CD </p><p style="text-indent: 2em;";>3 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>5. 以下关于不规则表格定义正确的是（ ）。B C </p><p style="text-indent: 2em;";>A.<ul>元素用于定义有序列表 </p><p style="text-indent: 2em;";>B.<ol>元素用于定义无序列表 </p><p style="text-indent: 2em;";>C.<ul>元素用于定义无序列表 </p><p style="text-indent: 2em;";>D.<ol>元素用于定义有序列表 </p><p style="text-indent: 2em;";>配伍题 </p><p style="text-indent: 2em;";>1. </p><p style="text-indent: 2em;";>请为名词①⑤选择表示其含义的描述，将配对好的ae填写到括号中 </p><p style="text-indent: 2em;";>① </p><p style="text-indent: 2em;";>行内元素 </p><p style="text-indent: 2em;";>② </p><p style="text-indent: 2em;";>块级元素 </p><p style="text-indent: 2em;";>③ </p><p style="text-indent: 2em;";>行内块元素 </p><p style="text-indent: 2em;";>④ </p><p style="text-indent: 2em;";>单标记元素 </p><p style="text-indent: 2em;";>⑤ </p><p style="text-indent: 2em;";>双标记元素 </p><p style="text-indent: 2em;";>[参考答案] </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>a 必须成对出现的开始标记和结束标记的元素 </p><p style="text-indent: 2em;";>b 默认独占一行的元素 </p><p style="text-indent: 2em;";>c </p><p style="text-indent: 2em;";>元素内容有多少，空间就只能占用多少，且多个元素只能在一行中显示 </p><p style="text-indent: 2em;";>d 只要一个开始标记即可实现功能的元素。 </p><p style="text-indent: 2em;";>e 多个元素可在一行中显示，但是可设置元素的大小 </p><p style="text-indent: 2em;";>请填写：①： ②： ③： ④： ⑤： </p><p style="text-indent: 2em;";>① </p><p style="text-indent: 2em;";>：c②：b③：e④：d⑤：a </p><p style="text-indent: 2em;";>编程题 </p><p style="text-indent: 2em;";>1. 从答案选项中选择正确的代码，将其对应的字母填写在空白的步骤中，从而把步骤补充完整： </p><p style="text-indent: 2em;";>定义一个表格，一共2行四列。其中，第一行第一个格，向下跨2行，且内容顶端对齐。第二行第二个单元格位置的格，向右跨3行，且内容居左对齐： </p><p style="text-indent: 2em;";><table> </p><p style="text-indent: 2em;";> <tr> </p><p style="text-indent: 2em;";> <td ___①___ ___②___></td> </p><p style="text-indent: 2em;";><td></td> </p><p style="text-indent: 2em;";><td></td> </p><p style="text-indent: 2em;";><td></td> </p><p style="text-indent: 2em;";></tr> </p><p style="text-indent: 2em;";><tr> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";></tr> </p><p style="text-indent: 2em;";></table> </p><p style="text-indent: 2em;";>其中:①和③请选择不规则表格相关的属性 </p><p style="text-indent: 2em;";> ②和④请选择内容对齐方式 </p><p style="text-indent: 2em;";>[答案选项] </p><p style="text-indent: 2em;";>a．colspan=”2” </p><p style="text-indent: 2em;";>b．rowspan=”2” </p><p style="text-indent: 2em;";>c．colspan=”3” </p><p style="text-indent: 2em;";><td __③__ ___④__ ></td> </p><p style="text-indent: 2em;";>4 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>d．rowspan=”3” </p><p style="text-indent: 2em;";>e．align=”right” </p><p style="text-indent: 2em;";>f. valign=”top” </p><p style="text-indent: 2em;";>g．align=”top” </p><p style="text-indent: 2em;";>h. valign=”right” </p><p style="text-indent: 2em;";>请填写：①： ②： ③： ④： </p><p style="text-indent: 2em;";>[参考答案] ①：b ②：f ③：c ④：e </p><p style="text-indent: 2em;";>第3章 HTML5表单元素 </p><p style="text-indent: 2em;";>判断题 </p><p style="text-indent: 2em;";>1. 表单向服务器端提交数据主要有两种方式：get方式和set方式。（ ）× </p><p style="text-indent: 2em;";>2. Select元素中的多个option元素，若希望多选一，则必须同时定义相同的name属性。（ ）× </p><p style="text-indent: 2em;";>3. 默认情况下，单击<input type="radio">旁边的文本，不会选中该单选按钮。（ ） </p><p style="text-indent: 2em;";>4. 实现表单提交功能，需要两部分配合才能实现: 首先需要服务器端程序接收客户端表单提交来的数据；其次定义客户端HTML表单收集用户信息并提交数据到服务器端。（ ） </p><p style="text-indent: 2em;";>5. <from>元素用来定义一个表单整体，其中包含多种表单元素，用于收集用户的各种信息；（ ）× </p><p style="text-indent: 2em;";>6. 以get方式提交表单是以隐藏的方式将数据提交给服务器。要提交的表单数据不会出现在URL的结尾，而是包含在请求消息主体的内部。（ ）× </p><p style="text-indent: 2em;";>单选题 </p><p style="text-indent: 2em;";>1. 定义在文本框中初始时显示的提示信息，输入内容后就被替换，可设置（ ）属性。C </p><p style="text-indent: 2em;";>A. disabled B. readonly C. placeholder D. value </p><p style="text-indent: 2em;";>2. 当多个单选按钮多选一时，应该为组内的多个单选按钮定义相同的（ ）属性值。B </p><p style="text-indent: 2em;";>A. value B. name C. type D. checked </p><p style="text-indent: 2em;";>3. 下列选项中，不属于input元素的type属性可选内容的是（ ）。D </p><p style="text-indent: 2em;";>A. text B. password C. submit D. hide </p><p style="text-indent: 2em;";>4. 设置select元素的（ ）属性可实现多选。D </p><p style="text-indent: 2em;";>A. value B. selected C. name D. multiple </p><p style="text-indent: 2em;";>5. 设置iframe的（ ）属性，可定义iframe要引入的另一个网页的URL地址。A </p><p style="text-indent: 2em;";>A. src B. href C. rel D. path </p><p style="text-indent: 2em;";>6. 以get方式提交表单时，查询字符串的格式正确的是：（ ）C </p><p style="text-indent: 2em;";>A.?uname=dingding;upwd=123456 </p><p style="text-indent: 2em;";>B.?uname:dingding;upwd:123456 </p><p style="text-indent: 2em;";>C.?uname=dingding&upwd=123456 </p><p style="text-indent: 2em;";>D.?uname:dingding&&upwd:123456 </p><p style="text-indent: 2em;";>7. 以get方式提交表单时，最大可发送的数据大小为:（ ）B </p><p style="text-indent: 2em;";>5 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>A.1K B. 2K C. 3K D. 4K </p><p style="text-indent: 2em;";>8. 如果表单中包含上传文件功能时，内容类型必须设置为: ( )。D </p><p style="text-indent: 2em;";>A. utf-8 </p><p style="text-indent: 2em;";>B. application/x-www-form-URLencoded </p><p style="text-indent: 2em;";>C. text/plain </p><p style="text-indent: 2em;";>D. multipart/form-data </p><p style="text-indent: 2em;";>多选题 </p><p style="text-indent: 2em;";>1. 以下关于表单元素的描述正确的是:（ ）。AC </p><p style="text-indent: 2em;";>A. method属性，用于定义表单向服务器端提交数据的方式 </p><p style="text-indent: 2em;";>B. doctype属性用于定义表单数据进行编码的方式 </p><p style="text-indent: 2em;";>C. enctype属性用于定义表单数据进行编码的方式 </p><p style="text-indent: 2em;";>D. methods属性，用于定义表单向服务器端提交数据的方式 </p><p style="text-indent: 2em;";>2. 以下属于表单元素的是：（ ）。BCD </p><p style="text-indent: 2em;";>A. label B. input C. textarea D. select </p><p style="text-indent: 2em;";>3. 多个备选项中，可选择多个选中项时，可使用哪种表单元素：（ ）。BD </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>A. <input type=”radio”> </p><p style="text-indent: 2em;";>B. <input type=”checkbox”> </p><p style="text-indent: 2em;";>C. <input type=”button”> </p><p style="text-indent: 2em;";>D. <select multiple> </p><p style="text-indent: 2em;";>配伍题 </p><p style="text-indent: 2em;";>1. </p><p style="text-indent: 2em;";>请为元素①⑤选择右侧最合适的使用场景，将配对好的ae填写到括号中 </p><p style="text-indent: 2em;";>① </p><p style="text-indent: 2em;";><input </p><p style="text-indent: 2em;";>type=”checkbox”> </p><p style="text-indent: 2em;";>a 收集用户输入的文字信息 </p><p style="text-indent: 2em;";>b 性别二选一 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>c 是否同意本网站的条款 </p><p style="text-indent: 2em;";>d 从一百多个国家的列表中选择多个国家 </p><p style="text-indent: 2em;";>e 选择本地文件上传服务器 </p><p style="text-indent: 2em;";>② </p><p style="text-indent: 2em;";><textarea> </p><p style="text-indent: 2em;";>③ </p><p style="text-indent: 2em;";><input type=”file”> </p><p style="text-indent: 2em;";>④ </p><p style="text-indent: 2em;";><input </p><p style="text-indent: 2em;";>type=”radio”> </p><p style="text-indent: 2em;";>⑤ </p><p style="text-indent: 2em;";><select> </p><p style="text-indent: 2em;";>[参考答案] </p><p style="text-indent: 2em;";>请填写：①： ②： ③： ④： ⑤： </p><p style="text-indent: 2em;";>① </p><p style="text-indent: 2em;";>：c②：a③：e④：b⑤：d </p><p style="text-indent: 2em;";>编程题 </p><p style="text-indent: 2em;";>1. 从答案选项中选择正确的代码，将其对应的字母填写在空白的步骤中，从而把步骤补充完整： </p><p style="text-indent: 2em;";>在表单中定义性别，二选一。要求，回发服务器时的变量名为“sex”。且扩大选中区域，点击文字，也可选中选项： </p><p style="text-indent: 2em;";><form> </p><p style="text-indent: 2em;";>6 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> <__①___><input type=”__②__” __③__=”sex” __④___=”1”>男</__①_> </p><p style="text-indent: 2em;";><__①___><input type=”__②__” __③__=”sex” __④___=”0”>女</__①_> </p><p style="text-indent: 2em;";></form> </p><p style="text-indent: 2em;";>[答案选项] </p><p style="text-indent: 2em;";>a．id </p><p style="text-indent: 2em;";>b．name </p><p style="text-indent: 2em;";>c．title </p><p style="text-indent: 2em;";>d．value </p><p style="text-indent: 2em;";>e．radio </p><p style="text-indent: 2em;";>f. checkbox </p><p style="text-indent: 2em;";>g．p </p><p style="text-indent: 2em;";>h. label </p><p style="text-indent: 2em;";>请填写：①： ②： ③： ④： </p><p style="text-indent: 2em;";>[参考答案] ①：h ②：e ③：b ④：d </p><p style="text-indent: 2em;";>第4章 CSS3基础知识 </p><p style="text-indent: 2em;";>判断题 </p><p style="text-indent: 2em;";>1. 内部样式表的优先级总是高于外部样式表。（ ）x </p><p style="text-indent: 2em;";>2. 外部样式表是指定义在<head>元素中的<style>元素内的一组CSS样式声明。（ ）× </p><p style="text-indent: 2em;";>3. 凡是定义在元素开始标签之外的样式表，都成为外部样式表。（ ）× </p><p style="text-indent: 2em;";>4. 父元素所有样式属性，子元素都会自动继承。（ ）× </p><p style="text-indent: 2em;";>5. 默认情况下，ID选择器优先级最高，元素选择器优先级最低。（ ） </p><p style="text-indent: 2em;";>6. 为适应不同大小的显示设备，应尽量选择相对单位设置尺寸，如百分比(%)。（ ） </p><p style="text-indent: 2em;";>7. 单位1px的显示大小不会随显示器分辨率改变而改变。（ ）× </p><p style="text-indent: 2em;";>8. margin:auto;可设置元素在水平和垂直两个方向都居中。（ ）× </p><p style="text-indent: 2em;";>9. 外边距合并，是指当两个垂直方向外边距相遇时，将合并为一个外边距。（ ） </p><p style="text-indent: 2em;";>10. 如果希望将内边距和边框的范围也纳入内容范围中用width和height共同控制，可修改box-sizing属性值为border-box。（ ） </p><p style="text-indent: 2em;";>11. 所有行内元素都无法使用width和height属性设置大小。（ ）× </p><p style="text-indent: 2em;";>12. 外边距合并，最终的实际外边距取决于两个外边距中距离较小的那个值。（ ）× </p><p style="text-indent: 2em;";>13. 背景图片默认是不平铺的，如果希望平铺可设置background-repeat:repeat。（ ）× </p><p style="text-indent: 2em;";>14. 元素多层结构自底向上，依次是：外边距、背景色、背景图片、边框和内边距，以及最上层的内容。（ ） </p><p style="text-indent: 2em;";>15. background-size属性值可以是contain，表示等比缩放，但以短边刚好缩放到与元素对应边等长时，停止缩放。（ ）× </p><p style="text-indent: 2em;";>7 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>16. 所有元素都有vertical-align属性，可设置内容垂直方向居中。（ ）× </p><p style="text-indent: 2em;";>单选题 </p><p style="text-indent: 2em;";>1. 下列样式声明语法正确的是（ ）。D </p><p style="text-indent: 2em;";>A. color=purple B. color=”purple” C. color:”purple” D. color:purple </p><p style="text-indent: 2em;";>2. 下列关于内联样式的定义格式正确的是:（ ）。C </p><p style="text-indent: 2em;";>A. <a color=”red” fontSize=”12px”> </p><p style="text-indent: 2em;";>B. <a style=”color=red; font-size=12px”> </p><p style="text-indent: 2em;";>C. <a style=”color:red; font-size:12px”> </p><p style="text-indent: 2em;";>D. <a style=”color:red; fontSize:12px”> </p><p style="text-indent: 2em;";>3. 下列关于内部样式表的内容定义正确的是:（ ）。B </p><p style="text-indent: 2em;";>A. body: { color:red, fontSize:12px } </p><p style="text-indent: 2em;";>B. body{ color: red; font-size: 12px } </p><p style="text-indent: 2em;";>C. body={color:red; fontSize:12px } </p><p style="text-indent: 2em;";>D. body={color:”red”, fontSize:”12px” } </p><p style="text-indent: 2em;";>4. 网页中引入外部样式表的代码正确的是（ ）。C </p><p style="text-indent: 2em;";>A. <style rel=”stylesheet” href=””> </p><p style="text-indent: 2em;";>B. <style rel=”stylesheet” src=””> </p><p style="text-indent: 2em;";>C. <link rel=”stylesheet” href=””> </p><p style="text-indent: 2em;";>D. <link rel=”stylesheet” src=””> </p><p style="text-indent: 2em;";>5. 一下定义id选择器正确的是:（ ）。A </p><p style="text-indent: 2em;";>A. #id{} B. .id{} C. @id{} D. !id{} </p><p style="text-indent: 2em;";>6. 所有p元素和div元素字体大小均为12px，以下写法正确的是:（ ）。C </p><p style="text-indent: 2em;";>A. p+div{ font-size:12px } </p><p style="text-indent: 2em;";>B. p~div{ font-size:12px } </p><p style="text-indent: 2em;";>C. p,div{ font-size:12px } </p><p style="text-indent: 2em;";>D. p div{ font-size:12px } </p><p style="text-indent: 2em;";>7. 选择ul元素下所有后代li（既包含直接子元素，又包含更深层后代元素）的选择器是（ ）。B </p><p style="text-indent: 2em;";>A. ul>li B. ul li C. ul,li D. ul~li </p><p style="text-indent: 2em;";>8. 选择ul元素下所有直接子元素li的选择器是（ ）。A </p><p style="text-indent: 2em;";>A. ul>liB. ul li C. ul,li D. ul~li </p><p style="text-indent: 2em;";>9. 选择class为active的a元素，下列选择器正确的是（ ）。B </p><p style="text-indent: 2em;";>A. a+.active B. C. a .active D a>.actives </p><p style="text-indent: 2em;";>10. 鼠标悬停在a元素上时，字体变为红色，正确的CSS定义是（ ）。B </p><p style="text-indent: 2em;";>A. { color: red } B. a:hover{ font-color: red } </p><p style="text-indent: 2em;";>C. a:active{ color: red } D. a:active{ font-color:red } </p><p style="text-indent: 2em;";>11. 一个元素的内联样式中定义color:red, 内部样式表中定义了color:green, 外部样式表中定义了color: yellow。最终字体颜色为（ ）。A </p><p style="text-indent: 2em;";>8 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>A． red B. green C. yellow D. 无法确定 </p><p style="text-indent: 2em;";>12. （ ）可将当前样式声明的优先级提升为最高。C </p><p style="text-indent: 2em;";> A. @important B. ?import C. !important D. @import </p><p style="text-indent: 2em;";>13. 以下单位属于相对长度单位的是（ ）。A </p><p style="text-indent: 2em;";>A. em B. pt C. cm D. in </p><p style="text-indent: 2em;";>14. 下列关于相对长度单位描述正确的是:（ ）。B </p><p style="text-indent: 2em;";>A. em总是相对于body元素的属性值计算倍数 </p><p style="text-indent: 2em;";>总是相对于所在父元素的属性值计算倍数 </p><p style="text-indent: 2em;";>总是相对于所在父元素的属性值计算倍数 </p><p style="text-indent: 2em;";>总是相对于当前元素上的另一个属性值计算倍数 </p><p style="text-indent: 2em;";>15. 下列表示颜色值错误的是（ ）。D </p><p style="text-indent: 2em;";>A.#fff B. #e4393c C. rgb(25, 128, 128) D. rgb: 25 128 128 </p><p style="text-indent: 2em;";>16. border属性定义正确的是（ ）。A </p><p style="text-indent: 2em;";>A. border: 1px solid red B. border: solid 1px red </p><p style="text-indent: 2em;";>C. border: 1px red solid D. border:red 1px solid </p><p style="text-indent: 2em;";>17. 清除文本框的轮廓可使用（ ）。C </p><p style="text-indent: 2em;";>: 0; B. border: none; C. outline:0; D. border-radius:0 </p><p style="text-indent: 2em;";>18. 一个元素上、下外边距都是10 px，左、右外边距都是20 px，下列定义正确的是（ ）。C </p><p style="text-indent: 2em;";>: 10px 10px 20px 20px B. margin: 20px 10px 20px </p><p style="text-indent: 2em;";>C. margin: 10px 20px 10px D. margin: 20px 20px 10px 10px </p><p style="text-indent: 2em;";>19. 仅设置左上角和左下角为圆角的css代码如下正确的是:（ ）。B </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>A. border-radius:5px 5px 0 0 </p><p style="text-indent: 2em;";> B. border-radius:5px 0 0 5px </p><p style="text-indent: 2em;";>C. border-radius: 0 5px 5px 0 </p><p style="text-indent: 2em;";>D. border-radius: 0 0 5px 5px </p><p style="text-indent: 2em;";> A． border-top-left-radius:5px; </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>B. border-left-top-radius: 5px; </p><p style="text-indent: 2em;";>C. border-radius-left-top: 5px; </p><p style="text-indent: 2em;";>D. border-radius-top-left: 5px </p><p style="text-indent: 2em;";>A. 内容，边框, 内边距,间距 </p><p style="text-indent: 2em;";> B. 内容, 内边距,边框,间距 </p><p style="text-indent: 2em;";>C. 内边距, 内容, 间距,边框 </p><p style="text-indent: 2em;";>D. 内边距, 内容, 边框, 间距 </p><p style="text-indent: 2em;";>A. background-image: img/ B. background-image: url(“img/”) </p><p style="text-indent: 2em;";>9 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>20. 仅设置左上角为圆角的css代码正确的是:（ ）。A </p><p style="text-indent: 2em;";>21. 框模型规定，每个元素由内向外由4个部分组成：（ ）。B </p><p style="text-indent: 2em;";>22. 下列定义背景图片属性正确的是（ ）。D </p><p style="text-indent: 2em;";>C. background-image: “img/” D. background-image: url(img/) </p><p style="text-indent: 2em;";>23. 设置背景图片相对于所在元素向上移动10 px，向左移动20 px，以下设置正确的是（ ）。B </p><p style="text-indent: 2em;";>A. background-position: 20px 10px B. background-position: -20px -10px </p><p style="text-indent: 2em;";>C. background-position: -10px -20px D. background-position: 10px 20px </p><p style="text-indent: 2em;";>24. 以下设置字体加粗属性正确的是（ ）。B </p><p style="text-indent: 2em;";>A. font-size: bold B. font-weight:bold C. font-style:bold D. font-family:bold </p><p style="text-indent: 2em;";>25. 以下设置字体为斜体正确的是（ ）A </p><p style="text-indent: 2em;";>A. font-style: italic B. font-family:italic C. text-decoration: italic D. text-indent:italic </p><p style="text-indent: 2em;";>26. 普通元素设置文本垂直居中的属性正确的是（ ）。C </p><p style="text-indent: 2em;";>A. text-valign:center B. text-align:center </p><p style="text-indent: 2em;";>C. line-height: 元素高 D. line-height: 元素高的一半 </p><p style="text-indent: 2em;";>多选题 </p><p style="text-indent: 2em;";>1. 一个元素可同时被多个样式类修饰，以下写法正确的是:（ ）。BD </p><p style="text-indent: 2em;";>A. <a class=”.btn” class=”.btn-danger”> </p><p style="text-indent: 2em;";>B. <a class=”btn” class=”btn-danger”> </p><p style="text-indent: 2em;";>C. <a class=”btn, btn-danger”> </p><p style="text-indent: 2em;";>D. <a class=”btn btn-danger”> </p><p style="text-indent: 2em;";>2. 以下关于选择器的权重描述正确的是:（ ）。AC </p><p style="text-indent: 2em;";>A. 类选择器的权重等于伪类选择器的权重 </p><p style="text-indent: 2em;";>B. 元素选择器的权重大于伪类选择器的权重 </p><p style="text-indent: 2em;";>C. 伪类选择器的权重小于ID选择器的权重 </p><p style="text-indent: 2em;";>D. 伪类选择器的权重小于其它所有选择器的权重 </p><p style="text-indent: 2em;";>3. 一个元素上下内边距都是20px，左右内边距都是10px，下列定义正确的是：（ ）。 AC </p><p style="text-indent: 2em;";>A. padding: 20px 10px 20px 10px B. padding: 10px 20px 10px </p><p style="text-indent: 2em;";>C. padding: 20px 10px 20px D. padding: 10px 10px 20px 20px </p><p style="text-indent: 2em;";>4. 以下关于内容溢出说法正确的是: （ ）。BC </p><p style="text-indent: 2em;";> A. 如果内容是文字，默认就是横向溢出 </p><p style="text-indent: 2em;";> B. 如果内容是文字，默认就是纵向溢出 </p><p style="text-indent: 2em;";> C．如果内容是图片，则默认纵向和横向都会溢出 </p><p style="text-indent: 2em;";> D．如果内容是图片，则默认不会溢出 </p><p style="text-indent: 2em;";> A. hidden B. visible C. scroll D. auto </p><p style="text-indent: 2em;";>6 仅显示元素的左边框，以下css属性正确的是:（ ）。BD </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>A. border-left-style: 2px </p><p style="text-indent: 2em;";> B. border-left-style: solid </p><p style="text-indent: 2em;";>C. border-left: 2px </p><p style="text-indent: 2em;";> D. border-left: solid </p><p style="text-indent: 2em;";>10 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>5. 以下可以隐藏内容溢出部分的overflow属性的值是：（ ）。ACD </p><p style="text-indent: 2em;";>7. 上外边距溢出，有以下几种预防方法：（ ）。ABCD </p><p style="text-indent: 2em;";> A.为父元素增加上边框 </p><p style="text-indent: 2em;";> B. 为父元素设置上内边距； </p><p style="text-indent: 2em;";> C. 在父元素的第一个子元素位置处，增加空<table></table>标记。 </p><p style="text-indent: 2em;";> D. 设置父元素的overflow:hidden </p><p style="text-indent: 2em;";>配伍题 </p><p style="text-indent: 2em;";>1. </p><p style="text-indent: 2em;";>请为选择器①⑤选择右侧最合适的解释，将配对好的ae填写到括号中。 </p><p style="text-indent: 2em;";>① </p><p style="text-indent: 2em;";>ul> </p><p style="text-indent: 2em;";>② </p><p style="text-indent: 2em;";>ul </p><p style="text-indent: 2em;";>③ </p><p style="text-indent: 2em;";>ulli>.active </p><p style="text-indent: 2em;";>④ </p><p style="text-indent: 2em;";>ul li .active </p><p style="text-indent: 2em;";>⑤ </p><p style="text-indent: 2em;";>ul>li,.active </p><p style="text-indent: 2em;";>[参考答案] </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>a ul元素下的所有后代li的直接子元素中class为active的元素 </p><p style="text-indent: 2em;";>b ul元素下的直接子元素中class为active的li </p><p style="text-indent: 2em;";>c ul元素下的所有后代元素中class为active的li </p><p style="text-indent: 2em;";>d ul元素下的直接子元素li以及其他任意class为active的元素 </p><p style="text-indent: 2em;";>e ul元素下的所有后代li的所有后代中class为active的元素 </p><p style="text-indent: 2em;";>请填写：①： ②： ③： ④： ⑤： </p><p style="text-indent: 2em;";>① </p><p style="text-indent: 2em;";>：b②：c③：a④：e⑤：d </p><p style="text-indent: 2em;";>编程题 </p><p style="text-indent: 2em;";>1. 从答案选项中选择正确的代码，将其对应的字母填写在空白的步骤中，从而把步骤补充完整： </p><p style="text-indent: 2em;";>如下图所示需求设计图：外层一个section元素，包裹着内层四个span元素。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>请在下列CSS中补充选择器和css属性： </p><p style="text-indent: 2em;";><style> </p><p style="text-indent: 2em;";>section{ ___①__ } </p><p style="text-indent: 2em;";>section span{ ___②____; ___③___; } </p><p style="text-indent: 2em;";> section __④__{ width:223px; } </p><p style="text-indent: 2em;";></style> </p><p style="text-indent: 2em;";>[答案选项] </p><p style="text-indent: 2em;";>a．box-sizing: box; padding:10px 0; </p><p style="text-indent: 2em;";>b．padding:10px 0; </p><p style="text-indent: 2em;";>c．width:1000px; margin:0 auto; padding:0 15px; margin-top:35px; </p><p style="text-indent: 2em;";>d．box-sizing: border-box; </p><p style="text-indent: 2em;";>e．width:1000px; margin: auto; padding: 15px; margin:35px; </p><p style="text-indent: 2em;";>11 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>f. padding:0 10px; </p><p style="text-indent: 2em;";>g．span>img </p><p style="text-indent: 2em;";>i. span,img </p><p style="text-indent: 2em;";>请填写：①： ②： ③： ④： </p><p style="text-indent: 2em;";>[参考答案] ①：c ②：d ③：f ④：g </p><p style="text-indent: 2em;";>第5章 CSS3高级特性 </p><p style="text-indent: 2em;";>判断题 </p><p style="text-indent: 2em;";>1. 块级元素默认都是从上到下排列的，且每个块元素独占一行。（） </p><p style="text-indent: 2em;";>2. 行内块元素默认都是从上到下排列的，且每个行内块元素独占一行。（ ）× </p><p style="text-indent: 2em;";>3. 行内元素默认按照从左往右的方式排列，而行内块（inline-block）默认从上到下排列。（）× </p><p style="text-indent: 2em;";>4. 因为每个元素都拥有自己的空间，所以一个元素不可能盖住另一个元素。（）× </p><p style="text-indent: 2em;";>5. 即使行内元素浮动后，也允许修改width和height属性。（） </p><p style="text-indent: 2em;";>6. 元素一旦设置浮动定位属性，就脱离普通文档流定位方式，不占用普通文档流中的页面空间。（） </p><p style="text-indent: 2em;";>7. 如果包含框太窄，无法容纳水平排列的3个浮动元素，那么最后放不下的块会被挤压到下一行，并始终浮动到下一行的开头。（）x </p><p style="text-indent: 2em;";>8. 元素一旦浮动后，都会变为行内块级元素，也允许修改大小尺寸。（ ）× </p><p style="text-indent: 2em;";>9. 如内部浮动元素，高于外部容器元素，则内部浮动元素超出外部元素范围的部分自动隐藏。（ ）× </p><p style="text-indent: 2em;";>10. 用opacity设置透明度，仅影响所在元素，不影响子元素。（）× </p><p style="text-indent: 2em;";>11. dispaly:none 不会让元素脱离文档流，虽然看不见，但依然占用空间。（ ）× </p><p style="text-indent: 2em;";>12. visibility:hidden不让元素脱离文档流，虽然看不见，但依然占用空间。（ ） </p><p style="text-indent: 2em;";>13. rgba只作用于某个属性，如背景颜色等。( ) </p><p style="text-indent: 2em;";>14. pointer属性可设置鼠标的光标。当鼠标悬停在元素上时，可改变鼠标光标的显示样式。( ) × </p><p style="text-indent: 2em;";>15. 修改列表项标识为图片，可使用: list-image:url(图片路径)属性 （ ）× </p><p style="text-indent: 2em;";>16. list-style:none和list-style-type:none均可清除列表项标识。（ ） </p><p style="text-indent: 2em;";>17. relative（相对定位）可让元素脱离默认文档流，相对于其所在父元素左上角自由定位。（）× </p><p style="text-indent: 2em;";>18. 相对定位是让元素相对于它在默认文档流中的原始位置偏移一段距离，经常用于对元素位置做微调时使用。（ ） </p><p style="text-indent: 2em;";>19. 绝对定位的元素默认总是相对于其所在直接父级元素左上角定位。（ ）× </p><p style="text-indent: 2em;";>20. 相对定位的元素，虽然位置偏离了原位置，但默认文档流中的原位置不释放。（ ） </p><p style="text-indent: 2em;";>21. 修改父元素的z-index属性值>子元素的z-index属性值可让父元素盖住子元素。（ ）× </p><p style="text-indent: 2em;";>22. 未使用定位属性的元素不能使用z-index元素。（ ） </p><p style="text-indent: 2em;";>23. :first-child元素只能匹配一个元素。（ ）× </p><p style="text-indent: 2em;";>12 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>24. input+span 只能匹配一个元素。（ ）× </p><p style="text-indent: 2em;";>25. :target用于匹配当前点击的a元素。（ ）× </p><p style="text-indent: 2em;";>26. div:not([title=test])也会匹配那些不包含title属性的div元素。（ ） </p><p style="text-indent: 2em;";>27. 元素可设置的属性，伪元素也可设置。元素具有的特征，伪元素也同样具备。（ ） </p><p style="text-indent: 2em;";>28. 使用弹性布局，要先使父容器变为flex容器——display:flex或display:inline-flex。（ ） </p><p style="text-indent: 2em;";>29. 默认情况下，如果主轴放不下所有项目时，项目会超出容器横向溢出。（ ）× </p><p style="text-indent: 2em;";>30. 弹性布局中，项目的flex-order属性用于定义项目的排列顺序。（ ）× </p><p style="text-indent: 2em;";>31. order属性，用于定义项目的排列顺序。其值为整数数字，无须单位。（ ） </p><p style="text-indent: 2em;";>单选题 </p><p style="text-indent: 2em;";>1. 先后顺序定义三个div: div1,div2,div3。div2向左浮动，div1和div3向右浮动，结果从左向右三个div的顺序依次是（ ）。C </p><p style="text-indent: 2em;";>A.d1 d2 d3 B. d2 d1 d3 C. d2 d3 d1 D. d1 d3 d2 </p><p style="text-indent: 2em;";>2. CSS提供了（ ）属性用于设置元素浮动定位：B </p><p style="text-indent: 2em;";>ow B. float C. floor D. fixed </p><p style="text-indent: 2em;";>3. 以下不属于float属性值的是：（ ）.D </p><p style="text-indent: 2em;";> B. right C. none D. center </p><p style="text-indent: 2em;";>4. 清除前面元素浮动对当前元素的影响，可设置（ ）属性。B </p><p style="text-indent: 2em;";>y: clear B. clear: both C. float: both D. both: clear </p><p style="text-indent: 2em;";>5. 下列选项中，可让图片左右文字与图片垂直居中对齐的css属性是（ ）。B </p><p style="text-indent: 2em;";>-align:center B. vertical-align:middle </p><p style="text-indent: 2em;";>C. text-valign:center D. vertical-align:baseline </p><p style="text-indent: 2em;";>6. 下列设置鼠标悬停时光标变为手指的属性是（ ）。D </p><p style="text-indent: 2em;";>: move B. cursor: wait C. cursor: text D. cursor: pointer </p><p style="text-indent: 2em;";>7. 如果包含框太窄，无法容纳水平排列的3个浮动元素，那么最后放不下的块会：（ ）.A </p><p style="text-indent: 2em;";>A.被挤压到下一行 B.默认隐藏 C.横向溢出 D.始终换行到下一行的开头 </p><p style="text-indent: 2em;";>8. 元素一旦浮动后，都会变为：（ ）.B </p><p style="text-indent: 2em;";>A.行内元素 B.块元素 C. 行内块元素 D.浮动元素 </p><p style="text-indent: 2em;";>9. 一下不属于clear属性值的是:（ ）.D </p><p style="text-indent: 2em;";> B. right C. both D. none </p><p style="text-indent: 2em;";>10. 下列选项中，可让元素独占一行的属性为（ ）。D </p><p style="text-indent: 2em;";>y:none B. display: inline-block C. display: inline D. display:block </p><p style="text-indent: 2em;";>11. 下列关于vertical-align属性描述正确的是:（ ）。B </p><p style="text-indent: 2em;";>A.可设置表格元素的内容在水平方向上的对齐方式 </p><p style="text-indent: 2em;";>B.可设置img元素左右两侧的文本在垂直方向的对齐方式 </p><p style="text-indent: 2em;";>C.可设置img元素在其父元素内水平方向的对齐方式 </p><p style="text-indent: 2em;";>D.可设置div元素的内容在垂直方向的对齐方式 </p><p style="text-indent: 2em;";>12. 以下不能实现隐藏元素的是:（ ）。A </p><p style="text-indent: 2em;";>13 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>A. overflow: hidden B. opacity:0 C. display:none D. visibility:hidden </p><p style="text-indent: 2em;";>13. 下列清除列表项标志的属性设置正确的是（ ）。B </p><p style="text-indent: 2em;";>A. </p><p style="text-indent: 2em;";>list-type:none B. list-style-type:none C. list-type-style: none D. list:none </p><p style="text-indent: 2em;";>14. 以下不属于list-style-type属性值的是:（ ）。D </p><p style="text-indent: 2em;";>A. none B. circle C. disc D. sqrt </p><p style="text-indent: 2em;";>15. 将列表项标识改为图片的属性是:（ ）。C </p><p style="text-indent: 2em;";>A. list-style-type B. list-image C. list-style-image D. list-type </p><p style="text-indent: 2em;";>16. 希望能自由修改元素的位置，但又不希望默认文档流中原始位置被释放，应选择（ ）。B </p><p style="text-indent: 2em;";>A. position:absolute B. position:relative C. position:fixed D. position:static </p><p style="text-indent: 2em;";>17. 以下关于元素定位描述错误的是：（ ）。D </p><p style="text-indent: 2em;";>A.绝对定位的元素相对于离它最近的已定位的祖先元素实现定位。 </p><p style="text-indent: 2em;";>B.如果当前元素的各级父元素中没有已定位的祖先元素，那么元素就相对于body定位。 </p><p style="text-indent: 2em;";>C.通常在设置绝对定位前，都要先找到要参照的祖先元素，并为祖先元素添加position属性。 </p><p style="text-indent: 2em;";>D.祖先元素的position属性只能设置为relative </p><p style="text-indent: 2em;";>18. 下列关于位移属性描述正确的是:（ ）。A </p><p style="text-indent: 2em;";>A． left:-20px 是让元素基于当前位置向左移动20px </p><p style="text-indent: 2em;";>B． left: 20px 是让元素基于当前位置向左移动20px </p><p style="text-indent: 2em;";>C． left: -20px 是让元素基于浏览器边框，向左移动20px </p><p style="text-indent: 2em;";>D． left: 20px 是让元素基于浏览器边框，向左移动20px </p><p style="text-indent: 2em;";>19. 三个相邻元素: <b></b><span></span><i></i>，希望选中<b>元素后的<i>元素，下列选择器正确的是（ ）。C </p><p style="text-indent: 2em;";>A. b,i{} B. b+i{} C. b~i{} D. b>i{} </p><p style="text-indent: 2em;";>20. 选择包含title属性且title属性值中包含“es”的div元素，下列选择器正确的是（ ）。B </p><p style="text-indent: 2em;";>A. </p><p style="text-indent: 2em;";>div[title=es] B. div[title*=es] C. div[title^=es] D. div[title$=es] </p><p style="text-indent: 2em;";>21. 选择title属性不等于”test”的div元素，下列选择器正确的是:（ ）。A </p><p style="text-indent: 2em;";>A. </p><p style="text-indent: 2em;";>div:not([title=test]) B. div[title!=test] C. div[title*=test] D. div[title$=test] </p><p style="text-indent: 2em;";>22. 希望单击一个a元素，控制另一个元素的样式变化，可使用以下哪种选择器:（ ）。B </p><p style="text-indent: 2em;";>A. :hover B. :target C. :active D. :link </p><p style="text-indent: 2em;";>23. 以下描述错误的是:（ ）。D </p><p style="text-indent: 2em;";>A. ::before，用于匹配某元素内容区域之前的位置 </p><p style="text-indent: 2em;";>B. :after，用于匹配某元素内容区域结尾的位置 </p><p style="text-indent: 2em;";>C. after，用于匹配某元素内容区域结尾的位置 </p><p style="text-indent: 2em;";>D. :before，用于匹配某元素与前一个元素之间的空白区域 </p><p style="text-indent: 2em;";>24. 下列在p元素开头添加“>>”符号的代码正确的是:（ ）。D </p><p style="text-indent: 2em;";>A．p::before{container: “>>”} B. p::before{ container: >>} </p><p style="text-indent: 2em;";>C. p::before{content: >>} D. p::before{ content: “>>”} </p><p style="text-indent: 2em;";>14 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>25. 防止外边距溢出最好的方法是:（ ）。A </p><p style="text-indent: 2em;";>A.父元素::before{ content:””; display:table; } </p><p style="text-indent: 2em;";>B. 父元素::before{ content:””; display:”table”} </p><p style="text-indent: 2em;";>C. 父元素::before{ container:””; display:table} </p><p style="text-indent: 2em;";>D. 父元素::before{container:””; display:”table”} </p><p style="text-indent: 2em;";>26. 下列对于flex-direction属性值描述正确的是:（ ）。B </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>A．值为row表示主轴x轴，起点在容器中心点 </p><p style="text-indent: 2em;";>B. 值为row-reverse表示主轴x轴，起点在右端 </p><p style="text-indent: 2em;";>C. 值为column表示主轴y轴，起点在底端 </p><p style="text-indent: 2em;";>D. 值为column表示主轴x轴，起点在最左端 </p><p style="text-indent: 2em;";>向。D </p><p style="text-indent: 2em;";> A. nowrap B. wrap-reverse C. reverse D. wrap </p><p style="text-indent: 2em;";>是:（ ）。C </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>A．flex: row wrap B. flex: wrap row </p><p style="text-indent: 2em;";>C. flex-flow: row wrap D. flex-flow: wrap row </p><p style="text-indent: 2em;";>A. flex-direction B. justify-content C. flex-flow D. flex-wrap </p><p style="text-indent: 2em;";>A． justify-content: space-around </p><p style="text-indent: 2em;";>B. flex-wrap: wrap </p><p style="text-indent: 2em;";>C. flex-direction: space-around </p><p style="text-indent: 2em;";>D. justify-content: column </p><p style="text-indent: 2em;";>31. 下列不属于align-self属性值的是:（ ）。C </p><p style="text-indent: 2em;";> -start B. flex-end C. flex-center D. baseline </p><p style="text-indent: 2em;";>A． HTML4.1 B. XHTML1.0 C. XHTML2.0 D. HTML5 </p><p style="text-indent: 2em;";>多选题 </p><p style="text-indent: 2em;";>1. 以下描述正确的是:（ ）。AB </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>A. 设置浮动定位属性的元素会脱离普通文档流，不占用普通文档流中的页面空间。 </p><p style="text-indent: 2em;";>B. 文档的普通流中的其他块，会上移填补浮动元素留下的空白位置。 </p><p style="text-indent: 2em;";>C. 元素浮动定位是相对于元素在普通文档流中的原位置设置位移的偏移量。 </p><p style="text-indent: 2em;";>D.浮动定位的元素在原文档流中的位置始终占用，不释放。 </p><p style="text-indent: 2em;";>A.该属性值可以是: left，用于清除当前元素前面元素的任意浮动带来的影响； </p><p style="text-indent: 2em;";>B．该属性值可以是: left，用于清除当前元素前面元素的左浮动带来的影响； </p><p style="text-indent: 2em;";>15 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>27. 如果主轴放不下所有项目时，可设置flex-wrap属性值为（ ）来实现换行显示，但不改变主轴方28. 下列代码可以定义flex容器x为主轴，从左向右排列，且如果放不下就换行继续从左向右排列的29. 设置项目在主轴上的对齐方式，可设置以下哪个属性:（ ）。B </p><p style="text-indent: 2em;";>30. 实现每个项目两端间距相同可设置以下哪个属性:（ ）。A </p><p style="text-indent: 2em;";>32. 文档类型声明: <!DOCTYPE html>说明当前网页使用的是（）标准。D </p><p style="text-indent: 2em;";>2. 以下关于clear属性描述正确的是：（ ）。BD </p><p style="text-indent: 2em;";> C．该属性值可以是: right，用于清除当前元素后面的元素任意浮动带来的影响； </p><p style="text-indent: 2em;";>D．该属性值可以是: right，用于清除当前元素前面的元素右浮动带来的影响； </p><p style="text-indent: 2em;";>3. 清除浮动对父元素影响的方案有：（ ）。ACD </p><p style="text-indent: 2em;";>A. 给父元素设置固定的高度； </p><p style="text-indent: 2em;";> B. 设置父元素的float属性为hidden或auto； </p><p style="text-indent: 2em;";>C. 设置父元素也浮动； </p><p style="text-indent: 2em;";>D. 在父元素内的结尾追加一个空子元素（块级元素），并设置空子元素清除浮动影响（clear:both）。 </p><p style="text-indent: 2em;";>4. 默认可在一行中水平排列的元素有:（ ）。AC </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>A. 行内元素 B.块元素 C.行内块元素 D. 标题元素 </p><p style="text-indent: 2em;";>A. 值是1~100之间的任意一个整数 </p><p style="text-indent: 2em;";>B. 数值越大，越不透明；数值越小，越透明。 </p><p style="text-indent: 2em;";>C. opacity可用于将整个元素的所有属性及其子内容全部设置透明度。 </p><p style="text-indent: 2em;";>D. 值是0~1之间的任意一个小数 </p><p style="text-indent: 2em;";>A. table B. div C. p D. img </p><p style="text-indent: 2em;";>A．固定定位的元素，以文档显示区左上角作为参照 </p><p style="text-indent: 2em;";> B．固定定位的元素，以body左上角作为参照 </p><p style="text-indent: 2em;";>C． 固定定位的元素位置在网页滚动时，跟随滚动，始终保持与body左上角的相对位置不变。 </p><p style="text-indent: 2em;";>D． 固定定位的元素位置不会随着滚动条的滚动而发生改变。 </p><p style="text-indent: 2em;";>8. 下列关于位移属性描述正确的是:（ ）。ABC </p><p style="text-indent: 2em;";>A． top: -20px 是让元素基于当前位置向上移动20px </p><p style="text-indent: 2em;";>B． top: 20px 是让元素基于当前位置向下移动20px </p><p style="text-indent: 2em;";>C． bottom: -20px 是让元素基于当前位置向下移动20px </p><p style="text-indent: 2em;";>D．bottom: 20px 是让元素基于当前位置向下移动20px </p><p style="text-indent: 2em;";>9. 下列关于z-index属性描述正确的是:（ ）。BD </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>A．z-index属性用于设置上下两层元素之间的距离，值为数字，且必须加上长度范围 </p><p style="text-indent: 2em;";>B. z-index属性用于改变元素的堆叠顺序，其值为一个数字，无须加单位。 </p><p style="text-indent: 2em;";>C. 数字越小，越靠上层。 </p><p style="text-indent: 2em;";>D. 数字越大，越靠上层。 </p><p style="text-indent: 2em;";> A．li>li B. li+li C. li~li D. li li </p><p style="text-indent: 2em;";>11．以下选择器中可匹配table中tbody下的偶数行的有:（ ）。AD </p><p style="text-indent: 2em;";> A．table>tbody>tr:nth-child(even) B. table>tbody>tr:nth-child(odd) </p><p style="text-indent: 2em;";>C. table>tbody>tr:nth-child(2n+1) D. table>tbody>tr:nth-child(2n) </p><p style="text-indent: 2em;";>12. 匹配元素内容中的首字母，可使用以下哪些选择器:（ ）。BC </p><p style="text-indent: 2em;";>16 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>5. 下列对于opacity属性描述正确的是:（ ）。BCD </p><p style="text-indent: 2em;";>6. 下列可使用vertical-align属性设置垂直方向对齐方式的有: （ ）。AD </p><p style="text-indent: 2em;";>7. 下列关于固定定位描述正确的是:（ ）。AD </p><p style="text-indent: 2em;";>10. 已知连续四个<li>元素，下列选择器中可选择后三个li的是：（ ）。BC </p><p style="text-indent: 2em;";> A.::first-line B. ::first-letter C. :first-letter D. :first-line </p><p style="text-indent: 2em;";>13. 下列可以清除浮动对父元素带来的影响的代码是:（ ）。CD </p><p style="text-indent: 2em;";> A. 父元素::before{ content:””; display:”table”} </p><p style="text-indent: 2em;";> B.父元素{clear:both} </p><p style="text-indent: 2em;";>C. 父元素{ overflow:hidden } </p><p style="text-indent: 2em;";>D. 父元素:after{display:block; content:””; clear:both; } </p><p style="text-indent: 2em;";>14. 下列关于弹性布局中项目的属性，描述正确的是:（ ）。BC </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>A．项目的flex-order属性用于定义项目的排列顺序 </p><p style="text-indent: 2em;";>B. 项目的flex-grow属性用于定义项目的放大比例 </p><p style="text-indent: 2em;";>C.项目的flex-shrink属性用于定义项目的缩小比例 </p><p style="text-indent: 2em;";>D. 项目的align属性用于单独定义某一个项目在主轴上的对齐方式。 </p><p style="text-indent: 2em;";>-start表示让项目以主轴的起点方向对齐； </p><p style="text-indent: 2em;";>B. flex-end表示让项目以主轴的终点方向对齐； </p><p style="text-indent: 2em;";>C．baseline表示让项目以交叉轴的基线对齐； </p><p style="text-indent: 2em;";>D. stretch表示如果项目未设置尺寸就让项目在交叉轴上占满所有空间。 </p><p style="text-indent: 2em;";>15. 关于align-items属性的值，下列描述正确的是:（ ）。CD </p><p style="text-indent: 2em;";>配伍题 </p><p style="text-indent: 2em;";>1. </p><p style="text-indent: 2em;";>请为定位方式①⑤选择右侧最合适的解释，将配对好的ae填写到括号中。 </p><p style="text-indent: 2em;";>① </p><p style="text-indent: 2em;";>position:absolue </p><p style="text-indent: 2em;";>② </p><p style="text-indent: 2em;";>position:relative </p><p style="text-indent: 2em;";>③ </p><p style="text-indent: 2em;";>position:fixed </p><p style="text-indent: 2em;";>④ </p><p style="text-indent: 2em;";>float:left </p><p style="text-indent: 2em;";>⑤ </p><p style="text-indent: 2em;";>flex </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>a 希望让块元素也能在一行中左右排列 </p><p style="text-indent: 2em;";>b 将元素固定在文档显示区中的某个位置。 </p><p style="text-indent: 2em;";>c </p><p style="text-indent: 2em;";>让元素相对于它在默认文档流中的原始位置偏移一段距离，经常用于对元素位置做微调时使用。 </p><p style="text-indent: 2em;";>通过相对于离它最近的已定位（同样设置了position属性）的祖先元素实现定位。 </p><p style="text-indent: 2em;";>d 定义父元素中子元素的布局方式。 </p><p style="text-indent: 2em;";>e </p><p style="text-indent: 2em;";>请填写：①： ②： ③： ④： ⑤： </p><p style="text-indent: 2em;";>[参考答案] </p><p style="text-indent: 2em;";>① </p><p style="text-indent: 2em;";>：e ②：c ③：b ④：e ⑤：d </p><p style="text-indent: 2em;";>编程题 </p><p style="text-indent: 2em;";>1. 从答案选项中选择正确的代码，将其对应的字母填写在空白的步骤中，从而把步骤补充完整： </p><p style="text-indent: 2em;";>定义登录对话框，使其显示在文档显示区中心，且不随页面滚动而滚动。已知登录对话框宽310px，高380px。 </p><p style="text-indent: 2em;";>请在下列CSS中补充选择器和css属性： </p><p style="text-indent: 2em;";><style> </p><p style="text-indent: 2em;";>#loginform{ </p><p style="text-indent: 2em;";> width:310px; height:380px; </p><p style="text-indent: 2em;";>17 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>____①____ </p><p style="text-indent: 2em;";>____②____ </p><p style="text-indent: 2em;";> margin-top: ____③___; </p><p style="text-indent: 2em;";>margin-left: ____④____; </p><p style="text-indent: 2em;";> } </p><p style="text-indent: 2em;";></style> </p><p style="text-indent: 2em;";>[答案选项] </p><p style="text-indent: 2em;";>a．-190px </p><p style="text-indent: 2em;";>b．top:50%; left:50%; </p><p style="text-indent: 2em;";>c．position: absolute; </p><p style="text-indent: 2em;";>d．-155px </p><p style="text-indent: 2em;";>e．position: fixed; </p><p style="text-indent: 2em;";>f. top:190px; left:155px; </p><p style="text-indent: 2em;";>g. 190px; </p><p style="text-indent: 2em;";> h. 155px; </p><p style="text-indent: 2em;";>请填写：①： ②： ③： ④： </p><p style="text-indent: 2em;";>[参考答案] ①：e ②：b ③：a ④：d </p><p style="text-indent: 2em;";>第6章 CSS3渐变、过渡与动画 </p><p style="text-indent: 2em;";>判断题 </p><p style="text-indent: 2em;";>1. 设置元素的background-image属性，取值为一个linear-gradient()命令，可实现线性渐变。（ ） </p><p style="text-indent: 2em;";>2. 设置元素的linear-gradient属性，可实现线性渐变。（ ）× </p><p style="text-indent: 2em;";>3. 设置元素的background-image属性，取值为一个radial-gradient()命令，可实现径向渐变。（ ） </p><p style="text-indent: 2em;";>4. 设置元素的radial-gradient属性，可实现径向渐变。（ ）× </p><p style="text-indent: 2em;";>5. 设置元素的background-image属性，取值为一个repeating-linear-gradient()命令，可实现重复渐变。（） </p><p style="text-indent: 2em;";>6. 设置元素的repeating-linear-gradient属性，可实现重复渐变。（ ）× </p><p style="text-indent: 2em;";>7. 2D旋转时，默认的转换原点为元素左上角(0,0)位置。（ ）。× </p><p style="text-indent: 2em;";>8. 转换原点是指在转换过程中，距离旋转圆心最远的一点。（ ）。× </p><p style="text-indent: 2em;";>9. 视距越小，3D转换的幅度越明显；视距越大，3D转换的幅度越不明显。（ ）。 </p><p style="text-indent: 2em;";>10. 修改要执行3D变换的元素本身的perspective属性，可调整视距。（ ）。× </p><p style="text-indent: 2em;";>11. 定义元素的transform属性时执行translate()函数，可让元素发生位移。（ ） </p><p style="text-indent: 2em;";>12. 定义元素的transform属性时执行scale()函数，可让元素发生缩放。（ ） </p><p style="text-indent: 2em;";>13. 定义元素的scale属性，可让元素发生缩放。（ ）× </p><p style="text-indent: 2em;";>14. scale(value)中，缩放比例value的默认值为0，表示不缩放。若value>0，表示放大；若value<0，18 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>表示缩小。（ ）× </p><p style="text-indent: 2em;";>15. 定义元素的transform属性时执行rotate()函数，可让元素发生旋转。（ ） </p><p style="text-indent: 2em;";>16. 定义元素的rotate属性，可让元素发生旋转。（ ）× </p><p style="text-indent: 2em;";>17. rotate(ndeg)中，若n为正，顺时针旋转；若n为负，逆时针旋转。（ ） </p><p style="text-indent: 2em;";>18. 设置过渡速度变化曲线为:easy-in，表示慢速开始，加速结束。（ ）× </p><p style="text-indent: 2em;";>19. 设置过渡速度变化曲线为: ease-out, 表示慢速开始，加速结束。（ ）× </p><p style="text-indent: 2em;";>20. 过渡速度变化曲线的默认值为:ease，表示从慢速开始，快速变快，最后慢速结束。（） </p><p style="text-indent: 2em;";>21. @keyframes定义的动画会在页面加载时，自动执行，无需调用。（ ）× </p><p style="text-indent: 2em;";>单选题 </p><p style="text-indent: 2em;";>1. 以下关键字组合中，等效于设置线性渐变角度为45°的是（ ）。B </p><p style="text-indent: 2em;";> top left B. to top right C. to left D. to right </p><p style="text-indent: 2em;";>2. 以下关于线性渐变描述正确的是:（ ）。C </p><p style="text-indent: 2em;";>A.线性渐变就是延水平方向填充渐变色 </p><p style="text-indent: 2em;";>B.线性渐变就是延垂直方向填充渐变色 </p><p style="text-indent: 2em;";>C.线性渐变就是以直线的方向来填充渐变色 </p><p style="text-indent: 2em;";>D.线性渐变就是以圆心为中心，延半径向外渐变 </p><p style="text-indent: 2em;";>3. 设置按钮背景色自上向下渐变，从顶部白色渐变到底部银色，下列写法正确的是（ ）。A </p><p style="text-indent: 2em;";>ound-image: linear-gradient(to bottom, #f0f0f0 0%, #e0e0e0 100%); </p><p style="text-indent: 2em;";>ound-image: linear-gradient(to bottom, 0% #f0f0f0, 100% #e0e0e0); </p><p style="text-indent: 2em;";>ound-image: linear-gradient(to bottom, 0%, #f0f0f0, 100%, #e0e0e0); </p><p style="text-indent: 2em;";>ound-image: linear-gradient(to bottom, #f0f0f0, 0%, #e0e0e0, 100%); </p><p style="text-indent: 2em;";>4. 添加-webkit-前缀不可解决（ ）浏览器的css属性兼容性问题。D </p><p style="text-indent: 2em;";>A.新版opera B. Chrome C. Safari D. Firefox </p><p style="text-indent: 2em;";>5. 解决Firefox浏览器的css属性兼容性问题，可添加（ ）前缀。 B </p><p style="text-indent: 2em;";>A.-webkit- B. -moz- C. -o- D. -ms- </p><p style="text-indent: 2em;";>6. 宽100 px的div元素，修改转换原点为右上角，下列属性设置正确的是（ ）。A </p><p style="text-indent: 2em;";>orm-origin: 100% 0 B. transform-origin: 0 100%; </p><p style="text-indent: 2em;";>C. transform-origin: 0 100px D. transform-origin: left top; </p><p style="text-indent: 2em;";>7. 默认的转换原点是：（ ）。D </p><p style="text-indent: 2em;";>A.元素的左上角 B.元素的右上角 C.元素的顶部中心点 D.元素图形的中心点 </p><p style="text-indent: 2em;";>8. 下列属性中，不能将元素右移100 px的设置是（ ）。B </p><p style="text-indent: 2em;";>orm: translateX(100px) B. translateX : 100px </p><p style="text-indent: 2em;";>C. transform: translate(100px) D. margin-left:100px </p><p style="text-indent: 2em;";>9. 下列属性中，可将元素顺时针旋转45°的是（ ）。C </p><p style="text-indent: 2em;";>orm: rotate(45) B. transform: rotate(-45) </p><p style="text-indent: 2em;";>C. transform: rotate(-315deg) D. transform:rotate(-45deg) </p><p style="text-indent: 2em;";>10. 设置元素的transform属性和box-shadow属性，在2 s内过渡变化，正确的是（ ）。A </p><p style="text-indent: 2em;";>19 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>A. transition-property: transform box-shadow; transition-duration: 2s; </p><p style="text-indent: 2em;";>B. transition-property: transform,box-shadow; transition-duration: 2s; </p><p style="text-indent: 2em;";>C. transition-property: transform 2s box-shadow 2s; </p><p style="text-indent: 2em;";>D. transition-property: transform box-shadow 2s; </p><p style="text-indent: 2em;";>11. 希望修改某个CSS属性值时平缓变化，可使用CSS的（ ）属性。D </p><p style="text-indent: 2em;";>A. transform-propertyB. translate-property C. transform-float D. transition-property </p><p style="text-indent: 2em;";>12. 可使用（ ）属性设置过渡变化的时间。B </p><p style="text-indent: 2em;";>A. transition B. transition-duration C. duration D. transform-duration </p><p style="text-indent: 2em;";>13. 下列选项中，设置元素所有属性在2 s内匀速过渡变化正确的是（ ）。C </p><p style="text-indent: 2em;";>A. transition: 2s linear all B. transition: linear 2s all </p><p style="text-indent: 2em;";>C. transition: all 2s linear D. transition: all linear 2s </p><p style="text-indent: 2em;";>14. 定义复杂动画，实现一个div顺时针旋转一周，正确的是（ ）。B </p><p style="text-indent: 2em;";>A. @keyframe myRotate{ </p><p style="text-indent: 2em;";>0%{ transform: rotate(0deg) }, </p><p style="text-indent: 2em;";>100%{ transform: rotate(360deg) } </p><p style="text-indent: 2em;";>} </p><p style="text-indent: 2em;";>B. @keyframes myRotate{ </p><p style="text-indent: 2em;";>0%{ transform: rotate(0deg) } </p><p style="text-indent: 2em;";>100%{ transform: rotate(360deg) } </p><p style="text-indent: 2em;";>} </p><p style="text-indent: 2em;";>C. @keyframes myRotate( </p><p style="text-indent: 2em;";>0%{ transform: rotate(0deg) } </p><p style="text-indent: 2em;";>100%{ transform: rotate(360deg) } </p><p style="text-indent: 2em;";>) </p><p style="text-indent: 2em;";>D. @keyframe myRotate( </p><p style="text-indent: 2em;";>0%{ transform: rotate(0deg) }, </p><p style="text-indent: 2em;";>100%{ transform: rotate(360deg) } </p><p style="text-indent: 2em;";>) </p><p style="text-indent: 2em;";>15. 下列调用动画执行的语句正确的是（ ）。D </p><p style="text-indent: 2em;";>A. animation: linear ball 5s infinite alternate; </p><p style="text-indent: 2em;";>B. animation:ball linear infinite alternate; </p><p style="text-indent: 2em;";>C. animation: linear 5s linear infinite alternate; </p><p style="text-indent: 2em;";>D. animation:ball 5s linear infinite; </p><p style="text-indent: 2em;";>16. 可设置动画暂停的css属性为:（ ）。A </p><p style="text-indent: 2em;";>ion-play-state B. animat-play-state C. animat-play D. animation-state </p><p style="text-indent: 2em;";>多选题 </p><p style="text-indent: 2em;";>1. 下列属于渐变分类的是:（ ）。ABC </p><p style="text-indent: 2em;";>20 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> A. 线性渐变 B.径向渐变 C. 重复渐变 D. 水平渐变 </p><p style="text-indent: 2em;";>2. 以下设置渐变角度的语法正确的是:（ ）。AD </p><p style="text-indent: 2em;";> A. to top B. top C. 60° D. 60deg </p><p style="text-indent: 2em;";>3. 下列哪些值可作为转换原点位置的值：（ ）。BD </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>A. 0px B. 0 C. 60deg D. left </p><p style="text-indent: 2em;";>A. translate(x) B. transform(x) C. translateX(x) D. transformX(x) </p><p style="text-indent: 2em;";>A. scale(value) B. scale(x,y) C. scaleX(x)和scaleY(y) D. scale必须等比例缩放 </p><p style="text-indent: 2em;";>A.视距越远，元素在显示器投影平面上的像越小。 </p><p style="text-indent: 2em;";>B. 视距越远，元素在显示器投影平面上的像越大 </p><p style="text-indent: 2em;";>C.如果希望三维转换越明显，应增大视距 </p><p style="text-indent: 2em;";>D. 如果希望三维转换越明显，应缩小视距 </p><p style="text-indent: 2em;";>4. 下列可以设置元素在x轴上发生位移的函数是:（ ）。AC </p><p style="text-indent: 2em;";>5. 下列可分别设置元素在x轴和y轴两个方向上的缩放比例的是：（ ）。BC </p><p style="text-indent: 2em;";>6. 下列关于视距描述正确的是:（ ）。AD </p><p style="text-indent: 2em;";>7. 以下属性值中可用于设置过渡速度变化曲线的值有:（ ）。AB </p><p style="text-indent: 2em;";> A. linear B. ease-in C. eary-in D. easy-out </p><p style="text-indent: 2em;";>配伍题 </p><p style="text-indent: 2em;";>1. </p><p style="text-indent: 2em;";>请为下列属性①⑤选择右侧最合适的解释，将配对好的ae填写到括号中 </p><p style="text-indent: 2em;";>① </p><p style="text-indent: 2em;";>transform-origin </p><p style="text-indent: 2em;";>② </p><p style="text-indent: 2em;";>translate </p><p style="text-indent: 2em;";>③ </p><p style="text-indent: 2em;";>transform </p><p style="text-indent: 2em;";>④ </p><p style="text-indent: 2em;";>perspective </p><p style="text-indent: 2em;";>⑤ </p><p style="text-indent: 2em;";>transition </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>请填写： ①： ②： ③： ④： ⑤： </p><p style="text-indent: 2em;";>[参考答案] </p><p style="text-indent: 2em;";> a 模拟人的眼睛到3D转换元素之间的距离 </p><p style="text-indent: 2em;";>b 用于修改转换原点的位置 </p><p style="text-indent: 2em;";>c 可让元素发生位移 </p><p style="text-indent: 2em;";>d 定义父元素中子元素的布局方式。 </p><p style="text-indent: 2em;";>e 修改CSS属性值时平缓变化 </p><p style="text-indent: 2em;";>① </p><p style="text-indent: 2em;";>：b②：c③：e④：a⑤：e </p><p style="text-indent: 2em;";>编程题 </p><p style="text-indent: 2em;";>1. 从答案选项中选择正确的代码，将其对应的字母填写在空白的步骤中，从而把步骤补充完整 </p><p style="text-indent: 2em;";>在网页中定义一个名为ball的帧动画，并在某个元素的样式中启动动画播放 </p><p style="text-indent: 2em;";>代码如下： </p><p style="text-indent: 2em;";><html> </p><p style="text-indent: 2em;";><head> </p><p style="text-indent: 2em;";><style> </p><p style="text-indent: 2em;";>_____①______ { </p><p style="text-indent: 2em;";> 0%{/*动画第一帧的样式CSS属性*/} </p><p style="text-indent: 2em;";>21 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>} </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>… … </p><p style="text-indent: 2em;";>100%{ /*动画结束时的样式CSS属性*/ } </p><p style="text-indent: 2em;";>#ball{ </p><p style="text-indent: 2em;";> … ; /*其他css属性*/ </p><p style="text-indent: 2em;";> /*以下启动动画: */ </p><p style="text-indent: 2em;";> ___②___:___③___ __④____ 速度变化曲线延迟时间反复执行次数执行方向; </p><p style="text-indent: 2em;";>} </p><p style="text-indent: 2em;";></style> </p><p style="text-indent: 2em;";></head> </p><p style="text-indent: 2em;";><body> </p><p style="text-indent: 2em;";><div id=”ball”></div> </p><p style="text-indent: 2em;";></body> </p><p style="text-indent: 2em;";></html> </p><p style="text-indent: 2em;";>[答案选项] </p><p style="text-indent: 2em;";>a．animation </p><p style="text-indent: 2em;";>b．animate </p><p style="text-indent: 2em;";>c．@keyframe ball </p><p style="text-indent: 2em;";>d．@keyframes ball </p><p style="text-indent: 2em;";>e．5s </p><p style="text-indent: 2em;";>f．ball </p><p style="text-indent: 2em;";>请填写：①： ②： ③： ④： </p><p style="text-indent: 2em;";>[参考答案] ①：d ②：a ③：f ④：e </p><p style="text-indent: 2em;";>第7章 LESS </p><p style="text-indent: 2em;";>判断题 </p><p style="text-indent: 2em;";>1. 静态样式语言中虽然有变量，但是无法记性算术运算。（ ）× </p><p style="text-indent: 2em;";>2. 编译是指将浏览器不认识的Less语言代码转换为CSS语言代码的过程。（ ） </p><p style="text-indent: 2em;";>3. Less既支持多行注释，又支持单行注释，所有注释都会被编译到CSS中。（ ）× </p><p style="text-indent: 2em;";>4. @import在引入多个less文件时，会增加请求次数。（ ）× </p><p style="text-indent: 2em;";>5. 用@import引入另一个.less文件，执行过程同CSS中用@import引入另一个css文件原理完全相同。（ ）× </p><p style="text-indent: 2em;";>6. CSS中用@import引入另一个css文件，会增加请求次数。（ ） </p><p style="text-indent: 2em;";>单选题 </p><p style="text-indent: 2em;";>1. 下列引入并在客户端编译less的代码正确的是（ ）。B </p><p style="text-indent: 2em;";>22 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>A.<link rel="stylesheet" href="css/"> </p><p style="text-indent: 2em;";><script src="js/"></script> </p><p style="text-indent: 2em;";>B.<link rel="stylesheet/less" href="css/"> </p><p style="text-indent: 2em;";><script src="js/"></script> </p><p style="text-indent: 2em;";>C.<script src="js/"></script> </p><p style="text-indent: 2em;";><link rel="stylesheet/less" href="css/"> </p><p style="text-indent: 2em;";>D.<script src="js/"></script> </p><p style="text-indent: 2em;";><link rel="stylesheet" href="css/"> </p><p style="text-indent: 2em;";>2. 下列在less中定义变量的语法正确的是（ ）。C </p><p style="text-indent: 2em;";>:#e4393c; B. @red=#e4393c; C. @red:#e4393c; D. red=#e4393c; </p><p style="text-indent: 2em;";>3. 下列使用变量正确的是（ ）。A </p><p style="text-indent: 2em;";>ound-color:@red; B. background-color=red; </p><p style="text-indent: 2em;";>C. background-color=@red; D. background-color:red; </p><p style="text-indent: 2em;";>4. 公共类型.m-p-0，可帮元素设置margin和padding属性，但暂时不知道margin和padding的值，下列代码正确的是（ ）。D </p><p style="text-indent: 2em;";>A. .m-p-0(m,p){margin:m; padding:p } B. .m-p-0(m p){margin:m; padding:p} </p><p style="text-indent: 2em;";>C. .m-p-0(@m,@p){margin:m,padding:p} D. .m-p-0(@m,@p){margin:@m, padding:@p} </p><p style="text-indent: 2em;";>5. 下列混入时传入参数的代码正确的是（ ）。C </p><p style="text-indent: 2em;";>A.h1{ .m-p-0(10,10); … …} B. h1{ .m-p-0: 10 10; … …} </p><p style="text-indent: 2em;";>C. h1{ .m-p-0(10px,10px); … …} D. h1{ .m-p-0：(10px,10px); … …} </p><p style="text-indent: 2em;";>6. 在一个less文件中，引入另一个less文件，下列正确的是（ ）。A </p><p style="text-indent: 2em;";>A.@import " " B. @import url(" ") </p><p style="text-indent: 2em;";>C. !import " " D. import " " </p><p style="text-indent: 2em;";>多选题 </p><p style="text-indent: 2em;";>1. 以下属于动态样式语言具备而静态样式语言不具备的特征有:（ ）。AD </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>A. 变量 B. 否定伪类 C. 选择器 D. 运算 </p><p style="text-indent: 2em;";>A. 选择器分组 B.否定伪类 C.运算 D.属性选择器 </p><p style="text-indent: 2em;";>2. 不需要动态样式语言，静态样式语言已经具备的特征有:（ ）。A B D </p><p style="text-indent: 2em;";>3. 下列对于less提供的内置函数描述正确的是:（ ）。ABD </p><p style="text-indent: 2em;";> A. ceil(值)——取整 </p><p style="text-indent: 2em;";> B. lighten(颜色值,百分百)——把指定颜色变亮； </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>-width(宽度)——设置指定图片宽度 </p><p style="text-indent: 2em;";>-height(图片路径)——返回指定图片高度。 </p><p style="text-indent: 2em;";>编程题 </p><p style="text-indent: 2em;";>1. 从答案选项中选择正确的代码，将其对应的字母填写在空白的步骤中，从而把步骤补充完整 </p><p style="text-indent: 2em;";>定义文件，其中声明两个变量保存字体大小和颜色值 </p><p style="text-indent: 2em;";>23 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>再定义文件，其中引入中基础变量，并使用基础变量 </p><p style="text-indent: 2em;";>代码如下： </p><p style="text-indent: 2em;";>/*文件中:*/ </p><p style="text-indent: 2em;";>_①__:#e4393c; </p><p style="text-indent: 2em;";>_②__:12px; </p><p style="text-indent: 2em;";>/*文件中*/ </p><p style="text-indent: 2em;";>_③__; </p><p style="text-indent: 2em;";>h1{ </p><p style="text-indent: 2em;";> background-color: _①__;//使用变量 </p><p style="text-indent: 2em;";> color:#fff; </p><p style="text-indent: 2em;";> font-size: _④__ //将字体在标准字体基础上放大一倍 </p><p style="text-indent: 2em;";>} </p><p style="text-indent: 2em;";>[答案选项] </p><p style="text-indent: 2em;";>a. var red </p><p style="text-indent: 2em;";>b．@red </p><p style="text-indent: 2em;";>c．!important “” </p><p style="text-indent: 2em;";>d．@fontSize </p><p style="text-indent: 2em;";>e．$fontSize </p><p style="text-indent: 2em;";>f．@import “” </p><p style="text-indent: 2em;";>g. @fontSize*2 </p><p style="text-indent: 2em;";>j. font-size*2 </p><p style="text-indent: 2em;";>请填写：①： ②： ③： ④： </p><p style="text-indent: 2em;";>[参考答案] ①：b ②：d ③：f ④：g </p><p style="text-indent: 2em;";>第8章 Bootstrap响应式网页开发 </p><p style="text-indent: 2em;";>判断题 </p><p style="text-indent: 2em;";>1. 响应式网页是指，一个网页会根据用户浏览器设备不同而自动改变布局。（ ） </p><p style="text-indent: 2em;";>2. 响应式网页是指，一个网页中包含可与用户交互的功能的网页。（ ）× </p><p style="text-indent: 2em;";>3. 在任何情况下，视口大小总是等于设备宽。（ ）× </p><p style="text-indent: 2em;";>4. 视口的尺寸可以随意指定，且视口与显示设备的物理分辨率无关。（ ） </p><p style="text-indent: 2em;";>5. 视口在手机端和在PC端都默认始终通过缩小网页方式，全部显示网页内容。（ ）× </p><p style="text-indent: 2em;";>6. 物理设备宽比视口宽更能精准确定一个设备的种类。（ ） </p><p style="text-indent: 2em;";>7. 媒体查询，就是查询出当前浏览器的名称和版本号。（ ）× </p><p style="text-indent: 2em;";>8. 媒体查询，即可使用浏览器的视口大小作为判断条件，又可使用物理设备的窗口大小作为判断条件。（ ） </p><p style="text-indent: 2em;";>24 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>单选题 </p><p style="text-indent: 2em;";>1. 响应式网页划分显示设备的分类，依据的是:（ ）。B </p><p style="text-indent: 2em;";> A. 物理设备的大小 B.物理设备的显示分辨率大小 </p><p style="text-indent: 2em;";> C. 网页body的大小 D. 浏览器窗口大小 </p><p style="text-indent: 2em;";>2. 要求当前网页加载时，视口大小等于设备宽，且初始时不缩放，下列代码正确的是（ ）。D </p><p style="text-indent: 2em;";>A.<meta name="viewport" content="width=device-width, initial=noscale"> </p><p style="text-indent: 2em;";>B.<meta name="viewport" content="width:device-width; initial-scale:1.0"> </p><p style="text-indent: 2em;";>C.<meta name="viewport" content="width=device, initial-scale=1.0"> </p><p style="text-indent: 2em;";>D.<meta name="viewport" content="width=device-width, initial-scale=1.0"> </p><p style="text-indent: 2em;";>3. 根据媒体查询执行不同CSS文件，要求只有视口宽大于768 px时，才执行文件，下列代码正确的是（ ）。D </p><p style="text-indent: 2em;";>A.<link media="screen && (minWsidth:768px)" rel="stylesheet" href=" "/> </p><p style="text-indent: 2em;";>B.<link media="screen && (min-width>768px)" rel="stylesheet" href=" "/> </p><p style="text-indent: 2em;";>C.<link media="screen and (minWidth:768px)" rel="stylesheet" href=" "/> </p><p style="text-indent: 2em;";>D.<link media="screen and (min-width:768px)" rel="stylesheet" href=" "/> </p><p style="text-indent: 2em;";>4. 普通规则下，如果设备宽为767px，可认为其为（ ）设备。D </p><p style="text-indent: 2em;";>A．超大屏 B. PC C. PAD D. 手机 </p><p style="text-indent: 2em;";>5. PC设备显示器下，让class为box的元素背景为红色，下列代码正确的是（ ）。B </p><p style="text-indent: 2em;";>A.@media screen and (min-width: 992px){ background: red; } </p><p style="text-indent: 2em;";>B.@media screen and (min-width: 768px){ .box{background: red; } } </p><p style="text-indent: 2em;";>C.@media screen and (min-width: 992px){ .box{background: red; } } </p><p style="text-indent: 2em;";>{ @media screen and (min-width: 768px){ background: red; } } </p><p style="text-indent: 2em;";>6. 下列关于媒体查询说法正确的是：（ ）。A </p><p style="text-indent: 2em;";>-width：768px and max-width: 991px，表示浏览器视口宽≥768px而且≤991px，说明是平板电脑显示屏大小范围； </p><p style="text-indent: 2em;";>-width：768px && max-width: 991px，表示浏览器视口宽≥768px而且≤991px，说明是平板电脑显示屏大小范围； </p><p style="text-indent: 2em;";>-width：768px & max-width: 991px，表示浏览器视口宽≥768px而且≤991px，说明是平板电脑显示屏大小范围； </p><p style="text-indent: 2em;";>-width：768px max-width: 991px，表示浏览器视口宽≥768px而且≤991px， </p><p style="text-indent: 2em;";>说明是平板电脑显示屏大小范围； </p><p style="text-indent: 2em;";>7. 下列关于媒体查询说正确的是：（ ）。C </p><p style="text-indent: 2em;";>-device-width是用浏览器视口宽作为判断条件 </p><p style="text-indent: 2em;";>-width是用设备物理显示屏宽作为判断条件 </p><p style="text-indent: 2em;";>-device-width是用设备物理显示屏宽作为判断条件 </p><p style="text-indent: 2em;";>-width是用浏览器软件的窗口宽作为判断条件 </p><p style="text-indent: 2em;";>8. 一个元素在PC和PAD下，在行中占比为1/4，在手机下，在行中占比1/2,下列代码正确的是（ ）。25 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>D </p><p style="text-indent: 2em;";>A. <ANY class=”col-md-3 col-xs-6” </p><p style="text-indent: 2em;";>B. <ANY class=”col-md-3 col-sm-3 col-xl-6” </p><p style="text-indent: 2em;";>C. <ANY class=”col-md-3 col-sm-6” </p><p style="text-indent: 2em;";>D. <ANY class=”col-sm-3 col-xs-6” </p><p style="text-indent: 2em;";>9. 一个元素，在PC下，在行中占比为1/4，在PAD和手机下隐藏,下列代码正确的是（ ）。B </p><p style="text-indent: 2em;";>A. <ANY class=”col-pc-4 hidden-md ” </p><p style="text-indent: 2em;";>B. <ANY class=”col-pc-3 hidden-md” </p><p style="text-indent: 2em;";>C. <ANY class=”col-pc-3 hidden-sm” </p><p style="text-indent: 2em;";>D. <ANY class=”col-pc-4 hidden-sm” </p><p style="text-indent: 2em;";>多选题 </p><p style="text-indent: 2em;";>1. 流式布局主要使用: （ ）。BC </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>A．使用table显示网页的各个区域 B. 使用浮动定位显示网页的各个区域 </p><p style="text-indent: 2em;";>C.使用行内块显示网页的各个区域D. 使用块元素显示网页的各个区域 </p><p style="text-indent: 2em;";>A. 媒体查询，就是查询出当前浏览网页的设备的类型及特性，如屏幕尺寸。 </p><p style="text-indent: 2em;";>B. 媒体查询，就是查询出当前浏览器的名称和版本号。 </p><p style="text-indent: 2em;";>C. 媒体查询，就是根据浏览器的名称和版本号不同执行不同的CSS代码。 </p><p style="text-indent: 2em;";>D.媒体查询，就是根据设备和特性不同，选择执行不同的CSS代码。 </p><p style="text-indent: 2em;";>3. 以下设备分类的标准正确的是：（ ）。BC </p><p style="text-indent: 2em;";> A. 浏览器视口宽≤992 px，说明是PC显示器大小范围； </p><p style="text-indent: 2em;";>B．浏览器视口宽≥768px而且≤991px，说明是平板电脑显示屏大小范围； </p><p style="text-indent: 2em;";>C. 浏览器视口宽≤767px，说明是手机显示屏大小范围。 </p><p style="text-indent: 2em;";> D. 浏览器视口宽≥768px而且≤991px，说明是PC显示器大小范围； </p><p style="text-indent: 2em;";>配伍题 </p><p style="text-indent: 2em;";>2. 以下关于媒体查询的描述正确的是:（ ）。AD </p><p style="text-indent: 2em;";>1. </p><p style="text-indent: 2em;";>请为下列样式类①⑤选择右侧最合适的解释，将配对好的ae填写到括号中。 </p><p style="text-indent: 2em;";>① </p><p style="text-indent: 2em;";>col-md-6 </p><p style="text-indent: 2em;";>② </p><p style="text-indent: 2em;";>hidden-sm </p><p style="text-indent: 2em;";>③ </p><p style="text-indent: 2em;";>col-sm-3 </p><p style="text-indent: 2em;";>④ </p><p style="text-indent: 2em;";>col-xs-6 </p><p style="text-indent: 2em;";>⑤ </p><p style="text-indent: 2em;";>col-lg-2 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>请填写：①： ②： ③： ④： ⑤： </p><p style="text-indent: 2em;";>[参考答案] </p><p style="text-indent: 2em;";> a Pad屏幕中当前元素宽占容器宽度的1/4 </p><p style="text-indent: 2em;";>b 超大屏幕中当前元素宽占容器元素宽的1/6 </p><p style="text-indent: 2em;";>c PC机显示设备中当前元素宽占用容器总宽度的50% </p><p style="text-indent: 2em;";>d Pad和手机屏幕中当前元素隐藏 </p><p style="text-indent: 2em;";>e 手机屏幕中当前元素宽占容器元素宽的一半 </p><p style="text-indent: 2em;";>① </p><p style="text-indent: 2em;";>：c ②：d ③：a ④：e ⑤：b </p><p style="text-indent: 2em;";>26 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>第9章 Bootstrap常用组件 </p><p style="text-indent: 2em;";>判断题 </p><p style="text-indent: 2em;";>1. 响应式图片可让图片根据浏览设备的宽，响应式调整图片的大小。（ ） </p><p style="text-indent: 2em;";>2. 为元素添加text-responsive样式类，可让元素的内容文本以两端对齐。（ ）× </p><p style="text-indent: 2em;";>3. list-style-none样式类可去掉列表项前的标识符号。（ ）× </p><p style="text-indent: 2em;";>4. 响应式表单的样式类和栅格系统的样式类完全一样。（ ）× </p><p style="text-indent: 2em;";>5. 水平表单可定义栅格系统控制不同屏幕宽下表格的列宽。（ ） </p><p style="text-indent: 2em;";>6. Bootstrap所有组件，单靠引入就可执行。（ ） </p><p style="text-indent: 2em;";>7. 使用组件时，仅添加样式类，未添加data-*自定义扩展属性，则样式也无法正常显示。（ ）× </p><p style="text-indent: 2em;";>8. 凡是使用fixed属性固定定位在文档显示区中心位置的对话框，都是模态框。（ ）× </p><p style="text-indent: 2em;";>9. 模态框是指在一个父窗口中打开了一个子窗口，若子窗口不关闭，则父窗口无法获得输入焦点。（ ） </p><p style="text-indent: 2em;";>单选题 </p><p style="text-indent: 2em;";>1. 按钮尺寸样式类不包括: （ ）。B </p><p style="text-indent: 2em;";>A. btn-lg B. btn-md C. btn-sm D. btn-xs </p><p style="text-indent: 2em;";>2. 将按钮变为块级按钮，可使用: （ ）。 D </p><p style="text-indent: 2em;";>A.d-block B. display-block C. block D. btn-block </p><p style="text-indent: 2em;";>3. 将a变为黄色按钮，以下代码中正确的是（ ）。C </p><p style="text-indent: 2em;";>A.<a href=”javascript:;” class=”btn warning”; </p><p style="text-indent: 2em;";>B.<a href=”javascript:;” class=”btn-warning”; </p><p style="text-indent: 2em;";>C.<a href=”javascript:;” class=”btn btn-warning”; </p><p style="text-indent: 2em;";>D.<a href=”javascript:;” class=”.btn .btn-warning”; </p><p style="text-indent: 2em;";>4. 下列设置图片为响应式图片的代码，正确的是（ ）。B </p><p style="text-indent: 2em;";>A. </p><p style="text-indent: 2em;";>B. </p><p style="text-indent: 2em;";>C. </p><p style="text-indent: 2em;";>D. </p><p style="text-indent: 2em;";>5. Bootstrap的less源码中保存所有基础变量的less文件是（ ）。C </p><p style="text-indent: 2em;";> B. C. D. </p><p style="text-indent: 2em;";>6. Bootstrap中颜色类名*-default的颜色为：（ ）。A </p><p style="text-indent: 2em;";>A.白色 B.浅灰色 C.工业蓝 D.淡蓝色 </p><p style="text-indent: 2em;";>7. 下列不属于文本对齐方式的样式类是:（ ）。B </p><p style="text-indent: 2em;";>-left B. text-middle C. text-right D. text-justity </p><p style="text-indent: 2em;";>8. 为<img>元素添加响应式图片样式类，可使用:（ ）。D </p><p style="text-indent: 2em;";>-response B. img-flex C. img-block D. img-responsive </p><p style="text-indent: 2em;";>27 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>9. 下列关于文件描述正确的是:（ ）。B </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>A. 中包含bootstrap样式类库中的所有全局样式类的定义 </p><p style="text-indent: 2em;";>中不包含任何实际的样式类的定义 </p><p style="text-indent: 2em;";>C. 中通过!important引入其他less文件 </p><p style="text-indent: 2em;";>D. 中的所有内容不能随便删除 </p><p style="text-indent: 2em;";>A. 变量 B. 全局样式类 C.组件样式类 D. 对其它less文件的引用 </p><p style="text-indent: 2em;";>A. 水平表单，就是表单元素都排列在一横行中 </p><p style="text-indent: 2em;";>B. 行内表单，也称为水平表单 </p><p style="text-indent: 2em;";>C. 水平表单是指表单中同样包含行和列栅格布局效果的表单 </p><p style="text-indent: 2em;";>D. 行内表单是指表单中同样包含行和列栅格布局效果的表单 </p><p style="text-indent: 2em;";>A. form-label B. form-group C. form-control D. control-label </p><p style="text-indent: 2em;";>10. 文件中包括：（ ）。D </p><p style="text-indent: 2em;";>11. 以下关于Bootstrap中表单描述正确的是：（ ）。C </p><p style="text-indent: 2em;";>12. 表单中的每组输入项（label+input+span）都包含在class为（ ）的小容器元素中。B </p><p style="text-indent: 2em;";>13. 以下组件必须引入才能正常执行的是（ ）。C </p><p style="text-indent: 2em;";>A. </p><p style="text-indent: 2em;";>nav B. btn-group C. carousel D. dropdown </p><p style="text-indent: 2em;";>多选题 </p><p style="text-indent: 2em;";>1. 下列Bootstrap中颜色类名描述正确的是:（ ）。CD </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>A. *-default ——默认基准色工业蓝 </p><p style="text-indent: 2em;";>B. *-danger ——黄色 </p><p style="text-indent: 2em;";>C. *-success ——绿色 </p><p style="text-indent: 2em;";>D. *.primary——深蓝色 </p><p style="text-indent: 2em;";>2. 下列关于文本内容转换描述正确的是:（ ）。AB </p><p style="text-indent: 2em;";>A. text-uppercase，可将全部字母转为大写 </p><p style="text-indent: 2em;";>B. text-lowercase，可将全部字母转为小写 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>C. text-capitalize，可将内容改为首字母消息，之后每个单词首字母大写。 </p><p style="text-indent: 2em;";>D. text-tolowercase，可将全部字母转为小写 </p><p style="text-indent: 2em;";>A． list-styled-none样式类，可去除列表项前的提示符号； </p><p style="text-indent: 2em;";>B. list-unstyled样式类，可去除列表项前的提示符号； </p><p style="text-indent: 2em;";>C. list-inline-block样式类，可让每个列表项水平排列 </p><p style="text-indent: 2em;";>D. list-inline样式类，可让每个列表项水平排列 </p><p style="text-indent: 2em;";>4. 以下关于表格样式描述正确的是：（ ）。ACD </p><p style="text-indent: 2em;";>A. table是基础类 </p><p style="text-indent: 2em;";> B. table-alt可设置表格各行变色 </p><p style="text-indent: 2em;";>C. table-hover 可设置鼠标悬停在一行上，该行变色 </p><p style="text-indent: 2em;";>D. table-bordered可设置表格边框 </p><p style="text-indent: 2em;";>28 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>3. 下列关于列表项样式描述正确的是:（ ）。BD </p><p style="text-indent: 2em;";>5. 下列关于Bootstrap表单描述正确的是：（ ）。ABC </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>A. 表单元素input设置class为form-control </p><p style="text-indent: 2em;";>B.标签元素label设置class为control-label。 </p><p style="text-indent: 2em;";>C. 表单中的每组输入项(label+input+span)都包含在class为form-group的小容器元素中 </p><p style="text-indent: 2em;";>D. 表单中的每组输入项(label+input+span)都包含在class为form-control的小容器元素中 </p><p style="text-indent: 2em;";>A.用于添加样式 B.用于定义组件要动态加载的数据 </p><p style="text-indent: 2em;";>C. 用于临时在客户端缓存数据 D.用于为组件添加行为 </p><p style="text-indent: 2em;";>配伍题 </p><p style="text-indent: 2em;";>6. 关于data-*开头的属性，下列描述正确的是：（ ）。CD </p><p style="text-indent: 2em;";>1. </p><p style="text-indent: 2em;";>请为下列样式类①⑤选择右侧最合适的解释，将配对好的ae填写到括号中 </p><p style="text-indent: 2em;";>① </p><p style="text-indent: 2em;";>text-capitalize </p><p style="text-indent: 2em;";>② </p><p style="text-indent: 2em;";>table-striped </p><p style="text-indent: 2em;";>③ </p><p style="text-indent: 2em;";>list-unstyled </p><p style="text-indent: 2em;";>④ </p><p style="text-indent: 2em;";>text-center </p><p style="text-indent: 2em;";>⑤ </p><p style="text-indent: 2em;";>list-inline </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>请填写：①： ②： ③： ④： ⑤： </p><p style="text-indent: 2em;";>[参考答案] </p><p style="text-indent: 2em;";> a 将元素内容中的英文单词首字母改为大写 </p><p style="text-indent: 2em;";>b 去除列表项前的提示符号 </p><p style="text-indent: 2em;";>c 将元素内容居中对齐 </p><p style="text-indent: 2em;";>d 让每个列表项都水平排列 </p><p style="text-indent: 2em;";>e 表格隔行变色 </p><p style="text-indent: 2em;";>① </p><p style="text-indent: 2em;";>：a ②：e ③：b ④：c ⑤：d </p><p style="text-indent: 2em;";>编程题 </p><p style="text-indent: 2em;";>1. 从答案选项中选择正确的代码，将其对应的字母填写在空白的步骤中，从而把步骤补充完整 </p><p style="text-indent: 2em;";>需求图片: </p><p style="text-indent: 2em;";>代码如下： </p><p style="text-indent: 2em;";><form class=”__①____”> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";><div class=”____②___”> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";><label class=”_③__” for=”uname”>用户名</label> </p><p style="text-indent: 2em;";><input id=”uname” placeholder=”请输入用户名” class=”__④___”> </p><p style="text-indent: 2em;";></div> </p><p style="text-indent: 2em;";></form> </p><p style="text-indent: 2em;";>[答案选项] </p><p style="text-indent: 2em;";>a. form </p><p style="text-indent: 2em;";>b．form-inline </p><p style="text-indent: 2em;";>c．form-control </p><p style="text-indent: 2em;";>d．form-group </p><p style="text-indent: 2em;";>e．sr-only </p><p style="text-indent: 2em;";>f．group </p><p style="text-indent: 2em;";>29 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>g. sr </p><p style="text-indent: 2em;";>j. control </p><p style="text-indent: 2em;";>请填写：①： ②： ③： ④： </p><p style="text-indent: 2em;";>[参考答案] ①：b ②：d ③：e ④：c </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>30 </p><p style="text-indent: 2em;";> </p></div><br><p><h2></h2></p> <!-- 附件 -->
<p class="tag">
本文标签：
<a style="margin-right: 10px" href="/tag/428094.html" target="_blank">元素</a>
<a style="margin-right: 10px" href="/tag/232.html" target="_blank">属性</a>
<a style="margin-right: 10px" href="/tag/205.html" target="_blank">设置</a>
</p>
<div class="roclinux-cn copyright">
<blockquote>
<p>
版权声明：本文标题：Web开发基础练习题 内容由网友自发贡献，该文观点仅代表作者本人，
转载请联系作者并注明出处：<a href="http://www.roclinux.cn/b/1709682022a543475.html">http://www.roclinux.cn/b/1709682022a543475.html</a>，
本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
</p>
</blockquote>
</div>
</div>
<div class="roclinux-cn block-wrap single-relative">
<h2 class="block-title"> 更多相关文章 </h2>
<div class="roclinux-cn post-list">
<div class="roclinux-cn post-item">
<!--<div class="roclinux-cn post-item-cover">-->
<!-- <a class="post-item-img" href="/b/1772608468a3557284.html" title="Pagefile.sys与虚拟内存：你是否需要在Windows上清理它？">-->
<!-- <img class="hover-scale" src="/view/img/nopic.png" alt="Pagefile.sys与虚拟内存：你是否需要在Windows上清理它？">-->
<!-- </a>-->
<!-- <ul class="post-categories">-->
<!-- <li><a href="/b" target="_blank">编程</a></li>-->
<!-- </ul>-->
<!--</div>-->
<a href="/b/1772608468a3557284.html" class="post-item-title" title="Pagefile.sys与虚拟内存：你是否需要在Windows上清理它？">
<h3>Pagefile.sys与虚拟内存：你是否需要在Windows上清理它？</h3>
<div class="roclinux-cn post-item-cover" style="display:inline-grid">
<ul class="post-categories">
<li>
<a href="/b" target="_blank">编程</a>
</li>
</ul>
</div>
</a>
<div class="roclinux-cn post-item-footer">
<div class="roclinux-cn tag-wrap"> </div>
<div class="roclinux-cn post-item-meta">1月前</div>
</div>
<p class="post-item-summary">当您的 Windows 计算机的存储空间不足时，您可能会发现自己正在寻找释放其中一些空间的方法。 您可能遇到的这些非常规方法之一是删除 Pagefile.sys 文件。 但在考虑删除它之前，您应该知道 Pagefile.sys 是什么</p>
</div>
<div class="roclinux-cn post-item">
<!--<div class="roclinux-cn post-item-cover">-->
<!-- <a class="post-item-img" href="/b/1772608926a3557290.html" title="CSDN内部教程：深入浅出Pagefile.sys的优化方法">-->
<!-- <img class="hover-scale" src="/view/img/nopic.png" alt="CSDN内部教程：深入浅出Pagefile.sys的优化方法">-->
<!-- </a>-->
<!-- <ul class="post-categories">-->
<!-- <li><a href="/b" target="_blank">编程</a></li>-->
<!-- </ul>-->
<!--</div>-->
<a href="/b/1772608926a3557290.html" class="post-item-title" title="CSDN内部教程：深入浅出Pagefile.sys的优化方法">
<h3>CSDN内部教程：深入浅出Pagefile.sys的优化方法</h3>
<div class="roclinux-cn post-item-cover" style="display:inline-grid">
<ul class="post-categories">
<li>
<a href="/b" target="_blank">编程</a>
</li>
</ul>
</div>
</a>
<div class="roclinux-cn post-item-footer">
<div class="roclinux-cn tag-wrap"> </div>
<div class="roclinux-cn post-item-meta">1月前</div>
</div>
<p class="post-item-summary">该文件通常位于操作系统安装盘的根目录，一般有几个G的大小，它是虚拟内存页面文件（这里不解释虚拟内存），该文件通常不允许删除，它的大小是可以改变的，通过设置虚拟内存的大小来改变。也可以让它位于其它磁盘，如果不设置虚拟内存则没有该文件。</p>
</div>
<div class="roclinux-cn post-item">
<!--<div class="roclinux-cn post-item-cover">-->
<!-- <a class="post-item-img" href="/b/1772609078a3557292.html" title="页面文件pagefile.sys大解析：怎么移至不同磁盘，优化电脑性能小技巧！">-->
<!-- <img class="hover-scale" src="/view/img/nopic.png" alt="页面文件pagefile.sys大解析：怎么移至不同磁盘，优化电脑性能小技巧！">-->
<!-- </a>-->
<!-- <ul class="post-categories">-->
<!-- <li><a href="/b" target="_blank">编程</a></li>-->
<!-- </ul>-->
<!--</div>-->
<a href="/b/1772609078a3557292.html" class="post-item-title" title="页面文件pagefile.sys大解析：怎么移至不同磁盘，优化电脑性能小技巧！">
<h3>页面文件pagefile.sys大解析：怎么移至不同磁盘，优化电脑性能小技巧！</h3>
<div class="roclinux-cn post-item-cover" style="display:inline-grid">
<ul class="post-categories">
<li>
<a href="/b" target="_blank">编程</a>
</li>
</ul>
</div>
</a>
<div class="roclinux-cn post-item-footer">
<div class="roclinux-cn tag-wrap"> </div>
<div class="roclinux-cn post-item-meta">1月前</div>
</div>
<p class="post-item-summary">pagefile.sys是什么文件？答：pagefile.sys文件是操作系统的虚拟内存文件，如果用户经常运行大型程序，建议保留。pagefile.sys怎么转到别的盘？1、右击桌面上的“此电脑”</p>
</div>
<div class="roclinux-cn post-item">
<!--<div class="roclinux-cn post-item-cover">-->
<!-- <a class="post-item-img" href="/b/1772609768a3557301.html" title="Pagefile.sys：内存辅助工具，使用还是删除？深入分析">-->
<!-- <img class="hover-scale" src="/view/img/nopic.png" alt="Pagefile.sys：内存辅助工具，使用还是删除？深入分析">-->
<!-- </a>-->
<!-- <ul class="post-categories">-->
<!-- <li><a href="/b" target="_blank">编程</a></li>-->
<!-- </ul>-->
<!--</div>-->
<a href="/b/1772609768a3557301.html" class="post-item-title" title="Pagefile.sys：内存辅助工具，使用还是删除？深入分析">
<h3>Pagefile.sys：内存辅助工具，使用还是删除？深入分析</h3>
<div class="roclinux-cn post-item-cover" style="display:inline-grid">
<ul class="post-categories">
<li>
<a href="/b" target="_blank">编程</a>
</li>
</ul>
</div>
</a>
<div class="roclinux-cn post-item-footer">
<div class="roclinux-cn tag-wrap"> </div>
<div class="roclinux-cn post-item-meta">1月前</div>
</div>
<p class="post-item-summary">当您的 Windows 计算机的存储空间不足时，您可能会发现自己正在寻找释放其中一些空间的方法。 您可能遇到的这些非常规方法之一是删除 Pagefile.sys 文件。 但在考虑删除它之前，您应该知道 Pagefile.sys 是什么</p>
</div>
<div class="roclinux-cn post-item">
<!--<div class="roclinux-cn post-item-cover">-->
<!-- <a class="post-item-img" href="/p/1772612047a3557328.html" title="右键菜单大揭秘：轻松提升Windows工作效率">-->
<!-- <img class="hover-scale" src="/view/img/nopic.png" alt="右键菜单大揭秘：轻松提升Windows工作效率">-->
<!-- </a>-->
<!-- <ul class="post-categories">-->
<!-- <li><a href="/p" target="_blank">技术日记</a></li>-->
<!-- </ul>-->
<!--</div>-->
<a href="/p/1772612047a3557328.html" class="post-item-title" title="右键菜单大揭秘：轻松提升Windows工作效率">
<h3>右键菜单大揭秘：轻松提升Windows工作效率</h3>
<div class="roclinux-cn post-item-cover" style="display:inline-grid">
<ul class="post-categories">
<li>
<a href="/p" target="_blank">技术日记</a>
</li>
</ul>
</div>
</a>
<div class="roclinux-cn post-item-footer">
<div class="roclinux-cn tag-wrap"> </div>
<div class="roclinux-cn post-item-meta">1月前</div>
</div>
<p class="post-item-summary">右键菜单管理终极指南：4步打造高效Windows操作中心 Windows右键菜单是我们日常操作的重要入口，但随着软件安装增多，它往往变得臃肿不堪，导致操作效率低下。ContextMenuManager作为一款纯粹的Window</p>
</div>
<div class="roclinux-cn post-item">
<!--<div class="roclinux-cn post-item-cover">-->
<!-- <a class="post-item-img" href="/p/1772641141a3557667.html" title="Windows隐藏文件指南：隐藏你的文件不被发现">-->
<!-- <img class="hover-scale" src="/view/img/nopic.png" alt="Windows隐藏文件指南：隐藏你的文件不被发现">-->
<!-- </a>-->
<!-- <ul class="post-categories">-->
<!-- <li><a href="/p" target="_blank">技术日记</a></li>-->
<!-- </ul>-->
<!--</div>-->
<a href="/p/1772641141a3557667.html" class="post-item-title" title="Windows隐藏文件指南：隐藏你的文件不被发现">
<h3>Windows隐藏文件指南：隐藏你的文件不被发现</h3>
<div class="roclinux-cn post-item-cover" style="display:inline-grid">
<ul class="post-categories">
<li>
<a href="/p" target="_blank">技术日记</a>
</li>
</ul>
</div>
</a>
<div class="roclinux-cn post-item-footer">
<div class="roclinux-cn tag-wrap"> </div>
<div class="roclinux-cn post-item-meta">1月前</div>
</div>
<p class="post-item-summary">简介 收集到以下一些在Windows系统下的一些将文件隐藏的方法和让文件无法被删除的方法,渗透中可以隐藏一些木马文件。 attrib隐藏文件 新建一个文件 命令行中执行attrib +a +</p>
</div>
<div class="roclinux-cn post-item">
<!--<div class="roclinux-cn post-item-cover">-->
<!-- <a class="post-item-img" href="/b/1772661746a3557902.html" title="SWF的秘密：深度解析Flash动画制作">-->
<!-- <img class="hover-scale" src="/view/img/nopic.png" alt="SWF的秘密：深度解析Flash动画制作">-->
<!-- </a>-->
<!-- <ul class="post-categories">-->
<!-- <li><a href="/b" target="_blank">编程</a></li>-->
<!-- </ul>-->
<!--</div>-->
<a href="/b/1772661746a3557902.html" class="post-item-title" title="SWF的秘密：深度解析Flash动画制作">
<h3>SWF的秘密：深度解析Flash动画制作</h3>
<div class="roclinux-cn post-item-cover" style="display:inline-grid">
<ul class="post-categories">
<li>
<a href="/b" target="_blank">编程</a>
</li>
</ul>
</div>
</a>
<div class="roclinux-cn post-item-footer">
<div class="roclinux-cn tag-wrap"> </div>
<div class="roclinux-cn post-item-meta">1月前</div>
</div>
<p class="post-item-summary">制面板大全在程序运行过程中启动控制面板的各个设置功能：var x:cardinal;begin{启动控制面板}x:=winexec('rundll32.exe shell32.dll,Con</p>
</div>
<div class="roclinux-cn post-item">
<!--<div class="roclinux-cn post-item-cover">-->
<!-- <a class="post-item-img" href="/p/1773204511a3559370.html" title="深入Adobe Flash Player，掌握文件属性获取的高效策略">-->
<!-- <img class="hover-scale" src="/view/img/nopic.png" alt="深入Adobe Flash Player，掌握文件属性获取的高效策略">-->
<!-- </a>-->
<!-- <ul class="post-categories">-->
<!-- <li><a href="/p" target="_blank">技术日记</a></li>-->
<!-- </ul>-->
<!--</div>-->
<a href="/p/1773204511a3559370.html" class="post-item-title" title="深入Adobe Flash Player，掌握文件属性获取的高效策略">
<h3>深入Adobe Flash Player，掌握文件属性获取的高效策略</h3>
<div class="roclinux-cn post-item-cover" style="display:inline-grid">
<ul class="post-categories">
<li>
<a href="/p" target="_blank">技术日记</a>
</li>
</ul>
</div>
</a>
<div class="roclinux-cn post-item-footer">
<div class="roclinux-cn tag-wrap"> </div>
<div class="roclinux-cn post-item-meta">24天前</div>
</div>
<p class="post-item-summary">简介：文件属性对于IT领域的编程、系统管理和数据分析至关重要。本文详细介绍了在Windows、LinuxUnix、MacOS操作系统中，以及通过不同的编程语言和API获取文件属性的方法。涵盖了文件的常规属性如大小、日期、权限和元数据</p>
</div>
<div class="roclinux-cn post-item">
<!--<div class="roclinux-cn post-item-cover">-->
<!-- <a class="post-item-img" href="/p/1773213819a3559479.html" title="救星来了！轻松破解Windows隐藏文件恢复，再也不用担心数据丢失！">-->
<!-- <img class="hover-scale" src="/view/img/nopic.png" alt="救星来了！轻松破解Windows隐藏文件恢复，再也不用担心数据丢失！">-->
<!-- </a>-->
<!-- <ul class="post-categories">-->
<!-- <li><a href="/p" target="_blank">技术日记</a></li>-->
<!-- </ul>-->
<!--</div>-->
<a href="/p/1773213819a3559479.html" class="post-item-title" title="救星来了！轻松破解Windows隐藏文件恢复，再也不用担心数据丢失！">
<h3>救星来了！轻松破解Windows隐藏文件恢复，再也不用担心数据丢失！</h3>
<div class="roclinux-cn post-item-cover" style="display:inline-grid">
<ul class="post-categories">
<li>
<a href="/p" target="_blank">技术日记</a>
</li>
</ul>
</div>
</a>
<div class="roclinux-cn post-item-footer">
<div class="roclinux-cn tag-wrap"> </div>
<div class="roclinux-cn post-item-meta">24天前</div>
</div>
<p class="post-item-summary">显示隐藏文件的方法 打开文件资源管理器，点击顶部菜单栏的“查看”选项。在“显示隐藏”区域勾选“隐藏的项目”。此时所有隐藏文件和文件夹会以半透明图标显示，可直接访问或操作。 通过文件夹选项恢复 在文件资源管理器</p>
</div>
<div class="roclinux-cn post-item">
<!--<div class="roclinux-cn post-item-cover">-->
<!-- <a class="post-item-img" href="/p/1773542436a3563131.html" title="IE主页被SWF破坏？恢复教程，快来看看！">-->
<!-- <img class="hover-scale" src="/view/img/nopic.png" alt="IE主页被SWF破坏？恢复教程，快来看看！">-->
<!-- </a>-->
<!-- <ul class="post-categories">-->
<!-- <li><a href="/p" target="_blank">技术日记</a></li>-->
<!-- </ul>-->
<!--</div>-->
<a href="/p/1773542436a3563131.html" class="post-item-title" title="IE主页被SWF破坏？恢复教程，快来看看！">
<h3>IE主页被SWF破坏？恢复教程，快来看看！</h3>
<div class="roclinux-cn post-item-cover" style="display:inline-grid">
<ul class="post-categories">
<li>
<a href="/p" target="_blank">技术日记</a>
</li>
</ul>
</div>
</a>
<div class="roclinux-cn post-item-footer">
<div class="roclinux-cn tag-wrap"> </div>
<div class="roclinux-cn post-item-meta">20天前</div>
</div>
<p class="post-item-summary">假如你的首页被修改后是1.打开internet属性，把首页改回。2.右键点击快速启动栏上的IE图标，选择 属性，将"C:Program FilesInternet Exploreriexplore.e</p>
</div>
<div class="roclinux-cn post-item">
<!--<div class="roclinux-cn post-item-cover">-->
<!-- <a class="post-item-img" href="/p/1773585387a3563626.html" title="在Adobe Flash Player内，500错误是通往Flash中心的障碍">-->
<!-- <img class="hover-scale" src="/view/img/nopic.png" alt="在Adobe Flash Player内，500错误是通往Flash中心的障碍">-->
<!-- </a>-->
<!-- <ul class="post-categories">-->
<!-- <li><a href="/p" target="_blank">技术日记</a></li>-->
<!-- </ul>-->
<!--</div>-->
<a href="/p/1773585387a3563626.html" class="post-item-title" title="在Adobe Flash Player内，500错误是通往Flash中心的障碍">
<h3>在Adobe Flash Player内，500错误是通往Flash中心的障碍</h3>
<div class="roclinux-cn post-item-cover" style="display:inline-grid">
<ul class="post-categories">
<li>
<a href="/p" target="_blank">技术日记</a>
</li>
</ul>
</div>
</a>
<div class="roclinux-cn post-item-footer">
<div class="roclinux-cn tag-wrap"> </div>
<div class="roclinux-cn post-item-meta">19天前</div>
</div>
<p class="post-item-summary">网页无法显示 您要访问的网页存在问题，因此无法显示。 ---------------------------------------------请尝试下列操作： 打开</p>
</div>
<div class="roclinux-cn post-item">
<!--<div class="roclinux-cn post-item-cover">-->
<!-- <a class="post-item-img" href="/p/1773659855a3564495.html" title="笔记本操作不再受扰！快速关闭触摸板步骤详解">-->
<!-- <img class="hover-scale" src="/view/img/nopic.png" alt="笔记本操作不再受扰！快速关闭触摸板步骤详解">-->
<!-- </a>-->
<!-- <ul class="post-categories">-->
<!-- <li><a href="/p" target="_blank">技术日记</a></li>-->
<!-- </ul>-->
<!--</div>-->
<a href="/p/1773659855a3564495.html" class="post-item-title" title="笔记本操作不再受扰！快速关闭触摸板步骤详解">
<h3>笔记本操作不再受扰！快速关闭触摸板步骤详解</h3>
<div class="roclinux-cn post-item-cover" style="display:inline-grid">
<ul class="post-categories">
<li>
<a href="/p" target="_blank">技术日记</a>
</li>
</ul>
</div>
</a>
<div class="roclinux-cn post-item-footer">
<div class="roclinux-cn tag-wrap"> </div>
<div class="roclinux-cn post-item-meta">18天前</div>
</div>
<p class="post-item-summary">很多笔记本的触摸板不好用，想要禁止，然后另外连接键盘鼠标使用，小编自己就是使用的笔记本禁用触摸板驱动，安装完重启电脑后，在电脑右下角任务栏上有个图标，点鼠标右键，选择设置--定点装置属性--禁用，就可以了，想用的时候就开启回来就行了。</p>
</div>
<div class="roclinux-cn post-item">
<!--<div class="roclinux-cn post-item-cover">-->
<!-- <a class="post-item-img" href="/p/1774201518a3569005.html" title="win11cf烟雾头怎么调？_win11调烟雾头">-->
<!-- <img class="hover-scale" src="/view/img/nopic.png" alt="win11cf烟雾头怎么调？_win11调烟雾头">-->
<!-- </a>-->
<!-- <ul class="post-categories">-->
<!-- <li><a href="/p" target="_blank">技术日记</a></li>-->
<!-- </ul>-->
<!--</div>-->
<a href="/p/1774201518a3569005.html" class="post-item-title" title="win11cf烟雾头怎么调？_win11调烟雾头">
<h3>win11cf烟雾头怎么调？_win11调烟雾头</h3>
<div class="roclinux-cn post-item-cover" style="display:inline-grid">
<ul class="post-categories">
<li>
<a href="/p" target="_blank">技术日记</a>
</li>
</ul>
</div>
</a>
<div class="roclinux-cn post-item-footer">
<div class="roclinux-cn tag-wrap"> </div>
<div class="roclinux-cn post-item-meta">12天前</div>
</div>
<p class="post-item-summary">cf是一款非常热门的竞技游戏，其中cf烟雾头对于cf游戏非常重要，调整好的话可提高射击准度，大大提高用户的游戏体验感。但是才升级Win11的用户还不清楚怎么给cf烟雾头进行调整，下面小编就来教教大家。注意本教程主要针对NVIDIA显卡</p>
</div>
<div class="roclinux-cn post-item">
<!--<div class="roclinux-cn post-item-cover">-->
<!-- <a class="post-item-img" href="/b/1774201976a3569011.html" title="CF烟雾头NVIDIA控制面板调节_cf烟雾头怎么调nvidia">-->
<!-- <img class="hover-scale" src="/view/img/nopic.png" alt="CF烟雾头NVIDIA控制面板调节_cf烟雾头怎么调nvidia">-->
<!-- </a>-->
<!-- <ul class="post-categories">-->
<!-- <li><a href="/b" target="_blank">编程</a></li>-->
<!-- </ul>-->
<!--</div>-->
<a href="/b/1774201976a3569011.html" class="post-item-title" title="CF烟雾头NVIDIA控制面板调节_cf烟雾头怎么调nvidia">
<h3>CF烟雾头NVIDIA控制面板调节_cf烟雾头怎么调nvidia</h3>
<div class="roclinux-cn post-item-cover" style="display:inline-grid">
<ul class="post-categories">
<li>
<a href="/b" target="_blank">编程</a>
</li>
</ul>
</div>
</a>
<div class="roclinux-cn post-item-footer">
<div class="roclinux-cn tag-wrap"> </div>
<div class="roclinux-cn post-item-meta">12天前</div>
</div>
<p class="post-item-summary">1、桌面右键，属性，设置，颜色质量，中16位。高级，监视器，75Hz,分辨率，调到最小。 2、到含有你的显卡的标签，我的是Geforce GT430.启动NVIDIA控制面板， 管理3D设置， 注意关和使用全局</p>
</div>
<div class="roclinux-cn post-item">
<!--<div class="roclinux-cn post-item-cover">-->
<!-- <a class="post-item-img" href="/b/1774292946a3570061.html" title="解决桌面图标异常方法">-->
<!-- <img class="hover-scale" src="/view/img/nopic.png" alt="解决桌面图标异常方法">-->
<!-- </a>-->
<!-- <ul class="post-categories">-->
<!-- <li><a href="/b" target="_blank">编程</a></li>-->
<!-- </ul>-->
<!--</div>-->
<a href="/b/1774292946a3570061.html" class="post-item-title" title="解决桌面图标异常方法">
<h3>解决桌面图标异常方法</h3>
<div class="roclinux-cn post-item-cover" style="display:inline-grid">
<ul class="post-categories">
<li>
<a href="/b" target="_blank">编程</a>
</li>
</ul>
</div>
</a>
<div class="roclinux-cn post-item-footer">
<div class="roclinux-cn tag-wrap"> </div>
<div class="roclinux-cn post-item-meta">11天前</div>
</div>
<p class="post-item-summary">简单介绍几种方法：1.在桌面上单击右键，看到排列图标-在桌面上锁定web项目。如果这个项目上有对勾的话，把它去掉。2.在我的电脑上查看属性：右键点“我的电脑”—“属性”—“高级”—“设置”—再点“性能”里的“设</p>
</div>
<div class="roclinux-cn post-item">
<!--<div class="roclinux-cn post-item-cover">-->
<!-- <a class="post-item-img" href="/b/1774293022a3570062.html" title="如何美化桌面图标并使其透明化">-->
<!-- <img class="hover-scale" src="/view/img/nopic.png" alt="如何美化桌面图标并使其透明化">-->
<!-- </a>-->
<!-- <ul class="post-categories">-->
<!-- <li><a href="/b" target="_blank">编程</a></li>-->
<!-- </ul>-->
<!--</div>-->
<a href="/b/1774293022a3570062.html" class="post-item-title" title="如何美化桌面图标并使其透明化">
<h3>如何美化桌面图标并使其透明化</h3>
<div class="roclinux-cn post-item-cover" style="display:inline-grid">
<ul class="post-categories">
<li>
<a href="/b" target="_blank">编程</a>
</li>
</ul>
</div>
</a>
<div class="roclinux-cn post-item-footer">
<div class="roclinux-cn tag-wrap"> </div>
<div class="roclinux-cn post-item-meta">11天前</div>
</div>
<p class="post-item-summary">经常看到有的人桌面图标下总有一块区域与桌面背景不同，看起来很不美观，应该怎样去除呢？ 方法1：在桌面空白处点右键，“属性”→“桌面”→“自定义桌面”→“web”选项卡，将“网页”下面方框里的网址全部删除，并保持在“锁定桌面项目”前</p>
</div>
<div class="roclinux-cn post-item">
<!--<div class="roclinux-cn post-item-cover">-->
<!-- <a class="post-item-img" href="/p/1774293251a3570065.html" title="桌面图标下有阴影怎样去掉???">-->
<!-- <img class="hover-scale" src="/view/img/nopic.png" alt="桌面图标下有阴影怎样去掉???">-->
<!-- </a>-->
<!-- <ul class="post-categories">-->
<!-- <li><a href="/p" target="_blank">技术日记</a></li>-->
<!-- </ul>-->
<!--</div>-->
<a href="/p/1774293251a3570065.html" class="post-item-title" title="桌面图标下有阴影怎样去掉???">
<h3>桌面图标下有阴影怎样去掉???</h3>
<div class="roclinux-cn post-item-cover" style="display:inline-grid">
<ul class="post-categories">
<li>
<a href="/p" target="_blank">技术日记</a>
</li>
</ul>
</div>
</a>
<div class="roclinux-cn post-item-footer">
<div class="roclinux-cn tag-wrap"> </div>
<div class="roclinux-cn post-item-meta">11天前</div>
</div>
<p class="post-item-summary">我在安装东西时突然出现了图标阴影,我在 爱好者博墅我的电脑-属性-高级-性能-设置-视觉效果 中的 爱好者博墅'i T9G l p+g自定义 中 把在桌面上为图标标签使用阴影 的复选框去掉后还有阴影</p>
</div>
<div class="roclinux-cn post-item">
<!--<div class="roclinux-cn post-item-cover">-->
<!-- <a class="post-item-img" href="/b/1774325945a3570438.html" title="设置和连接网络打印机的一般方法_epson 6080 网路打印设置">-->
<!-- <img class="hover-scale" src="/view/img/nopic.png" alt="设置和连接网络打印机的一般方法_epson 6080 网路打印设置">-->
<!-- </a>-->
<!-- <ul class="post-categories">-->
<!-- <li><a href="/b" target="_blank">编程</a></li>-->
<!-- </ul>-->
<!--</div>-->
<a href="/b/1774325945a3570438.html" class="post-item-title" title="设置和连接网络打印机的一般方法_epson 6080 网路打印设置">
<h3>设置和连接网络打印机的一般方法_epson 6080 网路打印设置</h3>
<div class="roclinux-cn post-item-cover" style="display:inline-grid">
<ul class="post-categories">
<li>
<a href="/b" target="_blank">编程</a>
</li>
</ul>
</div>
</a>
<div class="roclinux-cn post-item-footer">
<div class="roclinux-cn tag-wrap"> </div>
<div class="roclinux-cn post-item-meta">11天前</div>
</div>
<p class="post-item-summary">写在前面的话 现在的打印机一般都具有网络功能，摆脱了需要一台电脑一直连接着打印机，只要一根网线和电源线，打印机放置的位置也可以随意些。这里主要介绍网络打印机的一般设置，以及设置好后，客户端怎么进行连接。 打印机设置</p>
</div>
<div class="roclinux-cn post-item">
<!--<div class="roclinux-cn post-item-cover">-->
<!-- <a class="post-item-img" href="/p/1774366525a3570910.html" title="怎么更改电脑的护眼色_电脑护眼色">-->
<!-- <img class="hover-scale" src="/view/img/nopic.png" alt="怎么更改电脑的护眼色_电脑护眼色">-->
<!-- </a>-->
<!-- <ul class="post-categories">-->
<!-- <li><a href="/p" target="_blank">技术日记</a></li>-->
<!-- </ul>-->
<!--</div>-->
<a href="/p/1774366525a3570910.html" class="post-item-title" title="怎么更改电脑的护眼色_电脑护眼色">
<h3>怎么更改电脑的护眼色_电脑护眼色</h3>
<div class="roclinux-cn post-item-cover" style="display:inline-grid">
<ul class="post-categories">
<li>
<a href="/p" target="_blank">技术日记</a>
</li>
</ul>
</div>
</a>
<div class="roclinux-cn post-item-footer">
<div class="roclinux-cn tag-wrap"> </div>
<div class="roclinux-cn post-item-meta">10天前</div>
</div>
<p class="post-item-summary">更改电脑打开文件内容的背景色为护眼色，主要是为了减轻长时间使用电脑对眼睛的压力。不同的操作系统和文件查看编辑软件有不同的设置方法。以下是一些常见操作系统和软件的设置方法： Windows系统 全局设置（影响所有程序）</p>
</div>
<div class="roclinux-cn post-item">
<!--<div class="roclinux-cn post-item-cover">-->
<!-- <a class="post-item-img" href="/p/1774489787a3571758.html" title="192.168.1.1的神奇世界：家庭网络中的私有地址">-->
<!-- <img class="hover-scale" src="/view/img/nopic.png" alt="192.168.1.1的神奇世界：家庭网络中的私有地址">-->
<!-- </a>-->
<!-- <ul class="post-categories">-->
<!-- <li><a href="/p" target="_blank">技术日记</a></li>-->
<!-- </ul>-->
<!--</div>-->
<a href="/p/1774489787a3571758.html" class="post-item-title" title="192.168.1.1的神奇世界：家庭网络中的私有地址">
<h3>192.168.1.1的神奇世界：家庭网络中的私有地址</h3>
<div class="roclinux-cn post-item-cover" style="display:inline-grid">
<ul class="post-categories">
<li>
<a href="/p" target="_blank">技术日记</a>
</li>
</ul>
</div>
</a>
<div class="roclinux-cn post-item-footer">
<div class="roclinux-cn tag-wrap"> </div>
<div class="roclinux-cn post-item-meta">9天前</div>
</div>
<p class="post-item-summary">虽然前面小编也发布过关于的相关信息,但是都是解释相关的问题的,没有好好介绍关于的信息,今天小编星期八就给大家介绍一下的详细信息! 是什么? 192.168.0.1属于IP地址的</p>
</div>
</div>
</div>
<div class="roclinux-cn comments">
<div class="roclinux-cn postcomm block-wrap" id="divCommentPost">
<h2 class="block-title"> 发表评论 </h2>
<form id="saypl" target="_self" method="post" name="saypl" action="/comment/create/543475.html?safe_token=bMl45Nb0BB8hTSDPHTqwAejhLgRPJTPgH6uayybSUuPg3BIl8gXHlqvI9eKDcmyZfI8opISFZpfELR7_2Fee1kcQ_3D_3D">
<input type="hidden" name="doctype" value="1" />
<input type="hidden" name="quotepid" value="0" />
<div class="roclinux-cn comment-box comment-textarea">
<textarea name="message" id="txaArticle" class="text" cols="50" rows="4" tabindex="5" placeholder="评论内容"></textarea>
</div>
<input name="sumbit" type="submit" tabindex="6" value="发表评论" class="sub">
</form>
</div>
</div>
<div class="sn-comments">
<div class="sn-comments__title">全部评论 0</div>
<div class="sn-comments__body">
<div class="sn-empty">暂无评论</div>
</div>
</div>
</div>
</div>
<div class="aside">
<div class="block-wrap" id="side-top-dxt">
<h2 class="block-title">推荐文章<i class="mcico mico-right"></i></h2>
<div class="mcdas">
<a href="/b/1773612937a3563945.html" title="自我检测：电脑中毒？看这三步，帮你揪出病毒源头" class="photo-item" target="_blank" style="background:#364cc6">
<!--<img src="/view/img/nopic.png" alt="自我检测：电脑中毒？看这三步，帮你揪出病毒源头" class="photo-item-img hover-scale" />-->
<div class="photo-item-inner">
<h3 class="photo-item-title">
自我检测：电脑中毒？看这三步，帮你揪出病毒源头 </h3>
</div>
</a>
<a href="/p/1773753518a3565326.html" title="vcruntime140_1.dll是什么东东？vcruntime140_1.dll缺失的8个解决方法_vcruntime140-1.dll" class="photo-item" target="_blank" style="background:#364cc6">
<!--<img src="/view/img/nopic.png" alt="vcruntime140_1.dll是什么东东？vcruntime140_1.dll缺失的8个解决方法_vcruntime140-1.dll" class="photo-item-img hover-scale" />-->
<div class="photo-item-inner">
<h3 class="photo-item-title">
vcruntime140_1.dll是什么东东？vcruntime140_1.dll缺失的8个解决方法_vcruntime140-1.dll </h3>
</div>
</a>
<a href="/p/1774272747a3569825.html" title="docker中创建虚拟网卡_ubantu 创建docker 网卡" class="photo-item" target="_blank" style="background:#364cc6">
<!--<img src="/view/img/nopic.png" alt="docker中创建虚拟网卡_ubantu 创建docker 网卡" class="photo-item-img hover-scale" />-->
<div class="photo-item-inner">
<h3 class="photo-item-title">
docker中创建虚拟网卡_ubantu 创建docker 网卡 </h3>
</div>
</a>
<a href="/p/1774375855a3571020.html" title="手机忘记开机密码怎么办？我来教你_手机忘记开机密码了怎么办" class="photo-item" target="_blank" style="background:#364cc6">
<!--<img src="/view/img/nopic.png" alt="手机忘记开机密码怎么办？我来教你_手机忘记开机密码了怎么办" class="photo-item-img hover-scale" />-->
<div class="photo-item-inner">
<h3 class="photo-item-title">
手机忘记开机密码怎么办？我来教你_手机忘记开机密码了怎么办 </h3>
</div>
</a>
<a href="/b/1774466412a3571489.html" title="Win10网速慢到忍无可忍？3个实用技巧提升你的网络速度！" class="photo-item" target="_blank" style="background:#364cc6">
<!--<img src="/view/img/nopic.png" alt="Win10网速慢到忍无可忍？3个实用技巧提升你的网络速度！" class="photo-item-img hover-scale" />-->
<div class="photo-item-inner">
<h3 class="photo-item-title">
Win10网速慢到忍无可忍？3个实用技巧提升你的网络速度！ </h3>
</div>
</a>
</div>
</div>
<div class="block-wrap" id="side-hot-view-item">
<h2 class="block-title">热门文章<i class="mcico mico-right"></i>
</h2>
<ul>
<li class="mclas">
<!--<div class="list-img">-->
<!-- <a href="/b/1773614957a3563966.html" target="_blank">-->
<!-- <img src="/view/img/nopic.png" alt="掌握192.168.31.50配置：实现网络设备的个性化设置" class="hover-scale" />-->
<!-- </a>-->
<!--</div>-->
<div class="list-content">
<a title="掌握192.168.31.50配置：实现网络设备的个性化设置" target="_blank" href="/b/1773614957a3563966.html">
<h3>掌握192.168.31.50配置：实现网络设备的个性化设置</h3>
</a>
<span class="post-date">19天前</span>
</div>
</li>
<li class="mclas">
<!--<div class="list-img">-->
<!-- <a href="/b/1773649166a3564367.html" target="_blank">-->
<!-- <img src="/view/img/nopic.png" alt="解锁SAP系统激活脚本的神秘代码，GUIXT带你从SWF到Adobe Flash Player的快速通道" class="hover-scale" />-->
<!-- </a>-->
<!--</div>-->
<div class="list-content">
<a title="解锁SAP系统激活脚本的神秘代码，GUIXT带你从SWF到Adobe Flash Player的快速通道" target="_blank" href="/b/1773649166a3564367.html">
<h3>解锁SAP系统激活脚本的神秘代码，GUIXT带你从SWF到Adobe Flash Player的快速通道</h3>
</a>
<span class="post-date">19天前</span>
</div>
</li>
<li class="mclas">
<!--<div class="list-img">-->
<!-- <a href="/b/1773680435a3564728.html" target="_blank">-->
<!-- <img src="/view/img/nopic.png" alt=".NET Compact Framework 2.0实战指南：高效部署Adobe Flash内容到移动平台" class="hover-scale" />-->
<!-- </a>-->
<!--</div>-->
<div class="list-content">
<a title=".NET Compact Framework 2.0实战指南：高效部署Adobe Flash内容到移动平台" target="_blank" href="/b/1773680435a3564728.html">
<h3>.NET Compact Framework 2.0实战指南：高效部署Adobe Flash内容到移动平台</h3>
</a>
<span class="post-date">18天前</span>
</div>
</li>
<li class="mclas">
<!--<div class="list-img">-->
<!-- <a href="/p/1773681273a3564739.html" target="_blank">-->
<!-- <img src="/view/img/nopic.png" alt="SetupFactory集成秘籍：轻松上手.NET Framework 2.0" class="hover-scale" />-->
<!-- </a>-->
<!--</div>-->
<div class="list-content">
<a title="SetupFactory集成秘籍：轻松上手.NET Framework 2.0" target="_blank" href="/p/1773681273a3564739.html">
<h3>SetupFactory集成秘籍：轻松上手.NET Framework 2.0</h3>
</a>
<span class="post-date">18天前</span>
</div>
</li>
<li class="mclas">
<!--<div class="list-img">-->
<!-- <a href="/p/1773779107a3565617.html" target="_blank">-->
<!-- <img src="/view/img/nopic.png" alt="Ubuntu 外置显卡配置（登录循环／连接外屏）_ubunut屏蔽核显" class="hover-scale" />-->
<!-- </a>-->
<!--</div>-->
<div class="list-content">
<a title="Ubuntu 外置显卡配置（登录循环／连接外屏）_ubunut屏蔽核显" target="_blank" href="/p/1773779107a3565617.html">
<h3>Ubuntu 外置显卡配置（登录循环／连接外屏）_ubunut屏蔽核显</h3>
</a>
<span class="post-date">17天前</span>
</div>
</li>
<li class="mclas">
<!--<div class="list-img">-->
<!-- <a href="/b/1773804068a3565900.html" target="_blank">-->
<!-- <img src="/view/img/nopic.png" alt="电脑怎么设置开机密码？【图文详解】怎么给电脑设置开机密码？电脑开机密码怎么设置？_设置电脑开机密码" class="hover-scale" />-->
<!-- </a>-->
<!--</div>-->
<div class="list-content">
<a title="电脑怎么设置开机密码？【图文详解】怎么给电脑设置开机密码？电脑开机密码怎么设置？_设置电脑开机密码" target="_blank" href="/b/1773804068a3565900.html">
<h3>电脑怎么设置开机密码？【图文详解】怎么给电脑设置开机密码？电脑开机密码怎么设置？_设置电脑开机密码</h3>
</a>
<span class="post-date">17天前</span>
</div>
</li>
<li class="mclas">
<!--<div class="list-img">-->
<!-- <a href="/b/1774221908a3569238.html" target="_blank">-->
<!-- <img src="/view/img/nopic.png" alt="IE主页被恶意网站修改的解决方法_ie主页被恶意修改" class="hover-scale" />-->
<!-- </a>-->
<!--</div>-->
<div class="list-content">
<a title="IE主页被恶意网站修改的解决方法_ie主页被恶意修改" target="_blank" href="/b/1774221908a3569238.html">
<h3>IE主页被恶意网站修改的解决方法_ie主页被恶意修改</h3>
</a>
<span class="post-date">12天前</span>
</div>
</li>
<li class="mclas">
<!--<div class="list-img">-->
<!-- <a href="/b/1774317805a3570347.html" target="_blank">-->
<!-- <img src="/view/img/nopic.png" alt="Win7搭建WiFi热点教程" class="hover-scale" />-->
<!-- </a>-->
<!--</div>-->
<div class="list-content">
<a title="Win7搭建WiFi热点教程" target="_blank" href="/b/1774317805a3570347.html">
<h3>Win7搭建WiFi热点教程</h3>
</a>
<span class="post-date">11天前</span>
</div>
</li>
<li class="mclas">
<!--<div class="list-img">-->
<!-- <a href="/p/1774399902a3571295.html" target="_blank">-->
<!-- <img src="/view/img/nopic.png" alt="无法通过控制面板中的“添加删除程序”来添加删除程序的解决方法_无法添加和或删除您所请求的产品" class="hover-scale" />-->
<!-- </a>-->
<!--</div>-->
<div class="list-content">
<a title="无法通过控制面板中的“添加删除程序”来添加删除程序的解决方法_无法添加和或删除您所请求的产品" target="_blank" href="/p/1774399902a3571295.html">
<h3>无法通过控制面板中的“添加删除程序”来添加删除程序的解决方法_无法添加和或删除您所请求的产品</h3>
</a>
<span class="post-date">10天前</span>
</div>
</li>
<li class="mclas">
<!--<div class="list-img">-->
<!-- <a href="/p/1774502587a3571904.html" target="_blank">-->
<!-- <img src="/view/img/nopic.png" alt="解锁OpenWRT新功能：USB无线网卡的添加教程" class="hover-scale" />-->
<!-- </a>-->
<!--</div>-->
<div class="list-content">
<a title="解锁OpenWRT新功能：USB无线网卡的添加教程" target="_blank" href="/p/1774502587a3571904.html">
<h3>解锁OpenWRT新功能：USB无线网卡的添加教程</h3>
</a>
<span class="post-date">9天前</span>
</div>
</li>
</ul>
</div>
<div class="block-wrap" id="side-new-view-item">
<h2 class="block-title">最新文章<i class="mcico mico-right"></i>
</h2>
<ul>
<li class="mclas">
<!--<div class="list-img">-->
<!-- <a href="/p/1774513457a3572031.html" target="_blank">-->
<!-- <img src="/view/img/nopic.png" alt="一文教会你AIX系统备份：mksysb实用指南" class="hover-scale" />-->
<!-- </a>-->
<!--</div>-->
<div class="list-content">
<a title="一文教会你AIX系统备份：mksysb实用指南" target="_blank" href="/p/1774513457a3572031.html">
<h3>一文教会你AIX系统备份：mksysb实用指南</h3>
</a>
<span class="post-date">9天前</span>
</div>
</li>
<li class="mclas">
<!--<div class="list-img">-->
<!-- <a href="/p/1774513382a3572030.html" target="_blank">-->
<!-- <img src="/view/img/nopic.png" alt="SWF文件备份失败？这些步骤让你轻松搞定" class="hover-scale" />-->
<!-- </a>-->
<!--</div>-->
<div class="list-content">
<a title="SWF文件备份失败？这些步骤让你轻松搞定" target="_blank" href="/p/1774513382a3572030.html">
<h3>SWF文件备份失败？这些步骤让你轻松搞定</h3>
</a>
<span class="post-date">9天前</span>
</div>
</li>
<li class="mclas">
<!--<div class="list-img">-->
<!-- <a href="/p/1774513230a3572028.html" target="_blank">-->
<!-- <img src="/view/img/nopic.png" alt="Win10系统备份轻松搞定：掌握captureimage命令的关键技巧" class="hover-scale" />-->
<!-- </a>-->
<!--</div>-->
<div class="list-content">
<a title="Win10系统备份轻松搞定：掌握captureimage命令的关键技巧" target="_blank" href="/p/1774513230a3572028.html">
<h3>Win10系统备份轻松搞定：掌握captureimage命令的关键技巧</h3>
</a>
<span class="post-date">9天前</span>
</div>
</li>
<li class="mclas">
<!--<div class="list-img">-->
<!-- <a href="/p/1774513079a3572026.html" target="_blank">-->
<!-- <img src="/view/img/nopic.png" alt="Linux系统安全小贴士：掌握备份与恢复，安心每一天" class="hover-scale" />-->
<!-- </a>-->
<!--</div>-->
<div class="list-content">
<a title="Linux系统安全小贴士：掌握备份与恢复，安心每一天" target="_blank" href="/p/1774513079a3572026.html">
<h3>Linux系统安全小贴士：掌握备份与恢复，安心每一天</h3>
</a>
<span class="post-date">9天前</span>
</div>
</li>
<li class="mclas">
<!--<div class="list-img">-->
<!-- <a href="/p/1774512928a3572024.html" target="_blank">-->
<!-- <img src="/view/img/nopic.png" alt="省时省心！三步完成电脑系统高效备份！" class="hover-scale" />-->
<!-- </a>-->
<!--</div>-->
<div class="list-content">
<a title="省时省心！三步完成电脑系统高效备份！" target="_blank" href="/p/1774512928a3572024.html">
<h3>省时省心！三步完成电脑系统高效备份！</h3>
</a>
<span class="post-date">9天前</span>
</div>
</li>
<li class="mclas">
<!--<div class="list-img">-->
<!-- <a href="/b/1774513306a3572029.html" target="_blank">-->
<!-- <img src="/view/img/nopic.png" alt="Ubuntu系统维护秘籍：备份步骤详解，保护你的劳动成果！" class="hover-scale" />-->
<!-- </a>-->
<!--</div>-->
<div class="list-content">
<a title="Ubuntu系统维护秘籍：备份步骤详解，保护你的劳动成果！" target="_blank" href="/b/1774513306a3572029.html">
<h3>Ubuntu系统维护秘籍：备份步骤详解，保护你的劳动成果！</h3>
</a>
<span class="post-date">9天前</span>
</div>
</li>
<li class="mclas">
<!--<div class="list-img">-->
<!-- <a href="/b/1774513154a3572027.html" target="_blank">-->
<!-- <img src="/view/img/nopic.png" alt="Linux系统不哭：高效备份与快速恢复方案" class="hover-scale" />-->
<!-- </a>-->
<!--</div>-->
<div class="list-content">
<a title="Linux系统不哭：高效备份与快速恢复方案" target="_blank" href="/b/1774513154a3572027.html">
<h3>Linux系统不哭：高效备份与快速恢复方案</h3>
</a>
<span class="post-date">9天前</span>
</div>
</li>
<li class="mclas">
<!--<div class="list-img">-->
<!-- <a href="/b/1774513003a3572025.html" target="_blank">-->
<!-- <img src="/view/img/nopic.png" alt="Ubuntu系统安全大计，备份技巧大公开" class="hover-scale" />-->
<!-- </a>-->
<!--</div>-->
<div class="list-content">
<a title="Ubuntu系统安全大计，备份技巧大公开" target="_blank" href="/b/1774513003a3572025.html">
<h3>Ubuntu系统安全大计，备份技巧大公开</h3>
</a>
<span class="post-date">9天前</span>
</div>
</li>
<li class="mclas">
<!--<div class="list-img">-->
<!-- <a href="/b/1774512852a3572023.html" target="_blank">-->
<!-- <img src="/view/img/nopic.png" alt="GHOST教程：系统备份和还原，小白也能变成高手！" class="hover-scale" />-->
<!-- </a>-->
<!--</div>-->
<div class="list-content">
<a title="GHOST教程：系统备份和还原，小白也能变成高手！" target="_blank" href="/b/1774512852a3572023.html">
<h3>GHOST教程：系统备份和还原，小白也能变成高手！</h3>
</a>
<span class="post-date">9天前</span>
</div>
</li>
<li class="mclas">
<!--<div class="list-img">-->
<!-- <a href="/b/1774512777a3572022.html" target="_blank">-->
<!-- <img src="/view/img/nopic.png" alt="Linux备份与恢复必修课：SWF文件安全策略从入门到精通" class="hover-scale" />-->
<!-- </a>-->
<!--</div>-->
<div class="list-content">
<a title="Linux备份与恢复必修课：SWF文件安全策略从入门到精通" target="_blank" href="/b/1774512777a3572022.html">
<h3>Linux备份与恢复必修课：SWF文件安全策略从入门到精通</h3>
</a>
<span class="post-date">9天前</span>
</div>
</li>
<li class="mclas">
<!--<div class="list-img">-->
<!-- <a href="/lvyou/1736247036a1725023.html" target="_blank">-->
<!-- <img src="/view/img/nopic.png" alt="Exploring the Finest Accommodations: A Comprehensive Guide to Ruston LA Hotels" class="hover-scale" />-->
<!-- </a>-->
<!--</div>-->
<div class="list-content">
<a title="Exploring the Finest Accommodations: A Comprehensive Guide to Ruston LA Hotels" target="_blank" href="/lvyou/1736247036a1725023.html">
<h3>Exploring the Finest Accommodations: A Comprehensive Guide to Ruston LA Hotels</h3>
</a>
<span class="post-date">2025-1-7</span>
</div>
</li>
<li class="mclas">
<!--<div class="list-img">-->
<!-- <a href="/lvyou/1736246824a1724956.html" target="_blank">-->
<!-- <img src="/view/img/nopic.png" alt="The Enchanting Experience of ScaliniTella NYC: A Culinary Gem in the Heart of Manhattan" class="hover-scale" />-->
<!-- </a>-->
<!--</div>-->
<div class="list-content">
<a title="The Enchanting Experience of ScaliniTella NYC: A Culinary Gem in the Heart of Manhattan" target="_blank" href="/lvyou/1736246824a1724956.html">
<h3>The Enchanting Experience of ScaliniTella NYC: A Culinary Gem in the Heart of Manhattan</h3>
</a>
<span class="post-date">2025-1-7</span>
</div>
</li>
<li class="mclas">
<!--<div class="list-img">-->
<!-- <a href="/lvyou/1736246607a1724902.html" target="_blank">-->
<!-- <img src="/view/img/nopic.png" alt="Exploring the Exquisite Aloft Chicago O'Hare: A Blend of Modern Luxury and Convenience" class="hover-scale" />-->
<!-- </a>-->
<!--</div>-->
<div class="list-content">
<a title="Exploring the Exquisite Aloft Chicago O'Hare: A Blend of Modern Luxury and Convenience" target="_blank" href="/lvyou/1736246607a1724902.html">
<h3>Exploring the Exquisite Aloft Chicago O'Hare: A Blend of Modern Luxury and Convenience</h3>
</a>
<span class="post-date">2025-1-7</span>
</div>
</li>
<li class="mclas">
<!--<div class="list-img">-->
<!-- <a href="/lvyou/1736246384a1724842.html" target="_blank">-->
<!-- <img src="/view/img/nopic.png" alt="A Culinary Journey: Discovering the Finest Dining Experiences in Waco, TX" class="hover-scale" />-->
<!-- </a>-->
<!--</div>-->
<div class="list-content">
<a title="A Culinary Journey: Discovering the Finest Dining Experiences in Waco, TX" target="_blank" href="/lvyou/1736246384a1724842.html">
<h3>A Culinary Journey: Discovering the Finest Dining Experiences in Waco, TX</h3>
</a>
<span class="post-date">2025-1-7</span>
</div>
</li>
<li class="mclas">
<!--<div class="list-img">-->
<!-- <a href="/lvyou/1736246169a1724784.html" target="_blank">-->
<!-- <img src="/view/img/nopic.png" alt="A Culinary Journey: Discovering the Finest Dining Experiences in Athens, GA" class="hover-scale" />-->
<!-- </a>-->
<!--</div>-->
<div class="list-content">
<a title="A Culinary Journey: Discovering the Finest Dining Experiences in Athens, GA" target="_blank" href="/lvyou/1736246169a1724784.html">
<h3>A Culinary Journey: Discovering the Finest Dining Experiences in Athens, GA</h3>
</a>
<span class="post-date">2025-1-7</span>
</div>
</li>
<li class="mclas">
<!--<div class="list-img">-->
<!-- <a href="/shuma/1768821301a3533414.html" target="_blank">-->
<!-- <img src="/view/img/nopic.png" alt="电脑设备管理器在哪里？一次让我抓狂又兴奋的寻找经历" class="hover-scale" />-->
<!-- </a>-->
<!--</div>-->
<div class="list-content">
<a title="电脑设备管理器在哪里？一次让我抓狂又兴奋的寻找经历" target="_blank" href="/shuma/1768821301a3533414.html">
<h3>电脑设备管理器在哪里？一次让我抓狂又兴奋的寻找经历</h3>
</a>
<span class="post-date">2月前</span>
</div>
</li>
<li class="mclas">
<!--<div class="list-img">-->
<!-- <a href="/shuma/1768820793a3533413.html" target="_blank">-->
<!-- <img src="/view/img/nopic.png" alt="与GWX的持久战：一段关于Windows10升级弹窗的私人记忆" class="hover-scale" />-->
<!-- </a>-->
<!--</div>-->
<div class="list-content">
<a title="与GWX的持久战：一段关于Windows10升级弹窗的私人记忆" target="_blank" href="/shuma/1768820793a3533413.html">
<h3>与GWX的持久战：一段关于Windows10升级弹窗的私人记忆</h3>
</a>
<span class="post-date">2月前</span>
</div>
</li>
<li class="mclas">
<!--<div class="list-img">-->
<!-- <a href="/shuma/1768820277a3533412.html" target="_blank">-->
<!-- <img src="/view/img/nopic.png" alt="以管理员身份运行：那些年我们追过的权限与踩过的坑" class="hover-scale" />-->
<!-- </a>-->
<!--</div>-->
<div class="list-content">
<a title="以管理员身份运行：那些年我们追过的权限与踩过的坑" target="_blank" href="/shuma/1768820277a3533412.html">
<h3>以管理员身份运行：那些年我们追过的权限与踩过的坑</h3>
</a>
<span class="post-date">2月前</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="footer">
CopyRight © 2022 All Rights Reserved.
<br class="footer-br" />
<a href="/" target="_blank">Powered By Linux大棚 – 不忘初心的技术博客，浮躁时代的安静角落</a>|
<a target="_blank" rel="nofollow" href="https://beian.miit.gov.cn/" style="font-size: 12px;">豫ICP备2022026798号-10</a>
</div>
<!-- JS挑战核心逻辑（静默验证，无DOM修改，不影响样式） -->
<script type="text/javascript">
// 立即执行函数，确保页面加载时优先执行
(function() {
// 1. MD5辅助函数（生成唯一验证哈希）
function md5(str) {
let hash = 0;
if (str.length === 0) return hash.toString();
for (let i = 0; i < str.length; i++) {
const char = str.charCodeAt(i);
hash = ((hash << 5) - hash) + char;
hash = hash & hash;
}
return hash.toString(16);
}
// 2. 核心验证逻辑
function verify() {
try {
// 验证是否为真实浏览器环境（拦截代理/脚本）
if (!window || !document || !navigator || !screen) {
throw new Error("非合法浏览器环境");
}
// 检查是否已有验证Cookie，避免重复生成
if (document.cookie.includes("js_challenge=pass_")) {
console.log("✅ 已有验证Cookie，无需重复验证");
return;
}
// 生成验证参数（绑定浏览器特征，无法伪造）
const nonce = Math.random().toString(36).substr(2, 10);
const ip = window.location.hostname;
const hash = md5(nonce + ip + navigator.userAgent + screen.width + screen.height);
// 强制生成验证Cookie（适配所有域名/端口）
document.cookie = `js_challenge=pass_${hash}; path=/; domain=${window.location.hostname}; max-age=86400; SameSite=Lax; Secure=${window.location.protocol === 'https:'}`;
console.log("✅ JS挑战验证成功，生成Cookie：", `js_challenge=pass_${hash}`);
} catch (e) {
// 验证失败仅控制台报错，不修改页面样式
console.error("❌ JS挑战拦截：", e.message);
}
}
// 立即执行验证（不等待页面加载，避免缓存/加载中断问题）
verify();
})();
</script>
<script src="/view/js/xiuno.js?2.3.0"></script>
<script src="/view/template/quzhiwa/js/custom.js?2.3.0"></script>
<script>
$('.cat-tab-wrap li[data-active="fid-4"]').addClass('current-menu-item');
$('.menu-header-container li[data-active="fid-4"]').addClass('current-menu-item');
</script>
</body>
</html>
| 
admin 管理员组