The next several exercises are timed. If you type slowly or dislike time pressure, feel free to increase the allotted time.
Name and email required. Check any number of boxes.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19
0
0
0
| An element that animates must have _______, absolute, or fixed position. | relative | ^ *relative *$ | |
| An element that animates must have relative, _______, or fixed position. | absolute | ^ *absolute *$ | |
| An element that animates must have relative, absolute, or _______ position. | fixed | ^ *fixed *$ | |
| A fixed-position div is 300 pixels wide. Fill in the blank to move it out of sight. | left: ______ | -300px; | ^ *-300px; *$ |
| 5. Drag-and-drop: Holding down the left mouse button, drag the pieces of code onto the screen to code the portion of CSS that hides divs of the class. | div.full_tab { position: fixed; width: 300px; left: -300px; } | ||
| Code the line of CSS that specifies hex cc3366 for the background-color of an element. | background-color: ##cc3366; | background-color: #cc3366; | background`-`color`: `#`cc3366`; |
| What is the CSS property that allows one element to cover up another? | z-index | ||
| Code the line of CSS that specifies one of the position properties that allow you to do an animation. Your choice of property. | position: relative; or position: absolute; or position: fixed; | ^ *position: (relative|absolute|fixed); *$ | |
| The height of a div is 350 pixels. Code the line of CSS that hides it above the top edge of the screen. | top: -350px; | ^ *top: -350px; *$ | |
| Code the line of CSS that allows an element to hide another element. | z-index: 1; | ^ *z-index: 1; *$ | |
| Code two lines of CSS that hide an element off the right edge of the screen. Make up the width of the image. | width: 250px; right: -250px; | ^ *width: ([0-9]+)px;\n *right: -\1px; *$ | |
| Code five lines of CSS, including the selector and closing bracket, that specify a fixed position for a class of div and hide divs of that class off the left edge of the screen. Make up the class name and width. | div.full_tab { position: fixed; width: 300px; left: -300px; } | ^ *div\..+ {\n *position: fixed;\n *width: ([0-9]+)px;\n *left: -\1px;\n} *$ | |
| What is the CSS property that allows one element to cover up another? | z-index | ^ *z-index *$ | |
| Code the line of CSS that specifies one of the position properties that allow you to do an animation. Your choice of property. | position: relative; or position: absolute; or position: fixed; | ^ *position: (relative|absolute|fixed); *$ | |
| The height of a div is 350 pixels. Code the line of CSS that hides it above the top edge of the screen. | top: -350px; | ^ *top: -350px; *$ | |
| Code the line of CSS that allows an element to hide another element. | z-index: 1; | ^ *z-index: 1; *$ | |
| Code two lines of CSS that hide an element off the right edge of the screen. Make up the width of the image. | width: 250px; right: -250px; | ^ *width: ([0-9]+)px;\n *right: -\1px; *$ | |
| Code five lines of CSS, including the selector and closing bracket, that specify a fixed position for a class of div and hide divs of that class off the left edge of the screen. Make up the class name and width. | div.full_tab { position: fixed; width: 300px; left: -300px; } | ^ *div\..+ {\n *position: fixed;\n *width: ([0-9]+)px;\n *left: -\1px;\n} *$ | |
| http://jsfiddle.net/ASmarterWayToLearn/0d1gf277/ | |||
| http://jsfiddle.net/ASmarterWayToLearn/jtxoamth/ |