W3CSchool闯关笔记(Bootstrap)

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

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

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

 1 <link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 2 <style>
 3 .red-text {
 4 color: red;
 5 }
 6 
 7 h2 {
 8 font-family: Lobster, Monospace;
 9 }
10 
11 p {
12 font-size: 16px;
13 font-family: Monospace;
14 }
15 
16 .thick-green-border {
17 border-color: green;
18 border-width: 10px;
19 border-style: solid;
20 border-radius: 50%;
21 }
22 
23 .smaller-image {
24 width: 100px;
25 }
26 </style>
27 
28 <!--这里是div起始标签-->
29 <div class="container-fluid">   
30     
31 
32 <h2 class="red-text">CatPhotoApp</h2>
33 
34 <p>Click here for <a href="#">cat photos</a>.</p>
35 
36 <a href="#"><img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a>
37 
38 <p>Things cats love:</p>
39 <ul>
40 <li>cat nip</li>
41 <li>laser pointers</li>
42 <li>lasagna</li>
43 </ul>
44 <p>Top 3 things cats hate:</p>
45 <ol>
46 <li>flea treatment</li>
47 <li>thunder</li>
48 <li>other cats</li>
49 </ol>
50 <form action="/submit-cat-photo">
51 <label><input type="radio" name="indoor-outdoor"> Indoor</label>
52 <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
53 <label><input type="checkbox" name="personality"> Loving</label>
54 <label><input type="checkbox" name="personality"> Lazy</label>
55 <label><input type="checkbox" name="personality"> Crazy</label>
56 <input type="text" placeholder="cat photo URL" required>
57 <button type="submit">Submit</button>
58 </form>
59 
60 <!--这里是div闭合标签-->
61 </div>

第一关

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

 1 <link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 2 <style>
 3 .red-text {
 4 color: red;
 5 }
 6 
 7 h2 {
 8 font-family: Lobster, Monospace;
 9 }
10 
11 p {
12 font-size: 16px;
13 font-family: Monospace;
14 }
15 
16 .thick-green-border {
17 border-color: green;
18 border-width: 10px;
19 border-style: solid;
20 border-radius: 50%;
21 }
22 
23 .smaller-image {
24 width: 100px;
25 }
26 </style>
27 
28 <div class="container-fluid">
29 <h2 class="red-text">CatPhotoApp</h2>
30 
31 <p>Click here for <a href="#">cat photos</a>.</p>
32 
33 <a href="#"><img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a>
34 
35 <!--下面的是添加图片并设置class属性的语句-->
36 <a herf="#"><img class="img-responsive" src="/statics/codecamp/images/running-cat.jpg"></a>
37 
38 
39 
40 <p>Things cats love:</p>
41 <ul>
42 <li>cat nip</li>
43 <li>laser pointers</li>
44 <li>lasagna</li>
45 </ul>
46 <p>Top 3 things cats hate:</p>
47 <ol>
48 <li>flea treatment</li>
49 <li>thunder</li>
50 <li>other cats</li>
51 </ol>
52 <form action="/submit-cat-photo">
53 <label><input type="radio" name="indoor-outdoor"> Indoor</label>
54 <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
55 <label><input type="checkbox" name="personality"> Loving</label>
56 <label><input type="checkbox" name="personality"> Lazy</label>
57 <label><input type="checkbox" name="personality"> Crazy</label>
58 <input type="text" placeholder="cat photo URL" required>
59 <button type="submit">Submit</button>
60 </form>
61 </div>

第二关

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

 1 <link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 2 <style>
 3 .red-text {
 4 color: red;
 5 }
 6 
 7 h2 {
 8 font-family: Lobster, Monospace;
 9 }
10 
11 p {
12 font-size: 16px;
13 font-family: Monospace;
14 }
15 
16 .thick-green-border {
17 border-color: green;
18 border-width: 10px;
19 border-style: solid;
20 border-radius: 50%;
21 }
22 
23 .smaller-image {
24 width: 100px;
25 }
26 </style>
27 
28 <div class="container-fluid">
29     <!--在下面语句的class中添加text-center即可-->
30 <h2 class="red-text text-center">CatPhotoApp</h2>
31 
32 
33 <p>Click here for <a href="#">cat photos</a>.</p>
34 
35 <a href="#"><img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a>
36 
37 <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">
38 <p>Things cats love:</p>
39 <ul>
40 <li>cat nip</li>
41 <li>laser pointers</li>
42 <li>lasagna</li>
43 </ul>
44 <p>Top 3 things cats hate:</p>
45 <ol>
46 <li>flea treatment</li>
47 <li>thunder</li>
48 <li>other cats</li>
49 </ol>
50 <form action="/submit-cat-photo">
51 <label><input type="radio" name="indoor-outdoor"> Indoor</label>
52 <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
53 <label><input type="checkbox" name="personality"> Loving</label>
54 <label><input type="checkbox" name="personality"> Lazy</label>
55 <label><input type="checkbox" name="personality"> Crazy</label>
56 <input type="text" placeholder="cat photo URL" required>
57 <button type="submit">Submit</button>
58 </form>
59 </div>

