前端学习-试卷
2015-08-13 17:59
316 查看
前端学习-试卷 1（满分100+20，90分及格）
一、填空题（每题4分，共20分）：
html{ font-size: 12px; } div{ font-size: 2.5rem }，div的字号是： _30px_____
有上下两个div分别标记为A和B，A{ margin-bottom: 20px } B{ margin-top: 30px }，在不考虑浏览器兼容的前提下，AB之间的间距是：__30px______
使一个div左右居中且上下外边距均为3倍字号的最简洁写法是：__margin:3em auto__________________
在不使用浮动的前提下，能使块级元素横向排列的css属性是：_________inline inline-block _________
在css选择器中，声明节点ID的选择器是：______#____选择器
二、选择题（每题4分，共同20分）：
( D ) 可以呈现透明度的图片格式是：
A. jpg
B. gif
C. png8
D. png24
//透明度！=透明度0//只有PNG24
//GIF PNG8都是不带阿尔法通道的
( C ) 下列选项哪个为群组选择器：
A. div > span >p{ ... }
B. div #span #p{ ... }
C. div, span, p{ ... }
D. div .span .p{ ... }
( A) 下列选择，不是块级元素和行内元素差异的是：
A. 需要清除浮动与否
B. 独占一行与另起一行
C. 高宽属性有效与否
D. 与相邻元素在同一行与否
( C ) 下列标签中，默认为inline-block的是：
A. section
B. article
C. label
D. blockquote
//html有默认IB ，所有表单元素都是默认IB //C是表单元素
( C ) 能控制元素隐藏并占位的属性是：
A. overflow: hidden;
B. display: none;
C. visibility: hidden;
D. text-indent: -100%;
//A 隐藏溢出部分 //B隐藏 C可视区域可见与否，占位。
三、是非题（每题4分，共20分）：
(错) <!DOCTYPE HTML>是错误的声明写法，声明文档类型必须使用小写；
( 错 ) 一张网页只能有一个<head>，但可以有多个<body>；
( 错 ) 内联样式表应当写在网页内部，外联样式表应当写在网页外部；
( 是 ) rgba和opacity都是实现透明度，不同的是：rgba仅针对于颜色透明；而opacity可使dom元素及元素所有内容透明；
( 是 ) content属性可以用在任何元素的before/after伪类上，用来插入生成内容。
四、应用题（每题10分，共40分）：
用最简洁的方式编写一个clearfix类，用于清除浮动：
. .clearfix:before,.clearfix:after { content:""; display:table; };
.clearfix:after { clear:both; overflow:hidden; } ;
.clearfix { zoom:1; }/* for ie6 & ie7 */
阐述5个块级元素和行内元素的区别：
1.
2. 默认情况下块级元素宽度自动填满其父元素宽度,行内元素
独占一行与另起一行
高宽属性有效与否
与相邻元素在同一行与否
补充代码，使得容器内的多行文字上下左右居中显示：
html：
<div>
<p></p>
</div>
css：
div{
display: table;
}
p{
[补充代码]
}
补充代码：display: table-row;
找出代码中的5处错误，在语义相同的前提下，加以改正：
div{
width: auto;
height: none;
line-height: 1;
text-align: justify;
display: table-caption;
position: none;
visibility: show;
verticle-align: center;
list-style: point;
}
改正：
height:0;
position:static;
visibility: visible;
list-style:: disc;
cursor: point;
五、附加题（每题10分，共20分）：
使用纯css，实现一个自动切换的幻灯片效果：
#wrap{
position: relative;
width: 300px;
height: 200px;
}
.a,.b{
position: absolute;
left: 0;
10. top: 0;
11. width: 100%;
12. height: 100%;
13. }
14. .a{
15. background: #f00;
16. opacity: 1;
17. -webkit-animation: show 6s linear 0s infinite normal both;
18. }
19. .b{
20. background: #ff0;
21. opacity:1;
22. -webkit-animation: show 6s linear 3s infinite normal both;
23. }
24. @-webkit-keyframes show{
25. 0%,20%{
26. opacity:1;
27. }
28. 40%,60%{
29. opacity: 0;
30. }
31. 80%,100%{
32. opacity: 1;
33. }
34. }
35. <div id="wrap">
36. <div class="a"></div>
37. <div class="b"></div>
38.
39.
40. </div>
41.
42. 编写一个表单，要求如下：
1). 点击按钮自动提交
2). 表单请求类型为post
3). 表单提交参数：account、password、captcha
4). 使用html5自带属性校验元素是否为空
<form action=”/”method=”post””这里貌似有一串那个什么设置编码还是什么的”>
<label for=”account”>account：</label>
<input type=”text” name=”account” id=”account”required/>
<label for=”password”>account：</label>
<input type=”password” name=”password” id=”password”required/>
<label for=”captcha”>account：</label>
<input type=”text” name=”captcha” id=”captcha”required/>
<input value=”submit” type=”submit”/>
</form>
一、填空题（每题4分，共20分）：
html{ font-size: 12px; } div{ font-size: 2.5rem }，div的字号是： _30px_____
有上下两个div分别标记为A和B，A{ margin-bottom: 20px } B{ margin-top: 30px }，在不考虑浏览器兼容的前提下，AB之间的间距是：__30px______
使一个div左右居中且上下外边距均为3倍字号的最简洁写法是：__margin:3em auto__________________
在不使用浮动的前提下，能使块级元素横向排列的css属性是：_________inline inline-block _________
在css选择器中，声明节点ID的选择器是：______#____选择器
二、选择题（每题4分，共同20分）：
( D ) 可以呈现透明度的图片格式是：
A. jpg
B. gif
C. png8
D. png24
//透明度！=透明度0//只有PNG24
//GIF PNG8都是不带阿尔法通道的
( C ) 下列选项哪个为群组选择器：
A. div > span >p{ ... }
B. div #span #p{ ... }
C. div, span, p{ ... }
D. div .span .p{ ... }
( A) 下列选择，不是块级元素和行内元素差异的是：
A. 需要清除浮动与否
B. 独占一行与另起一行
C. 高宽属性有效与否
D. 与相邻元素在同一行与否
( C ) 下列标签中，默认为inline-block的是：
A. section
B. article
C. label
D. blockquote
//html有默认IB ，所有表单元素都是默认IB //C是表单元素
( C ) 能控制元素隐藏并占位的属性是：
A. overflow: hidden;
B. display: none;
C. visibility: hidden;
D. text-indent: -100%;
//A 隐藏溢出部分 //B隐藏 C可视区域可见与否，占位。
三、是非题（每题4分，共20分）：
(错) <!DOCTYPE HTML>是错误的声明写法，声明文档类型必须使用小写；
( 错 ) 一张网页只能有一个<head>，但可以有多个<body>；
( 错 ) 内联样式表应当写在网页内部，外联样式表应当写在网页外部；
( 是 ) rgba和opacity都是实现透明度，不同的是：rgba仅针对于颜色透明；而opacity可使dom元素及元素所有内容透明；
( 是 ) content属性可以用在任何元素的before/after伪类上，用来插入生成内容。
四、应用题（每题10分，共40分）：
用最简洁的方式编写一个clearfix类，用于清除浮动：
. .clearfix:before,.clearfix:after { content:""; display:table; };
.clearfix:after { clear:both; overflow:hidden; } ;
.clearfix { zoom:1; }/* for ie6 & ie7 */
阐述5个块级元素和行内元素的区别：
1.
2. 默认情况下块级元素宽度自动填满其父元素宽度,行内元素
独占一行与另起一行
高宽属性有效与否
与相邻元素在同一行与否
补充代码，使得容器内的多行文字上下左右居中显示：
html：
<div>
<p></p>
</div>
css：
div{
display: table;
}
p{
[补充代码]
}
补充代码：display: table-row;
找出代码中的5处错误，在语义相同的前提下，加以改正：
div{
width: auto;
height: none;
line-height: 1;
text-align: justify;
display: table-caption;
position: none;
visibility: show;
verticle-align: center;
list-style: point;
}
改正：
height:0;
position:static;
visibility: visible;
list-style:: disc;
cursor: point;
五、附加题（每题10分，共20分）：
使用纯css，实现一个自动切换的幻灯片效果：
#wrap{
position: relative;
width: 300px;
height: 200px;
}
.a,.b{
position: absolute;
left: 0;
10. top: 0;
11. width: 100%;
12. height: 100%;
13. }
14. .a{
15. background: #f00;
16. opacity: 1;
17. -webkit-animation: show 6s linear 0s infinite normal both;
18. }
19. .b{
20. background: #ff0;
21. opacity:1;
22. -webkit-animation: show 6s linear 3s infinite normal both;
23. }
24. @-webkit-keyframes show{
25. 0%,20%{
26. opacity:1;
27. }
28. 40%,60%{
29. opacity: 0;
30. }
31. 80%,100%{
32. opacity: 1;
33. }
34. }
35. <div id="wrap">
36. <div class="a"></div>
37. <div class="b"></div>
38.
39.
40. </div>
41.
42. 编写一个表单，要求如下：
1). 点击按钮自动提交
2). 表单请求类型为post
3). 表单提交参数：account、password、captcha
4). 使用html5自带属性校验元素是否为空
<form action=”/”method=”post””这里貌似有一串那个什么设置编码还是什么的”>
<label for=”account”>account：</label>
<input type=”text” name=”account” id=”account”required/>
<label for=”password”>account：</label>
<input type=”password” name=”password” id=”password”required/>
<label for=”captcha”>account：</label>
<input type=”text” name=”captcha” id=”captcha”required/>
<input value=”submit” type=”submit”/>
</form>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- json数组的添加删除
- jsp编码
- ExtJS 的一些使用总结（适用于3.x版本）——第三弹
- json解析和生成
- CSS related
- jsonp
- js 语法
- JavaScript--事件模型（转）
- Button模板，样式
- .htm .html .shtml的区别
- CSS3选择器学习笔记
- jQuery ajax传递特殊字符参数(例如+)
- javascript闭包
- JS操作页面cookie
- js 原型链
- [leetcode]Delete Node in a Linked List
- js中的null和undefined
- JavaScript中的execCommand()命令详解及实例展示
- 学习zepto.js(对象方法)[2]
- Fedora22内核编译说明