前端学习-凯发k8官方网

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

(错) 是错误的声明写法，声明文档类型必须使用小写；

(  错  )  一张网页只能有一个，但可以有多个；

(  错  )  内联样式表应当写在网页内部，外联样式表应当写在网页外部；

(   是   )  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：

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.

41.  

42. 编写一个表单，要求如下：

1).  点击按钮自动提交

2).  表单请求类型为post

3).  表单提交参数：account、password、captcha

4).  使用html5自带属性校验元素是否为空

 

account：

account：

account：

     

 

转载于:https://www.cnblogs.com/eveblog/p/4728062.html

总结

以上是凯发k8官方网为你收集整理的前端学习-试卷的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。