第三关

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

 1 <link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 2 <style>
 3 .red-text {
 4 color: red;
 5 }
 6 
 7 h2 {
 8 font-family: Lobster, Monospace;
 9 }
10 
11 p {
12 font-size: 16px;
13 font-family: Monospace;
14 }
15 
16 .thick-green-border {
17 border-color: green;
18 border-width: 10px;
19 border-style: solid;
20 border-radius: 50%;
21 }
22 
23 .smaller-image {
24 width: 100px;
25 }
26 </style>
27 
28 <div class="container-fluid">
29 <h2 class="red-text text-center">CatPhotoApp</h2>
30 
31 <p>Click here for <a href="#">cat photos</a>.</p>
32 
33 <a href="#"><img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a>
34 
35 <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">
36 
37 
38 <!--下面这行添加按钮,别忘了按钮文本为'Like'-->
39 <button class="btn">Like</button>
40 
41 <p>Things cats love:</p>
42 <ul>
43 <li>cat nip</li>
44 <li>laser pointers</li>
45 <li>lasagna</li>
46 </ul>
47 <p>Top 3 things cats hate:</p>
48 <ol>
49 <li>flea treatment</li>
50 <li>thunder</li>
51 <li>other cats</li>
52 </ol>
53 <form action="/submit-cat-photo">
54 <label><input type="radio" name="indoor-outdoor"> Indoor</label>
55 <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
56 <label><input type="checkbox" name="personality"> Loving</label>
57 <label><input type="checkbox" name="personality"> Lazy</label>
58 <label><input type="checkbox" name="personality"> Crazy</label>
59 <input type="text" placeholder="cat photo URL" required>
60 <button type="submit">Submit</button>
61 </form>
62 </div>

第四关

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

 1 <link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 2 <style>
 3 .red-text {
 4 color: red;
 5 }
 6 
 7 h2 {
 8 font-family: Lobster, Monospace;
 9 }
10 
11 p {
12 font-size: 16px;
13 font-family: Monospace;
14 }
15 
16 .thick-green-border {
17 border-color: green;
18 border-width: 10px;
19 border-style: solid;
20 border-radius: 50%;
21 }
22 
23 .smaller-image {
24 width: 100px;
25 }
26 </style>
27 
28 <div class="container-fluid">
29 <h2 class="red-text text-center">CatPhotoApp</h2>
30 
31 <p>Click here for <a href="#">cat photos</a>.</p>
32 
33 <a href="#"><img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a>
34 
35 <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">
36 
37 <!--在btn属性后加空格,然后加入btn-block属性即可-->
38 <button class="btn btn-block">Like</button>
39 
40 
41 <p>Things cats love:</p>
42 <ul>
43 <li>cat nip</li>
44 <li>laser pointers</li>
45 <li>lasagna</li>
46 </ul>
47 <p>Top 3 things cats hate:</p>
48 <ol>
49 <li>flea treatment</li>
50 <li>thunder</li>
51 <li>other cats</li>
52 </ol>
53 <form action="/submit-cat-photo">
54 <label><input type="radio" name="indoor-outdoor"> Indoor</label>
55 <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
56 <label><input type="checkbox" name="personality"> Loving</label>
57 <label><input type="checkbox" name="personality"> Lazy</label>
58 <label><input type="checkbox" name="personality"> Crazy</label>
59 <input type="text" placeholder="cat photo URL" required>
60 <button type="submit">Submit</button>
61 </form>
62 </div>

第五关

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

 1 <link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 2 <style>
 3 .red-text {
 4 color: red;
 5 }
 6 
 7 h2 {
 8 font-family: Lobster, Monospace;
 9 }
10 
11 p {
12 font-size: 16px;
13 font-family: Monospace;
14 }
15 
16 .thick-green-border {
17 border-color: green;
18 border-width: 10px;
19 border-style: solid;
20 border-radius: 50%;
21 }
22 
23 .smaller-image {
24 width: 100px;
25 }
26 </style>
27 
28 <div class="container-fluid">
29 <h2 class="red-text text-center">CatPhotoApp</h2>
30 
31 <p>Click here for <a href="#">cat photos</a>.</p>
32 
33 <a href="#"><img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a>
34 
35 <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">
36 
37 <!--遇上一题几乎相同-->
38 <button class="btn btn-block btn-primary">Like</button>
39 
40 
41 <p>Things cats love:</p>
42 <ul>
43 <li>cat nip</li>
44 <li>laser pointers</li>
45 <li>lasagna</li>
46 </ul>
47 <p>Top 3 things cats hate:</p>
48 <ol>
49 <li>flea treatment</li>
50 <li>thunder</li>
51 <li>other cats</li>
52 </ol>
53 <form action="/submit-cat-photo">
54 <label><input type="radio" name="indoor-outdoor"> Indoor</label>
55 <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
56 <label><input type="checkbox" name="personality"> Loving</label>
57 <label><input type="checkbox" name="personality"> Lazy</label>
58 <label><input type="checkbox" name="personality"> Crazy</label>
59 <input type="text" placeholder="cat photo URL" required>
60 <button type="submit">Submit</button>
61 </form>
62 </div>

