W3CSchool闯关笔记(Bootstrap)

阅读量：6870 次

发布时间：2019-06-26

本文共 16911 字，大约阅读时间需要 56 分钟。

该闯关内容与JS闯关衔接.

每一题的答案均在注释处,

第一关:把所有的HTML内容放在一个包含有container-fluid的class名称的div下(注意,是所有的HTML内容,style标签属于CSS,为了代码可读性尽量不要把style标签内容放在div内,需要添加代码的地方已经用注释标注出来了)

1 
       2 27 28 
      29 
      
          30     31 32 
       CatPhotoApp
33 34 
       Click here for cat photos.
35 36 
       37 38 
       Things cats love:
39 
       
        40 
        cat nip
41 
        laser pointers
42 
        lasagna
43 
       
44 
       Top 3 things cats hate:
45 
       
        46 
        flea treatment
47 
        thunder
48 
        other cats
49 
       
50 
       
        51 
         Indoor52 
         Outdoor53 
         Loving54 
         Lazy55 
         Crazy56 
        57 
        58 
       
59 60 
       61

第一关

第二关:在示例图片下方再添加一张图片,并使之适应设备屏幕宽度

1 
       2 27 28 
      
       29 
       CatPhotoApp
30 31 
       Click here for cat photos.
32 33 
       34 35 
       36 
       37 38 39 40 
       Things cats love:
41 
       
        42 
        cat nip
43 
        laser pointers
44 
        lasagna
45 
       
46 
       Top 3 things cats hate:
47 
       
        48 
        flea treatment
49 
        thunder
50 
        other cats
51 
       
52 
       
        53 
         Indoor54 
         Outdoor55 
         Loving56 
         Lazy57 
         Crazy58 
        59 
        60 
       
61

第二关

第三关:使h2的标题文字居中

1 
       2 27 28 
      
       29     
       30 
       CatPhotoApp
31 32 33 
       Click here for cat photos.
34 35 
       36 37 
       38 
       Things cats love:
39 
       
        40 
        cat nip
41 
        laser pointers
42 
        lasagna
43 
       
44 
       Top 3 things cats hate:
45 
       
        46 
        flea treatment
47 
        thunder
48 
        other cats
49 
       
50 
       
        51 
         Indoor52 
         Outdoor53 
         Loving54 
         Lazy55 
         Crazy56 
        57 
        58 
       
59

第三关

第四关:在大的猫咪图片下添加指定要求的按钮,按钮默认长度与按钮文本相同

1 
       2 27 28 
      
       29 
       CatPhotoApp
30 31 
       Click here for cat photos.
32 33 
       34 35 
       36 37 38 
       39 
       40 41 
       Things cats love:
42 
       
        43 
        cat nip
44 
        laser pointers
45 
        lasagna
46 
       
47 
       Top 3 things cats hate:
48 
       
        49 
        flea treatment
50 
        thunder
51 
        other cats
52 
       
53 
       
        54 
         Indoor55 
         Outdoor56 
         Loving57 
         Lazy58 
         Crazy59 
        60 
        61 
       
62

第四关

第五关:为按钮添加新的属性使按钮长度适应屏幕

1 
       2 27 28 
      
       29 
       CatPhotoApp
30 31 
       Click here for cat photos.
32 33 
       34 35 
       36 37 
       38 
       39 40 41 
       Things cats love:
42 
       
        43 
        cat nip
44 
        laser pointers
45 
        lasagna
46 
       
47 
       Top 3 things cats hate:
48 
       
        49 
        flea treatment
50 
        thunder
51 
        other cats
52 
       
53 
       
        54 
         Indoor55 
         Outdoor56 
         Loving57 
         Lazy58 
         Crazy59 
        60 
        61 
       
62

第五关

第六关:为按钮添加新属性

1 
       2 27 28 
      
       29 
       CatPhotoApp
30 31 
       Click here for cat photos.
32 33 
       34 35 
       36 37 
       38 
       39 40 41 
       Things cats love:
42 
       
        43 
        cat nip
44 
        laser pointers
45 
        lasagna
46 
       
47 
       Top 3 things cats hate:
48 
       
        49 
        flea treatment
50 
        thunder
51 
        other cats
52 
       
53 
       
        54 
         Indoor55 
         Outdoor56 
         Loving57 
         Lazy58 
         Crazy59 
        60 
        61 
       
