前端学习-试卷
前端学习-试卷 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>