第六关

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

 1 <link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 2 <style>
 3 .red-text {
 4 color: red;
 5 }
 6 
 7 h2 {
 8 font-family: Lobster, Monospace;
 9 }
10 
11 p {
12 font-size: 16px;
13 font-family: Monospace;
14 }
15 
16 .thick-green-border {
17 border-color: green;
18 border-width: 10px;
19 border-style: solid;
20 border-radius: 50%;
21 }
22 
23 .smaller-image {
24 width: 100px;
25 }
26 </style>
27 
28 <div class="container-fluid">
29 <h2 class="red-text text-center">CatPhotoApp</h2>
30 
31 <p>Click here for <a href="#">cat photos</a>.</p>
32 
33 <a href="#"><img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a>
34 
35 <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">
36 
37 
38 <button class="btn btn-block btn-primary">Like</button>
39 <!--添加的新按钮在下面-->
40 <button class="btn btn-block btn-info">Info</button>
41 
42 
43 <p>Things cats love:</p>
44 <ul>
45 <li>cat nip</li>
46 <li>laser pointers</li>
47 <li>lasagna</li>
48 </ul>
49 <p>Top 3 things cats hate:</p>
50 <ol>
51 <li>flea treatment</li>
52 <li>thunder</li>
53 <li>other cats</li>
54 </ol>
55 <form action="/submit-cat-photo">
56 <label><input type="radio" name="indoor-outdoor"> Indoor</label>
57 <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
58 <label><input type="checkbox" name="personality"> Loving</label>
59 <label><input type="checkbox" name="personality"> Lazy</label>
60 <label><input type="checkbox" name="personality"> Crazy</label>
61 <input type="text" placeholder="cat photo URL" required>
62 <button type="submit">Submit</button>
63 </form>
64 </div>

第七关

第八关:添加新按钮

 1 <link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 2 <style>
 3 .red-text {
 4 color: red;
 5 }
 6 
 7 h2 {
 8 font-family: Lobster, Monospace;
 9 }
10 
11 p {
12 font-size: 16px;
13 font-family: Monospace;
14 }
15 
16 .thick-green-border {
17 border-color: green;
18 border-width: 10px;
19 border-style: solid;
20 border-radius: 50%;
21 }
22 
23 .smaller-image {
24 width: 100px;
25 }
26 </style>
27 
28 <div class="container-fluid">
29 <h2 class="red-text text-center">CatPhotoApp</h2>
30 
31 <p>Click here for <a href="#">cat photos</a>.</p>
32 
33 <a href="#"><img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a>
34 
35 <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">
36 
37 
38 <button class="btn btn-block btn-primary">Like</button>
39 <button class="btn btn-block btn-info">Info</button>
40 <!--添加的新按钮在这儿-->
41 <button class="btn btn-block btn-danger">Delete</button>
42 
43 
44 <p>Things cats love:</p>
45 <ul>
46 <li>cat nip</li>
47 <li>laser pointers</li>
48 <li>lasagna</li>
49 </ul>
50 <p>Top 3 things cats hate:</p>
51 <ol>
52 <li>flea treatment</li>
53 <li>thunder</li>
54 <li>other cats</li>
55 </ol>
56 <form action="/submit-cat-photo">
57 <label><input type="radio" name="indoor-outdoor"> Indoor</label>
58 <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
59 <label><input type="checkbox" name="personality"> Loving</label>
60 <label><input type="checkbox" name="personality"> Lazy</label>
61 <label><input type="checkbox" name="personality"> Crazy</label>
62 <input type="text" placeholder="cat photo URL" required>
63 <button type="submit">Submit</button>
64 </form>
65 </div>

第八关

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

 1 <link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 2 <style>
 3 .red-text {
 4 color: red;
 5 }
 6 
 7 h2 {
 8 font-family: Lobster, Monospace;
 9 }
10 
11 p {
12 font-size: 16px;
13 font-family: Monospace;
14 }
15 
16 .thick-green-border {
17 border-color: green;
18 border-width: 10px;
19 border-style: solid;
20 border-radius: 50%;
21 }
22 
23 .smaller-image {
24 width: 100px;
25 }
26 </style>
27 
28 <div class="container-fluid">
29 <h2 class="red-text text-center">CatPhotoApp</h2>
30 
31 <p>Click here for <a href="#">cat photos</a>.</p>
32 
33 <a href="#"><img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a>
34 
35 <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">
36 
37 <!--添加的代码在下面-->
38 <div class="row">
39     <div class="col-xs-4">
40         <button class="btn btn-block btn-primary">Like</button>
41     </div>
42     <div class="col-xs-4">
43         <button class="btn btn-block btn-info">Info</button>
44     </div>
45     <div class="col-xs-4">
46         <button class="btn btn-block btn-danger">Delete</button>
47     </div>
48 </div>
49 
50 <p>Things cats love:</p>
51 <ul>
52 <li>cat nip</li>
53 <li>laser pointers</li>
54 <li>lasagna</li>
55 </ul>
56 <p>Top 3 things cats hate:</p>
57 <ol>
58 <li>flea treatment</li>
59 <li>thunder</li>
60 <li>other cats</li>
61 </ol>
62 <form action="/submit-cat-photo">
63 <label><input type="radio" name="indoor-outdoor"> Indoor</label>
64 <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
65 <label><input type="checkbox" name="personality"> Loving</label>
66 <label><input type="checkbox" name="personality"> Lazy</label>
67 <label><input type="checkbox" name="personality"> Crazy</label>
68 <input type="text" placeholder="cat photo URL" required>
69 <button type="submit">Submit</button>
70 </form>
71 </div>