62

第六关

第七关:添加新按钮,要符合要求

1 
       2 27 28 
      
       29 
       CatPhotoApp
30 31 
       Click here for cat photos.
32 33 
       34 35 
       36 37 38 
       39 
       40 
       41 42 43 
       Things cats love:
44 
       
        45 
        cat nip
46 
        laser pointers
47 
        lasagna
48 
       
49 
       Top 3 things cats hate:
50 
       
        51 
        flea treatment
52 
        thunder
53 
        other cats
54 
       
55 
       
        56 
         Indoor57 
         Outdoor58 
         Loving59 
         Lazy60 
         Crazy61 
        62 
        63 
       
64

第七关

第八关:添加新按钮

1 
       2 27 28 
      
       29 
       CatPhotoApp
30 31 
       Click here for cat photos.
32 33 
       34 35 
       36 37 38 
       39 
       40 
       41 
       42 43 44 
       Things cats love:
45 
       
        46 
        cat nip
47 
        laser pointers
48 
        lasagna
49 
       
50 
       Top 3 things cats hate:
51 
       
        52 
        flea treatment
53 
        thunder
54 
        other cats
55 
       
56 
       
        57 
         Indoor58 
         Outdoor59 
         Loving60 
         Lazy61 
         Crazy62 
        63 
        64 
       
65

第八关

第九关:为按钮设置外框,方便进行按钮布局

1 
       2 27 28 
      
       29 
       CatPhotoApp
30 31 
       Click here for cat photos.
32 33 
       34 35 
       36 37 
       38 
       
        39     
        
         40         
         41     
        
42     
        
         43         
         44     
        
45     
        
         46         
         47     
        
48 
       
49 50 
       Things cats love:
51 
       
        52 
        cat nip
53 
        laser pointers
54 
        lasagna
55 
       
56 
       Top 3 things cats hate:
57 
       
        58 
        flea treatment
59 
        thunder
60 
        other cats
61 
       
62 
       
        63 
         Indoor64 
         Outdoor65 
         Loving66 
         Lazy67 
         Crazy68 
        69 
        70 
       
71

第九关

第十关:删除多余的没用的标签和样式,注意:CSS样式中删掉的,HTML元素中如果有引用该样式的元素应该也删掉该样式

1 
       2 22 23 
      
       24     25 
       26 
       CatPhotoApp
27 28 
       29 30 
       31 
       32 33 
       34 
       
        35 
        
         36 
         37 
        
38 
        
         39 
         40 
        
41 
        
         42 
         43 
        
44 
       
45 
       Things cats love:
46 
       
        47 
        cat nip
48 
        laser pointers
49 
        lasagna
50 
       
51 
       Top 3 things cats hate:
52 
       
        53 
        flea treatment
54 
        thunder
55 
        other cats
56 
       
57 
       
        58 
         Indoor59 
         Outdoor60 
         Loving61 
         Lazy62 
         Crazy63 
        64 
        65 
       
66

第十关

第十一关:添加span标签,设置样式

1 
       2 16 17 
      
       18 
       CatPhotoApp
19 20 
       21 22 
       23 
       
        24 
        
         25 
         26 
        
27 
        
         28 
         29 
        
30 
        
         31 
         32 
        
33 
       
34 35 
       36 
       Things cats love:
37 38 39 
       
        40 
        cat nip
41 
        laser pointers
42 
        lasagna
43 
       
44 
       Top 3 things cats hate:
45 
       
        46 
        flea treatment
47 
        thunder
48 
        other cats
49 
       
50 
       
        51 
         Indoor52 
         Outdoor53 
         Loving54 
         Lazy55 
         Crazy56 
        57 
        58 
       
59

第十一关

第十二关:图片个标题合并到一个块区域

1 
       2  3 15 16 
      
       17     18 
       19 
       
        20     
        
         21         
         CatPhotoApp
22     
        
23     24     
        
         25     
         26     
        
27 
       
28 
       29 30 
       31 
       
        32 
        
         33 
         34 
        
35 
        
         36 
         37 
        
38 
        
         39 
         40 
        
41 
       
42 
       Things cats love:
43 
       
        44 
        cat nip
45 
        laser pointers
46 
        lasagna
47 
       
48 
       Top 3 things cats hate:
49 
       
        50 
        flea treatment
51 
        thunder
52 
        other cats
53 
       
54 
       
        55 
         Indoor56 
         Outdoor57 
         Loving58 
         Lazy59 
         Crazy60 
        61 
        62 
       
63

第十二关

第十三关:给按钮添加图标

1 
       2 14 15 
      
       16 
       
        17 
        
         18 
         CatPhotoApp
19 
        
20 
        
         21 
         22 
        
23 
       
24 
       25 26 27 
       
        28 
        
         29 
         32 
        
33 
        
         34 
         37 
        
38 
        
         39 
         42 
        
43 
       
44 45 46 
       Things cats love:
47 
       
        48 
        cat nip
49 
        laser pointers
50 
        lasagna
51 
       
52 
       Top 3 things cats hate:
53 
       
        54 
        flea treatment
55 
        thunder
56 
        other cats
57 
       
58 
       
        59 
         Indoor60 
         Outdoor61 
         Loving62 
         Lazy63 
         Crazy64 
        65 
        66 
       
67

第十三关

第十四关:与上一关相同

1 
       2 14 15 
      
       16 
       
        17 
        
         18 
         CatPhotoApp
19 
        
20 
        
         21 
         22 
        
23 
       
24 
       25 26 27 28 
       
        29     
        
         30         
         34     
        
35     
        
         36         
         40     
        
41     
        
         42         
         46     
        
47 
       
48 49 50 
       Things cats love:
51 
       
        52 
        cat nip
53 
        laser pointers
54 
        lasagna
55 
       
56 
       Top 3 things cats hate:
57 
       
        58 
        flea treatment
59 
        thunder
60 
        other cats
61 
       
62 
       
        63 
         Indoor64 
         Outdoor65 
         Loving66 
         Lazy67 
         Crazy68 
        69 
        70 
       
71

第十四关

第十五关:给单选按钮添加div块组件

1 
       2 14 15 
      
       16 
       
        17 
        
         18 
         CatPhotoApp
19 
        
20 
        
         21 
         22 
        
23 
       
24 
       25 
       
        26 
        
         27 
         28 
        
29 
        
         30 
         31 
        
32 
        
         33 
         34 
        
35 
       
36 
       Things cats love:
37 
       
        38 
        cat nip
39 
        laser pointers
40 
        lasagna
41 
       
42 
       Top 3 things cats hate:
43 
       
        44 
        flea treatment
45 
        thunder
46 
        other cats
47 
       
48 49 50 51 
       
        52     53 
        54 
        
         55     
         
          56         
           Indoor57     
         
58     
         
          59         
           Outdoor60     
         
61 
        
62 
        63 64 
         Loving65 
         Lazy66 
         Crazy67 
        68 
        69 
       
70 71 72

第十五关

第十六关:给复选框加div块

1 
       2 15 16 
      
       17 
       
        18 
        
         19 
         CatPhotoApp
20 
        
21 
        
         22 
         23 
        
24 
       
25 
       26 
       
        27 
        
         28 
         29 
        
30 
        
         31 
         32 
        
33 
        
         34 
         35 
        
36 
       
37 
       Things cats love:
38 
       
        39 
        cat nip
40 
        laser pointers
41 
        lasagna
42 
       
43 
       Top 3 things cats hate:
44 
       
        45 
        flea treatment
46 
        thunder
47 
        other cats
48 
       
49 
       
        50 
        
         51 
         
          52 
           Indoor53 
         
54 
         
          55 
           Outdoor56 
         
57 
        
58 59 
        60 
        
         61     
         
          62         
           Loving63     
         
64     
         
          65         
           Lazy66     
         
67     
         
          68         
           Crazy69     
         
70 
        
71 
        72 73 
        74 
        75 
       
76

第十六关

第十七关:给文本框加表格控制属性,给提交按钮加图标

1 
       2 15 16 
      
       17 
       
        18 
        
         19 
         CatPhotoApp
20 
        
21 
        
         22 
         23 
        
24 
       
25 
       26 
       
        27 
        
         28 
         29 
        
30 
        
         31 
         32 
        
33 
        
         34 
         35 
        
36 
       
37 
       Things cats love:
38 
       
        39 
        cat nip
40 
        laser pointers
41 
        lasagna
42 
       
43 
       Top 3 things cats hate:
44 
       
        45 
        flea treatment
46 
        thunder
47 
        other cats
48 
       
49 50 51 
       
        52 
        
         53 
         
          54 
           Indoor55 
         
56 
         
          57 
           Outdoor58 
         
59 
        
60 
        
         61 
         
          62 
           Loving63 
         
64 
         
          65 
           Lazy66 
         
67 
         
          68 
           Crazy69 
         
70 
        
71 72 
        73     
        74     
        78 
        79 80 81 
       
82

第十七关

第十八关:输入框和提交按钮放到一个块组件里

1 
       2 15 16 
      
       17 
       
        18 
        
         19 
         CatPhotoApp
20 
        
21 
        
         22 
         23 
        
24 
       
25 
       26 
       
        27 
        
         28 
         29 
        
30 
        
         31 
         32 
        
33 
        
         34 
         35 
        
36 
       
37 
       Things cats love:
38 
       
        39 
        cat nip
40 
        laser pointers
41 
        lasagna
42 
       
43 
       Top 3 things cats hate:
44 
       
        45 
        flea treatment
46 
        thunder
47 
        other cats
48 
       
49 
       
        50 
        
         51 
         
          52 
           Indoor53 
         
54 
         
          55 
           Outdoor56 
         
57 
        
58 
        
         59 
         
          60 
           Loving61 
         
62 
         
          63 
           Lazy64 
         
65 
         
          66 
           Crazy67 
         
68 
        
69 70 
        71 
        
         72     
         
          73         
          74     
         
75     
         
          76         
          80     
         
81 
        
82 
        83 84 
       
85

第十八关

第十九关:开始做游乐场项目

jQuery Playground

第二十关:


         
      jQuery Playground

第二十一关:

1 
      
       2     
       jQuery Playground
3     
       
        4         5     
       
6

第二十一关

第二十二关:

1 
      
       2     
       jQuery Playground
3     
       
        4         
        
5         
        
6     
       
7

第二十二关

第二十三关:

1 
      
        2 
       jQuery Playground
 3 
       
         4     
        
          5         
         
 6     
        
 7     
        
          8         
         
 9     
        
10 
       
11

第二十三关

第二十四关:

1 
      
        2 
       jQuery Playground
 3 
       
         4 
        
          5 
         
           6     
           7     
           8     
           9 10 11 
         
12 
        
13 
        
         14 
         
          15     
          16     
          17     
          18 19 20 
         
21 
        
22 
       
23

第二十四关

第二十五关:

1 
      
        2 
       jQuery Playground
 3 
       
         4 
        
          5 
         
           6 
           7 
           8 
           9 
         
10 
        
11 
        
         12 
         
          13 
          14 
          15 
          16 
         
17 
        
18 
       
19

第二十五关

第二十六关:

1 
      
        2 
       jQuery Playground
 3 
       
         4 
        
          5 
         
           6 
           7 
           8 
           9 
         
10 
        
11 
        
         12 
         
          13 
          14 
          15 
          16 
         
17 
        
18 
       
19

第二十六关

第二十七关:

1 
      
        2 
       jQuery Playground
 3 
       
         4 
        
          5 
         
           6 
           7 
           8 
           9 
         
10 
        
11 
        
         12 
         
          13 
          14 
          15 
          16 
         
17 
        
18 
       
19

第二十七关

第二十八关:

1 
      
        2 
       jQuery Playground
 3 
       
         4 
        
          5 
         #left-well
 6 
         
           7 
           8 
           9 
          10 
         
11 
        
12 
        
         13 
         #right-well
14 
         
          15 
          16 
          17 
          18 
         
19 
        
20 
       
21

第二十八关

第二十九关:

1 
      
        2 
       jQuery Playground
 3 
       
         4 
        
          5 
         #left-well
 6 
         
           7 
           8 
           9 
          10 
         
11 
        
12 
        
         13 
         #right-well
14 
         
          15 
          16 
          17 
          18 
         
19 
        
20 
       
21

第二十九关

第三十关:

1 
      
        2 
       jQuery Playground
 3 
       
         4 
        
          5 
         #left-well
 6 
         
           7 
           8 
           9 
          10 
         
11 
        
12 
        
         13 
         #right-well
14 
         
          15 
          16 
          17 
          18 
         
19 
        
20 
       
21