Front End Learning-quiz paper

Front-end Learning-Test paper 1 (out of 100+20,90)

First, fill in the blanks (4 points per question, total 20 points):

1. html{font-size:12px;} div{font-size:2.5rem},div The font size is: _30px_____
2. There are up to two div labeled A and b,a{margin-bottom:20px} b{margin-top:30px}, the spacing between AB, regardless of browser compatibility, is: __30px______
3. The simplest notation for making a div centered around and the top and bottom margins are 3 times times the font size is: __margin:3em auto__________________
4. The CSS property that allows the block-level elements to be arranged horizontally without using a float is: _________inline inline-block _________
5. In the CSS selector, the selector for declaring the node ID is: ______#____ selector

Second, the choice question (4 points per question, common 20 points):

1. (D) Picture formats that can render transparency are:

A. jpg

B. gif

C. Png8

D. Png24

Transparency! = Transparency 0//Only PNG24

GIF PNG8 are all without alpha channels.

• (C) Which of the following options is the group selector:

A. div > Span >p{...}

B. Div #span #p {...}

C. Div, span, p{...}

D. Div. span. p{...}

1. (a) The following selections, not block-level elements and intra-line element differences, are:

A. Need to clear the float or not

B. Exclusive line and another row

C. High-wide attributes are valid or not

D. In the same row as the adjacent element or not

1. (C) in the following label, the default is Inline-block:

A. Section

B. Article

C. Label

D. blockquote

HTML has a default IB, all form elements are the default IB//c is a FORM element

1. (C) The attributes that control the hiding and placeholder of elements are:

A. Overflow:hidden;

B. Display:none;

C. Visibility:hidden;

D. Text-indent:-100%;

A hidden Overflow part//b Hidden C viewable area is visible or not, occupying a position.

Three, non-problem (4 points per question, total 20):

1. (wrong) <! DOCTYPE html> is the wrong declarative notation, declaring that the document type must be lowercase;
2. (wrong) A webpage can only have one
3. (wrong) inline style sheets should be written inside the Web page, and the outer style sheet should be written outside the Web page;
4. Both RGBA and opacity are transparent, and the difference is that RGBA is only for color transparency, while opacity makes all the contents of DOM elements and elements transparent;
5. The content property can be used on the Before/after pseudo-class of any element to insert the generated content.  

Iv. Application questions (10 points per topic, total 40 points):

1. Write a Clearfix class in the most concise way to clear the float:

.     . clearfix:before,.clearfix:after {content: ""; display:table; };

. clearfix:after {Clear:both; Overflow:hidden; } ;

. clearfix {zoom:1;} /* for IE6 & IE7 */

1. Illustrates the difference between 5 block-level elements and inline elements:

1.

2. By default, block-level element width automatically fills its parent element width, in-line elements

1. Exclusive line with another row
2. Aspect property is valid or not
3. In the same row as the adjacent element or not

• Supplement the code so that the multiline text inside the container is centered around the top and bottom:

Html:

<div>

<p></p>

</div>

Css:

div{

display:table;

}

p{

[Supplemental Code]

}

Supplemental code: Display:table-row;

1. Find 5 errors in the code and correct them with the same semantics:

div{

Width:auto;

Height:none;

Line-height:1;

text-align:justify;

Display:table-caption;

Position:none;

Visibility:show;

Verticle-align:center;

List-style:point;

}

Correct:

height:0;

position:static;

visibility:visible;

List-style:: disc;

Cursor:point;

Five, additional questions (10 points per topic, total 20 points):

1. Use pure CSS to achieve an auto-toggle slideshow Effect:
2. #wrap {
3. position:relative;
4. width:300px;
5. height:200px;
6. }
7. . a,.b{
8. Position:absolute;
9. left:0;
10. top:0;
11. One. width:100%;
12. height:100%;

13.}

a{.

1. Background: #f00;
2. Opacity:1;
3. -webkit-animation:show 6s linear 0s infinite normal both;

18.}

b{.

1. Background: #ff0;
2. Opacity:1;
3. -webkit-animation:show 6s linear 3s infinite normal both;

23.}

@-webkit-keyframes show{

1. 25.0%,20%{
2. Opacity:1;
3. 27.}
4. 28.40%,60%{
5. opacity:0;
6. 30.}
7. 31.80%,100%{
8. Opacity:1;
9. 33.}

34.}

<div id= "Wrap" >

1. <div class= "a" ></div>
2. Panax <div class= "B" ></div>
3. 38.
4. 39.

-</div>

1. 41.

42. Write a form that requires the following:

1). Click the button to submit automatically

2). Form request Type is post

3). Form submission Parameters: Account, password, captcha

4). Check if the element is empty using the HTML5 self-band property

<form action= "/" method= "post" "There seems to be a bunch of that. What is the setting code or what? >

<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>

Front End Learning-quiz paper