第九关

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

 1 <link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 2 <style>
 3 <!--red-text删除-->
 4 
 5 h2 {
 6 font-family: Lobster, Monospace;
 7 }
 8 
 9 <!--p删除-->
10 
11 
12 .thick-green-border {
13 border-color: green;
14 border-width: 10px;
15 border-style: solid;
16 border-radius: 50%;
17 }
18 
19 <!--smaller-image删除-->
20 
21 </style>
22 
23 <div class="container-fluid">
24     
25 <!--下面的h2中的red-text删除,并添加text-primary属性-->
26 <h2 class="text-center text-primary">CatPhotoApp</h2>
27 
28 <!--下面的p标签删除-->
29 
30 <!--下面的a标签里的image中的smaller-image属性删除,并添加img-responsive属性-->
31 <a href="#"><img class="img-responsive thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a>
32 
33 <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">
34 <div class="row">
35 <div class="col-xs-4">
36 <button class="btn btn-block btn-primary">Like</button>
37 </div>
38 <div class="col-xs-4">
39 <button class="btn btn-block btn-info">Info</button>
40 </div>
41 <div class="col-xs-4">
42 <button class="btn btn-block btn-danger">Delete</button>
43 </div>
44 </div>
45 <p>Things cats love:</p>
46 <ul>
47 <li>cat nip</li>
48 <li>laser pointers</li>
49 <li>lasagna</li>
50 </ul>
51 <p>Top 3 things cats hate:</p>
52 <ol>
53 <li>flea treatment</li>
54 <li>thunder</li>
55 <li>other cats</li>
56 </ol>
57 <form action="/submit-cat-photo">
58 <label><input type="radio" name="indoor-outdoor"> Indoor</label>
59 <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
60 <label><input type="checkbox" name="personality"> Loving</label>
61 <label><input type="checkbox" name="personality"> Lazy</label>
62 <label><input type="checkbox" name="personality"> Crazy</label>
63 <input type="text" placeholder="cat photo URL" required>
64 <button type="submit">Submit</button>
65 </form>
66 </div>

第十关

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

 1 <link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 2 <style>
 3 
 4 h2 {
 5 font-family: Lobster, Monospace;
 6 }
 7 
 8 .thick-green-border {
 9 border-color: green;
10 border-width: 10px;
11 border-style: solid;
12 border-radius: 50%;
13 }
14 
15 </style>
16 
17 <div class="container-fluid">
18 <h2 class="text-primary text-center">CatPhotoApp</h2>
19 
20 <a href="#"><img class="img-responsive thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a>
21 
22 <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">
23 <div class="row">
24 <div class="col-xs-4">
25 <button class="btn btn-block btn-primary">Like</button>
26 </div>
27 <div class="col-xs-4">
28 <button class="btn btn-block btn-info">Info</button>
29 </div>
30 <div class="col-xs-4">
31 <button class="btn btn-block btn-danger">Delete</button>
32 </div>
33 </div>
34 
35 <!--修改的代码在这儿-->
36 <p>Things cats <span class = "text-danger">love:</span></p>
37 
38 
39 <ul>
40 <li>cat nip</li>
41 <li>laser pointers</li>
42 <li>lasagna</li>
43 </ul>
44 <p>Top 3 things cats hate:</p>
45 <ol>
46 <li>flea treatment</li>
47 <li>thunder</li>
48 <li>other cats</li>
49 </ol>
50 <form action="/submit-cat-photo">
51 <label><input type="radio" name="indoor-outdoor"> Indoor</label>
52 <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
53 <label><input type="checkbox" name="personality"> Loving</label>
54 <label><input type="checkbox" name="personality"> Lazy</label>
55 <label><input type="checkbox" name="personality"> Crazy</label>
56 <input type="text" placeholder="cat photo URL" required>
57 <button type="submit">Submit</button>
58 </form>
59 </div>

第十一关

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

 1 <link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 2 
 3 <style>
 4 h2 {
 5 font-family: Lobster, Monospace;
 6 }
 7 
 8 .thick-green-border {
 9 border-color: green;
10 border-width: 10px;
11 border-style: solid;
12 border-radius: 50%;
13 }
14 </style>
15 
16 <div class = "container-fluid">
17     
18 <!--要修改的代码在这儿开始-->
19 <div class = "row">
20     <div class="col-xs-8">
21         <h2 class = "text-primary text-center">CatPhotoApp</h2>
22     </div>
23     
24     <div class="col-xs-4">
25     <a href = "#"><img class = "img-responsive thick-green-border"  src = "/statics/codecamp/images/relaxing-cat.jpg"></a>
26     </div>
27 </div>
28 <!--要修改的代码在这儿结束-->
29 
30 <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">
31 <div class="row">
32 <div class="col-xs-4">
33 <button class="btn btn-block btn-primary">Like</button>
34 </div>
35 <div class="col-xs-4">
36 <button class="btn btn-block btn-info">Info</button>
37 </div>
38 <div class="col-xs-4">
39 <button class="btn btn-block btn-danger">Delete</button>
40 </div>
41 </div>
42 <p>Things cats <span class="text-danger">love:</span></p>
43 <ul>
44 <li>cat nip</li>
45 <li>laser pointers</li>
46 <li>lasagna</li>
47 </ul>
48 <p>Top 3 things cats hate:</p>
49 <ol>
50 <li>flea treatment</li>
51 <li>thunder</li>
52 <li>other cats</li>
53 </ol>
54 <form action="/submit-cat-photo">
55 <label><input type="radio" name="indoor-outdoor"> Indoor</label>
56 <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
57 <label><input type="checkbox" name="personality"> Loving</label>
58 <label><input type="checkbox" name="personality"> Lazy</label>
59 <label><input type="checkbox" name="personality"> Crazy</label>
60 <input type="text" placeholder="cat photo URL" required>
61 <button type="submit">Submit</button>
62 </form>
63 </div>

第十二关

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

 1 <link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 2 <style>
 3 h2 {
 4 font-family: Lobster, Monospace;
 5 }
 6 
 7 .thick-green-border {
 8 border-color: green;
 9 border-width: 10px;
10 border-style: solid;
11 border-radius: 50%;
12 }
13 </style>
14 
15 <div class="container-fluid">
16 <div class="row">
17 <div class="col-xs-8">
18 <h2 class="text-primary text-center">CatPhotoApp</h2>
19 </div>
20 <div class="col-xs-4">
21 <a href="#"><img class="img-responsive thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a>
22 </div>
23 </div>
24 <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">
25 
26 
27 <div class="row">
28 <div class="col-xs-4">
29 <button class="btn btn-block btn-primary">
30     <i class="fa fa-thumbs-up"></i>  <!--添加的i标签在这儿-->
31     Like</button>
32 </div>
33 <div class="col-xs-4">
34 <button class="btn btn-block btn-info">
35     <i class="fa fa-info-circle"></i> <!--添加的i标签在这儿-->
36     Info</button>
37 </div>
38 <div class="col-xs-4">
39 <button class="btn btn-block btn-danger">  <!--添加的i标签在这儿-->
40     <i class="fa fa-trash"></i>
41     Delete</button>
42 </div>
43 </div>
44 
45 
46 <p>Things cats <span class="text-danger">love:</span></p>
47 <ul>
48 <li>cat nip</li>
49 <li>laser pointers</li>
50 <li>lasagna</li>
51 </ul>
52 <p>Top 3 things cats hate:</p>
53 <ol>
54 <li>flea treatment</li>
55 <li>thunder</li>
56 <li>other cats</li>
57 </ol>
58 <form action="/submit-cat-photo">
59 <label><input type="radio" name="indoor-outdoor"> Indoor</label>
60 <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
61 <label><input type="checkbox" name="personality"> Loving</label>
62 <label><input type="checkbox" name="personality"> Lazy</label>
63 <label><input type="checkbox" name="personality"> Crazy</label>
64 <input type="text" placeholder="cat photo URL" required>
65 <button type="submit">Submit</button>
66 </form>
67 </div>

第十三关

第十四关:与上一关相同

 1 <link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 2 <style>
 3 h2 {
 4 font-family: Lobster, Monospace;
 5 }
 6 
 7 .thick-green-border {
 8 border-color: green;
 9 border-width: 10px;
10 border-style: solid;
11 border-radius: 50%;
12 }
13 </style>
14 
15 <div class="container-fluid">
16 <div class="row">
17 <div class="col-xs-8">
18 <h2 class="text-primary text-center">CatPhotoApp</h2>
19 </div>
20 <div class="col-xs-4">
21 <a href="#"><img class="img-responsive thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a>
22 </div>
23 </div>
24 <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">
25 
26 
27 
28 <div class="row">
29     <div class="col-xs-4">
30         <button class="btn btn-block btn-primary">
31             <i class="fa fa-thumbs-up"></i>   <!--添加的i标签在这儿-->
32             Like
33         </button>
34     </div>
35     <div class="col-xs-4">
36         <button class="btn btn-block btn-info">
37             <i class="fa fa-info-circle"></i>  <!--添加的i标签在这儿-->
38             Info
39         </button>
40     </div>
41     <div class="col-xs-4">
42         <button class="btn btn-block btn-danger">
43             <i class="fa fa-trash"></i>  <!--添加的i标签在这儿-->
44             Delete
45         </button>
46     </div>
47 </div>
48 
49 
50 <p>Things cats <span class="text-danger">love:</span></p>
51 <ul>
52 <li>cat nip</li>
53 <li>laser pointers</li>
54 <li>lasagna</li>
55 </ul>
56 <p>Top 3 things cats hate:</p>
57 <ol>
58 <li>flea treatment</li>
59 <li>thunder</li>
60 <li>other cats</li>
61 </ol>
62 <form action="/submit-cat-photo">
63 <label><input type="radio" name="indoor-outdoor"> Indoor</label>
64 <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
65 <label><input type="checkbox" name="personality"> Loving</label>
66 <label><input type="checkbox" name="personality"> Lazy</label>
67 <label><input type="checkbox" name="personality"> Crazy</label>
68 <input type="text" placeholder="cat photo URL" required>
69 <button type="submit">Submit</button>
70 </form>
71 </div>

第十四关

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

 1 <link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 2 <style>
 3 h2 {
 4 font-family: Lobster, Monospace;
 5 }
 6 
 7 .thick-green-border {
 8 border-color: green;
 9 border-width: 10px;
10 border-style: solid;
11 border-radius: 50%;
12 }
13 </style>
14 
15 <div class="container-fluid">
16 <div class="row">
17 <div class="col-xs-8">
18 <h2 class="text-primary text-center">CatPhotoApp</h2>
19 </div>
20 <div class="col-xs-4">
21 <a href="#"><img class="img-responsive thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a>
22 </div>
23 </div>
24 <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">
25 <div class="row">
26 <div class="col-xs-4">
27 <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
28 </div>
29 <div class="col-xs-4">
30 <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
31 </div>
32 <div class="col-xs-4">
33 <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
34 </div>
35 </div>
36 <p>Things cats <span class="text-danger">love:</span></p>
37 <ul>
38 <li>cat nip</li>
39 <li>laser pointers</li>
40 <li>lasagna</li>
41 </ul>
42 <p>Top 3 things cats hate:</p>
43 <ol>
44 <li>flea treatment</li>
45 <li>thunder</li>
46 <li>other cats</li>
47 </ol>
48 
49 
50 
51 <form action="/submit-cat-photo">
52     
53 <!--修改的代码从这里开始-->
54 <div class="row">
55     <div class="col-xs-6">
56         <label><input type="radio" name="indoor-outdoor"> Indoor</label>
57     </div>
58     <div class="col-xs-6">
59         <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
60     </div>
61 </div>
62 <!--修改的代码到这里结束-->
63 
64 <label><input type="checkbox" name="personality"> Loving</label>
65 <label><input type="checkbox" name="personality"> Lazy</label>
66 <label><input type="checkbox" name="personality"> Crazy</label>
67 <input type="text" placeholder="cat photo URL" required>
68 <button type="submit">Submit</button>
69 </form>
70 
71 
72 </div>

第十五关

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

 1 <link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 2 <style>
 3 h2 {
 4 font-family: Lobster, Monospace;
 5 }
 6 
 7 .thick-green-border {
 8 border-color: green;
 9 border-width: 10px;
10 border-style: solid;
11 border-radius: 50%;
12 }
13 
14 </style>
15 
16 <div class="container-fluid">
17 <div class="row">
18 <div class="col-xs-8">
19 <h2 class="text-primary text-center">CatPhotoApp</h2>
20 </div>
21 <div class="col-xs-4">
22 <a href="#"><img class="img-responsive thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a>
23 </div>
24 </div>
25 <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">
26 <div class="row">
27 <div class="col-xs-4">
28 <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
29 </div>
30 <div class="col-xs-4">
31 <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
32 </div>
33 <div class="col-xs-4">
34 <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
35 </div>
36 </div>
37 <p>Things cats <span class="text-danger">love:</span></p>
38 <ul>
39 <li>cat nip</li>
40 <li>laser pointers</li>
41 <li>lasagna</li>
42 </ul>
43 <p>Top 3 things cats hate:</p>
44 <ol>
45 <li>flea treatment</li>
46 <li>thunder</li>
47 <li>other cats</li>
48 </ol>
49 <form action="/submit-cat-photo">
50 <div class="row">
51 <div class="col-xs-6">
52 <label><input type="radio" name="indoor-outdoor"> Indoor</label>
53 </div>
54 <div class="col-xs-6">
55 <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
56 </div>
57 </div>
58 
59 <!--修改的代码从这里开始-->
60 <div class="row">
61     <div class="col-xs-4">
62         <label><input type="checkbox" name="personality"> Loving</label>
63     </div>
64     <div class="col-xs-4">
65         <label><input type="checkbox" name="personality"> Lazy</label>
66     </div>
67     <div class="col-xs-4">
68         <label><input type="checkbox" name="personality"> Crazy</label>
69     </div>
70 </div>
71 <!--修改的代码到这里结束-->
72 
73 <input type="text" placeholder="cat photo URL" required>
74 <button type="submit">Submit</button>
75 </form>
76 </div>

第十六关

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

 1 <link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 2 <style>
 3 h2 {
 4 font-family: Lobster, Monospace;
 5 }
 6 
 7 .thick-green-border {
 8 border-color: green;
 9 border-width: 10px;
10 border-style: solid;
11 border-radius: 50%;
12 }
13 
14 </style>
15 
16 <div class="container-fluid">
17 <div class="row">
18 <div class="col-xs-8">
19 <h2 class="text-primary text-center">CatPhotoApp</h2>
20 </div>
21 <div class="col-xs-4">
22 <a href="#"><img class="img-responsive thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a>
23 </div>
24 </div>
25 <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">
26 <div class="row">
27 <div class="col-xs-4">
28 <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
29 </div>
30 <div class="col-xs-4">
31 <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
32 </div>
33 <div class="col-xs-4">
34 <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
35 </div>
36 </div>
37 <p>Things cats <span class="text-danger">love:</span></p>
38 <ul>
39 <li>cat nip</li>
40 <li>laser pointers</li>
41 <li>lasagna</li>
42 </ul>
43 <p>Top 3 things cats hate:</p>
44 <ol>
45 <li>flea treatment</li>
46 <li>thunder</li>
47 <li>other cats</li>
48 </ol>
49 
50 
51 <form action="/submit-cat-photo">
52 <div class="row">
53 <div class="col-xs-6">
54 <label><input type="radio" name="indoor-outdoor"> Indoor</label>
55 </div>
56 <div class="col-xs-6">
57 <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
58 </div>
59 </div>
60 <div class="row">
61 <div class="col-xs-4">
62 <label><input type="checkbox" name="personality"> Loving</label>
63 </div>
64 <div class="col-xs-4">
65 <label><input type="checkbox" name="personality"> Lazy</label>
66 </div>
67 <div class="col-xs-4">
68 <label><input type="checkbox" name="personality"> Crazy</label>
69 </div>
70 </div>
71 
72 <!--修改的代码从这里开始-->
73     <input type="text" class="form-control" placeholder="cat photo URL" required>
74     <button type="submit" class="btn btn-primary">
75         <i class="fa fa-paper-plane"></i>
76         Submit
77     </button>
78 <!--修改的代码到这里结束-->
79 
80 
81 </form>
82 </div>

第十七关

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

 1 <link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 2 <style>
 3 h2 {
 4 font-family: Lobster, Monospace;
 5 }
 6 
 7 .thick-green-border {
 8 border-color: green;
 9 border-width: 10px;
10 border-style: solid;
11 border-radius: 50%;
12 }
13 
14 </style>
15 
16 <div class="container-fluid">
17 <div class="row">
18 <div class="col-xs-8">
19 <h2 class="text-primary text-center">CatPhotoApp</h2>
20 </div>
21 <div class="col-xs-4">
22 <a href="#"><img class="img-responsive thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a>
23 </div>
24 </div>
25 <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">
26 <div class="row">
27 <div class="col-xs-4">
28 <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
29 </div>
30 <div class="col-xs-4">
31 <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
32 </div>
33 <div class="col-xs-4">
34 <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
35 </div>
36 </div>
37 <p>Things cats <span class="text-danger">love:</span></p>
38 <ul>
39 <li>cat nip</li>
40 <li>laser pointers</li>
41 <li>lasagna</li>
42 </ul>
43 <p>Top 3 things cats hate:</p>
44 <ol>
45 <li>flea treatment</li>
46 <li>thunder</li>
47 <li>other cats</li>
48 </ol>
49 <form action="/submit-cat-photo">
50 <div class="row">
51 <div class="col-xs-6">
52 <label><input type="radio" name="indoor-outdoor"> Indoor</label>
53 </div>
54 <div class="col-xs-6">
55 <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
56 </div>
57 </div>
58 <div class="row">
59 <div class="col-xs-4">
60 <label><input type="checkbox" name="personality"> Loving</label>
61 </div>
62 <div class="col-xs-4">
63 <label><input type="checkbox" name="personality"> Lazy</label>
64 </div>
65 <div class="col-xs-4">
66 <label><input type="checkbox" name="personality"> Crazy</label>
67 </div>
68 </div>
69 
70 <!--修改的代码从这里开始-->
71 <div class="row">
72     <div class="col-xs-7">
73         <input type="text" class="form-control" placeholder="cat photo URL" required>
74     </div>
75     <div class="col-xs-5">
76         <button type="submit" class="btn btn-primary">
77             <i class="fa fa-paper-plane"></i> 
78             submit
79         </button>
80     </div>
81 </div>
82 <!--修改代码到这里结束-->
83 
84 </form>
85 </div>

第十八关

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

<h3 class="text-primary text-center">jQuery Playground</h3>

第二十关:

<div class="container-fluid">
    <h3 class="text-primary text-center">jQuery Playground</h3>
</div>

第二十一关:

1 <div class="container-fluid">
2     <h3 class="text-primary text-center">jQuery Playground</h3>
3     <div class="row">
4         
5     </div>
6 </div>

第二十一关

第二十二关:

1 <div class="container-fluid">
2     <h3 class="text-primary text-center">jQuery Playground</h3>
3     <div class="row">
4         <div class="col-xs-6"></div>
5         <div class="col-xs-6"></div>
6     </div>
7 </div>

第二十二关

第二十三关:

 1 <div class="container-fluid">
 2 <h3 class="text-primary text-center">jQuery Playground</h3>
 3 <div class="row">
 4     <div class="col-xs-6">
 5         <div class="well"></div>
 6     </div>
 7     <div class="col-xs-6">
 8         <div class="well"></div>
 9     </div>
10 </div>
11 </div>

第二十三关

第二十四关:

 1 <div class="container-fluid">
 2 <h3 class="text-primary text-center">jQuery Playground</h3>
 3 <div class="row">
 4 <div class="col-xs-6">
 5 <div class="well">
 6     <button></button>
 7     <button></button>
 8     <button></button>
 9 
10 
11 </div>
12 </div>
13 <div class="col-xs-6">
14 <div class="well">
15     <button></button>
16     <button></button>
17     <button></button>
18 
19 
20 </div>
21 </div>
22 </div>
23 </div>

第二十四关

第二十五关:

 1 <div class="container-fluid">
 2 <h3 class="text-primary text-center">jQuery Playground</h3>
 3 <div class="row">
 4 <div class="col-xs-6">
 5 <div class="well">
 6 <button class="btn btn-default"></button>
 7 <button class="btn btn-default"></button>
 8 <button class="btn btn-default"></button>
 9 </div>
10 </div>
11 <div class="col-xs-6">
12 <div class="well">
13 <button class="btn btn-default"></button>
14 <button class="btn btn-default"></button>
15 <button class="btn btn-default"></button>
16 </div>
17 </div>
18 </div>
19 </div>

第二十五关

第二十六关:

 1 <div class="container-fluid">
 2 <h3 class="text-primary text-center">jQuery Playground</h3>
 3 <div class="row">
 4 <div class="col-xs-6">
 5 <div class="well">
 6 <button class="btn btn-default target"></button>
 7 <button class="btn btn-default target"></button>
 8 <button class="btn btn-default target"></button>
 9 </div>
10 </div>
11 <div class="col-xs-6">
12 <div class="well">
13 <button class="btn btn-default target"></button>
14 <button class="btn btn-default target"></button>
15 <button class="btn btn-default target"></button>
16 </div>
17 </div>
18 </div>
19 </div>

第二十六关

第二十七关:

 1 <div class="container-fluid">
 2 <h3 class="text-primary text-center">jQuery Playground</h3>
 3 <div class="row">
 4 <div class="col-xs-6">
 5 <div class="well" id="left-well">
 6 <button class="btn btn-default target"></button>
 7 <button class="btn btn-default target"></button>
 8 <button class="btn btn-default target"></button>
 9 </div>
10 </div>
11 <div class="col-xs-6">
12 <div class="well" id="right-well">
13 <button class="btn btn-default target"></button>
14 <button class="btn btn-default target"></button>
15 <button class="btn btn-default target"></button>
16 </div>
17 </div>
18 </div>
19 </div>

第二十七关

第二十八关:

 1 <div class="container-fluid">
 2 <h3 class="text-primary text-center">jQuery Playground</h3>
 3 <div class="row">
 4 <div class="col-xs-6">
 5 <h4>#left-well</h4>
 6 <div class="well" id="left-well">
 7 <button class="btn btn-default target"></button>
 8 <button class="btn btn-default target"></button>
 9 <button class="btn btn-default target"></button>
10 </div>
11 </div>
12 <div class="col-xs-6">
13 <h4>#right-well</h4>
14 <div class="well" id="right-well">
15 <button class="btn btn-default target"></button>
16 <button class="btn btn-default target"></button>
17 <button class="btn btn-default target"></button>
18 </div>
19 </div>
20 </div>
21 </div>

第二十八关

第二十九关:

 1 <div class="container-fluid">
 2 <h3 class="text-primary text-center">jQuery Playground</h3>
 3 <div class="row">
 4 <div class="col-xs-6">
 5 <h4>#left-well</h4>
 6 <div class="well" id="left-well">
 7 <button id="target1" class="btn btn-default target"></button>
 8 <button id="target2" class="btn btn-default target"></button>
 9 <button id="target3" class="btn btn-default target"></button>
10 </div>
11 </div>
12 <div class="col-xs-6">
13 <h4>#right-well</h4>
14 <div class="well" id="right-well">
15 <button id="target4" class="btn btn-default target"></button>
16 <button id="target5" class="btn btn-default target"></button>
17 <button id="target6" class="btn btn-default target"></button>
18 </div>
19 </div>
20 </div>
21 </div>

第二十九关

第三十关:

 1 <div class="container-fluid">
 2 <h3 class="text-primary text-center">jQuery Playground</h3>
 3 <div class="row">
 4 <div class="col-xs-6">
 5 <h4>#left-well</h4>
 6 <div class="well" id="left-well">
 7 <button class="btn btn-default target" id="target1">#target1</button>
 8 <button class="btn btn-default target" id="target2">#target2</button>
 9 <button class="btn btn-default target" id="target3">#target3</button>
10 </div>
11 </div>
12 <div class="col-xs-6">
13 <h4>#right-well</h4>
14 <div class="well" id="right-well">
15 <button class="btn btn-default target" id="target4">#target4</button>
16 <button class="btn btn-default target" id="target5">#target5</button>
17 <button class="btn btn-default target" id="target6">#target6</button>
18 </div>
19 </div>
20 </div>
21 </div>

第三十关

第三十一关:写注释

 

来源：oschina

链接：https://my.oschina.net/u/4347688/blog/3561713