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 
29 <div class="container-fluid">   
30     
31 
32 <h2 class="red-text">CatPhotoApph2>
33 
34 <p>Click here for <a href="#">cat photosa>.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 nipli>
41 <li>laser pointersli>
42 <li>lasagnali>
43 ul>
44 <p>Top 3 things cats hate:p>
45 <ol>
46 <li>flea treatmentli>
47 <li>thunderli>
48 <li>other catsli>
49 ol>
50 <form action="/submit-cat-photo">
51 <label><input type="radio" name="indoor-outdoor"> Indoorlabel>
52 <label><input type="radio" name="indoor-outdoor"> Outdoorlabel>
53 <label><input type="checkbox" name="personality"> Lovinglabel>
54 <label><input type="checkbox" name="personality"> Lazylabel>
55 <label><input type="checkbox" name="personality"> Crazylabel>
56 <input type="text" placeholder="cat photo URL" required>
57 <button type="submit">Submitbutton>
58 form>
59 
60 
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">CatPhotoApph2>
30 
31 <p>Click here for <a href="#">cat photosa>.p>
32 
33 <a href="#"><img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg">a>
34 
35 
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 nipli>
43 <li>laser pointersli>
44 <li>lasagnali>
45 ul>
46 <p>Top 3 things cats hate:p>
47 <ol>
48 <li>flea treatmentli>
49 <li>thunderli>
50 <li>other catsli>
51 ol>
52 <form action="/submit-cat-photo">
53 <label><input type="radio" name="indoor-outdoor"> Indoorlabel>
54 <label><input type="radio" name="indoor-outdoor"> Outdoorlabel>
55 <label><input type="checkbox" name="personality"> Lovinglabel>
56 <label><input type="checkbox" name="personality"> Lazylabel>
57 <label><input type="checkbox" name="personality"> Crazylabel>
58 <input type="text" placeholder="cat photo URL" required>
59 <button type="submit">Submitbutton>
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     
30 <h2 class="red-text text-center">CatPhotoApph2>
31 
32 
33 <p>Click here for <a href="#">cat photosa>.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 nipli>
41 <li>laser pointersli>
42 <li>lasagnali>
43 ul>
44 <p>Top 3 things cats hate:p>
45 <ol>
46 <li>flea treatmentli>
47 <li>thunderli>
48 <li>other catsli>
49 ol>
50 <form action="/submit-cat-photo">
51 <label><input type="radio" name="indoor-outdoor"> Indoorlabel>
52 <label><input type="radio" name="indoor-outdoor"> Outdoorlabel>
53 <label><input type="checkbox" name="personality"> Lovinglabel>
54 <label><input type="checkbox" name="personality"> Lazylabel>
55 <label><input type="checkbox" name="personality"> Crazylabel>
56 <input type="text" placeholder="cat photo URL" required>
57 <button type="submit">Submitbutton>
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">CatPhotoApph2>
30 
31 <p>Click here for <a href="#">cat photosa>.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 
39 <button class="btn">Likebutton>
40 
41 <p>Things cats love:p>
42 <ul>
43 <li>cat nipli>
44 <li>laser pointersli>
45 <li>lasagnali>
46 ul>
47 <p>Top 3 things cats hate:p>
48 <ol>
49 <li>flea treatmentli>
50 <li>thunderli>
51 <li>other catsli>
52 ol>
53 <form action="/submit-cat-photo">
54 <label><input type="radio" name="indoor-outdoor"> Indoorlabel>
55 <label><input type="radio" name="indoor-outdoor"> Outdoorlabel>
56 <label><input type="checkbox" name="personality"> Lovinglabel>
57 <label><input type="checkbox" name="personality"> Lazylabel>
58 <label><input type="checkbox" name="personality"> Crazylabel>
59 <input type="text" placeholder="cat photo URL" required>
60 <button type="submit">Submitbutton>
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">CatPhotoApph2>
30 
31 <p>Click here for <a href="#">cat photosa>.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">Likebutton>
39 
40 
41 <p>Things cats love:p>
42 <ul>
43 <li>cat nipli>
44 <li>laser pointersli>
45 <li>lasagnali>
46 ul>
47 <p>Top 3 things cats hate:p>
48 <ol>
49 <li>flea treatmentli>
50 <li>thunderli>
51 <li>other catsli>
52 ol>
53 <form action="/submit-cat-photo">
54 <label><input type="radio" name="indoor-outdoor"> Indoorlabel>
55 <label><input type="radio" name="indoor-outdoor"> Outdoorlabel>
56 <label><input type="checkbox" name="personality"> Lovinglabel>
57 <label><input type="checkbox" name="personality"> Lazylabel>
58 <label><input type="checkbox" name="personality"> Crazylabel>
59 <input type="text" placeholder="cat photo URL" required>
60 <button type="submit">Submitbutton>
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">CatPhotoApph2>
30 
31 <p>Click here for <a href="#">cat photosa>.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">Likebutton>
39 
40 
41 <p>Things cats love:p>
42 <ul>
43 <li>cat nipli>
44 <li>laser pointersli>
45 <li>lasagnali>
46 ul>
47 <p>Top 3 things cats hate:p>
48 <ol>
49 <li>flea treatmentli>
50 <li>thunderli>
51 <li>other catsli>
52 ol>
53 <form action="/submit-cat-photo">
54 <label><input type="radio" name="indoor-outdoor"> Indoorlabel>
55 <label><input type="radio" name="indoor-outdoor"> Outdoorlabel>
56 <label><input type="checkbox" name="personality"> Lovinglabel>
57 <label><input type="checkbox" name="personality"> Lazylabel>
58 <label><input type="checkbox" name="personality"> Crazylabel>
59 <input type="text" placeholder="cat photo URL" required>
60 <button type="submit">Submitbutton>
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">CatPhotoApph2>
30 
31 <p>Click here for <a href="#">cat photosa>.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">Likebutton>
39 
40 <button class="btn btn-block btn-info">Infobutton>
41 
42 
43 <p>Things cats love:p>
44 <ul>
45 <li>cat nipli>
46 <li>laser pointersli>
47 <li>lasagnali>
48 ul>
49 <p>Top 3 things cats hate:p>
50 <ol>
51 <li>flea treatmentli>
52 <li>thunderli>
53 <li>other catsli>
54 ol>
55 <form action="/submit-cat-photo">
56 <label><input type="radio" name="indoor-outdoor"> Indoorlabel>
57 <label><input type="radio" name="indoor-outdoor"> Outdoorlabel>
58 <label><input type="checkbox" name="personality"> Lovinglabel>
59 <label><input type="checkbox" name="personality"> Lazylabel>
60 <label><input type="checkbox" name="personality"> Crazylabel>
61 <input type="text" placeholder="cat photo URL" required>
62 <button type="submit">Submitbutton>
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">CatPhotoApph2>
30 
31 <p>Click here for <a href="#">cat photosa>.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">Likebutton>
39 <button class="btn btn-block btn-info">Infobutton>
40 
41 <button class="btn btn-block btn-danger">Deletebutton>
42 
43 
44 <p>Things cats love:p>
45 <ul>
46 <li>cat nipli>
47 <li>laser pointersli>
48 <li>lasagnali>
49 ul>
50 <p>Top 3 things cats hate:p>
51 <ol>
52 <li>flea treatmentli>
53 <li>thunderli>
54 <li>other catsli>
55 ol>
56 <form action="/submit-cat-photo">
57 <label><input type="radio" name="indoor-outdoor"> Indoorlabel>
58 <label><input type="radio" name="indoor-outdoor"> Outdoorlabel>
59 <label><input type="checkbox" name="personality"> Lovinglabel>
60 <label><input type="checkbox" name="personality"> Lazylabel>
61 <label><input type="checkbox" name="personality"> Crazylabel>
62 <input type="text" placeholder="cat photo URL" required>
63 <button type="submit">Submitbutton>
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">CatPhotoApph2>
30 
31 <p>Click here for <a href="#">cat photosa>.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">Likebutton>
41     div>
42     <div class="col-xs-4">
43         <button class="btn btn-block btn-info">Infobutton>
44     div>
45     <div class="col-xs-4">
46         <button class="btn btn-block btn-danger">Deletebutton>
47     div>
48 div>
49 
50 <p>Things cats love:p>
51 <ul>
52 <li>cat nipli>
53 <li>laser pointersli>
54 <li>lasagnali>
55 ul>
56 <p>Top 3 things cats hate:p>
57 <ol>
58 <li>flea treatmentli>
59 <li>thunderli>
60 <li>other catsli>
61 ol>
62 <form action="/submit-cat-photo">
63 <label><input type="radio" name="indoor-outdoor"> Indoorlabel>
64 <label><input type="radio" name="indoor-outdoor"> Outdoorlabel>
65 <label><input type="checkbox" name="personality"> Lovinglabel>
66 <label><input type="checkbox" name="personality"> Lazylabel>
67 <label><input type="checkbox" name="personality"> Crazylabel>
68 <input type="text" placeholder="cat photo URL" required>
69 <button type="submit">Submitbutton>
70 form>
71 div>

第九关

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

 1 <link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 2 <style>
 3 
 4 
 5 h2 {
 6 font-family: Lobster, Monospace;
 7 }
 8 
 9 
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 
20 
21 style>
22 
23 <div class="container-fluid">
24     
25 
26 <h2 class="text-center text-primary">CatPhotoApph2>
27 
28 
29 
30 
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">Likebutton>
37 div>
38 <div class="col-xs-4">
39 <button class="btn btn-block btn-info">Infobutton>
40 div>
41 <div class="col-xs-4">
42 <button class="btn btn-block btn-danger">Deletebutton>
43 div>
44 div>
45 <p>Things cats love:p>
46 <ul>
47 <li>cat nipli>
48 <li>laser pointersli>
49 <li>lasagnali>
50 ul>
51 <p>Top 3 things cats hate:p>
52 <ol>
53 <li>flea treatmentli>
54 <li>thunderli>
55 <li>other catsli>
56 ol>
57 <form action="/submit-cat-photo">
58 <label><input type="radio" name="indoor-outdoor"> Indoorlabel>
59 <label><input type="radio" name="indoor-outdoor"> Outdoorlabel>
60 <label><input type="checkbox" name="personality"> Lovinglabel>
61 <label><input type="checkbox" name="personality"> Lazylabel>
62 <label><input type="checkbox" name="personality"> Crazylabel>
63 <input type="text" placeholder="cat photo URL" required>
64 <button type="submit">Submitbutton>
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">CatPhotoApph2>
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">Likebutton>
26 div>
27 <div class="col-xs-4">
28 <button class="btn btn-block btn-info">Infobutton>
29 div>
30 <div class="col-xs-4">
31 <button class="btn btn-block btn-danger">Deletebutton>
32 div>
33 div>
34 
35 
36 <p>Things cats <span class = "text-danger">love:span>p>
37 
38 
39 <ul>
40 <li>cat nipli>
41 <li>laser pointersli>
42 <li>lasagnali>
43 ul>
44 <p>Top 3 things cats hate:p>
45 <ol>
46 <li>flea treatmentli>
47 <li>thunderli>
48 <li>other catsli>
49 ol>
50 <form action="/submit-cat-photo">
51 <label><input type="radio" name="indoor-outdoor"> Indoorlabel>
52 <label><input type="radio" name="indoor-outdoor"> Outdoorlabel>
53 <label><input type="checkbox" name="personality"> Lovinglabel>
54 <label><input type="checkbox" name="personality"> Lazylabel>
55 <label><input type="checkbox" name="personality"> Crazylabel>
56 <input type="text" placeholder="cat photo URL" required>
57 <button type="submit">Submitbutton>
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">CatPhotoApph2>
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">Likebutton>
34 div>
35 <div class="col-xs-4">
36 <button class="btn btn-block btn-info">Infobutton>
37 div>
38 <div class="col-xs-4">
39 <button class="btn btn-block btn-danger">Deletebutton>
40 div>
41 div>
42 <p>Things cats <span class="text-danger">love:span>p>
43 <ul>
44 <li>cat nipli>
45 <li>laser pointersli>
46 <li>lasagnali>
47 ul>
48 <p>Top 3 things cats hate:p>
49 <ol>
50 <li>flea treatmentli>
51 <li>thunderli>
52 <li>other catsli>
53 ol>
54 <form action="/submit-cat-photo">
55 <label><input type="radio" name="indoor-outdoor"> Indoorlabel>
56 <label><input type="radio" name="indoor-outdoor"> Outdoorlabel>
57 <label><input type="checkbox" name="personality"> Lovinglabel>
58 <label><input type="checkbox" name="personality"> Lazylabel>
59 <label><input type="checkbox" name="personality"> Crazylabel>
60 <input type="text" placeholder="cat photo URL" required>
61 <button type="submit">Submitbutton>
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">CatPhotoApph2>
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>  
31     Likebutton>
32 div>
33 <div class="col-xs-4">
34 <button class="btn btn-block btn-info">
35     <i class="fa fa-info-circle">i> 
36     Infobutton>
37 div>
38 <div class="col-xs-4">
39 <button class="btn btn-block btn-danger">  
40     <i class="fa fa-trash">i>
41     Deletebutton>
42 div>
43 div>
44 
45 
46 <p>Things cats <span class="text-danger">love:span>p>
47 <ul>
48 <li>cat nipli>
49 <li>laser pointersli>
50 <li>lasagnali>
51 ul>
52 <p>Top 3 things cats hate:p>
53 <ol>
54 <li>flea treatmentli>
55 <li>thunderli>
56 <li>other catsli>
57 ol>
58 <form action="/submit-cat-photo">
59 <label><input type="radio" name="indoor-outdoor"> Indoorlabel>
60 <label><input type="radio" name="indoor-outdoor"> Outdoorlabel>
61 <label><input type="checkbox" name="personality"> Lovinglabel>
62 <label><input type="checkbox" name="personality"> Lazylabel>
63 <label><input type="checkbox" name="personality"> Crazylabel>
64 <input type="text" placeholder="cat photo URL" required>
65 <button type="submit">Submitbutton>
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">CatPhotoApph2>
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>   
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>  
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>  
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 nipli>
53 <li>laser pointersli>
54 <li>lasagnali>
55 ul>
56 <p>Top 3 things cats hate:p>
57 <ol>
58 <li>flea treatmentli>
59 <li>thunderli>
60 <li>other catsli>
61 ol>
62 <form action="/submit-cat-photo">
63 <label><input type="radio" name="indoor-outdoor"> Indoorlabel>
64 <label><input type="radio" name="indoor-outdoor"> Outdoorlabel>
65 <label><input type="checkbox" name="personality"> Lovinglabel>
66 <label><input type="checkbox" name="personality"> Lazylabel>
67 <label><input type="checkbox" name="personality"> Crazylabel>
68 <input type="text" placeholder="cat photo URL" required>
69 <button type="submit">Submitbutton>
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">CatPhotoApph2>
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> Likebutton>
28 div>
29 <div class="col-xs-4">
30 <button class="btn btn-block btn-info"><i class="fa fa-info-circle">i> Infobutton>
31 div>
32 <div class="col-xs-4">
33 <button class="btn btn-block btn-danger"><i class="fa fa-trash">i> Deletebutton>
34 div>
35 div>
36 <p>Things cats <span class="text-danger">love:span>p>
37 <ul>
38 <li>cat nipli>
39 <li>laser pointersli>
40 <li>lasagnali>
41 ul>
42 <p>Top 3 things cats hate:p>
43 <ol>
44 <li>flea treatmentli>
45 <li>thunderli>
46 <li>other catsli>
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"> Indoorlabel>
57     div>
58     <div class="col-xs-6">
59         <label><input type="radio" name="indoor-outdoor"> Outdoorlabel>
60     div>
61 div>
62 
63 
64 <label><input type="checkbox" name="personality"> Lovinglabel>
65 <label><input type="checkbox" name="personality"> Lazylabel>
66 <label><input type="checkbox" name="personality"> Crazylabel>
67 <input type="text" placeholder="cat photo URL" required>
68 <button type="submit">Submitbutton>
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">CatPhotoApph2>
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> Likebutton>
29 div>
30 <div class="col-xs-4">
31 <button class="btn btn-block btn-info"><i class="fa fa-info-circle">i> Infobutton>
32 div>
33 <div class="col-xs-4">
34 <button class="btn btn-block btn-danger"><i class="fa fa-trash">i> Deletebutton>
35 div>
36 div>
37 <p>Things cats <span class="text-danger">love:span>p>
38 <ul>
39 <li>cat nipli>
40 <li>laser pointersli>
41 <li>lasagnali>
42 ul>
43 <p>Top 3 things cats hate:p>
44 <ol>
45 <li>flea treatmentli>
46 <li>thunderli>
47 <li>other catsli>
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"> Indoorlabel>
53 div>
54 <div class="col-xs-6">
55 <label><input type="radio" name="indoor-outdoor"> Outdoorlabel>
56 div>
57 div>
58 
59 
60 <div class="row">
61     <div class="col-xs-4">
62         <label><input type="checkbox" name="personality"> Lovinglabel>
63     div>
64     <div class="col-xs-4">
65         <label><input type="checkbox" name="personality"> Lazylabel>
66     div>
67     <div class="col-xs-4">
68         <label><input type="checkbox" name="personality"> Crazylabel>
69     div>
70 div>
71 
72 
73 <input type="text" placeholder="cat photo URL" required>
74 <button type="submit">Submitbutton>
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">CatPhotoApph2>
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> Likebutton>
29 div>
30 <div class="col-xs-4">
31 <button class="btn btn-block btn-info"><i class="fa fa-info-circle">i> Infobutton>
32 div>
33 <div class="col-xs-4">
34 <button class="btn btn-block btn-danger"><i class="fa fa-trash">i> Deletebutton>
35 div>
36 div>
37 <p>Things cats <span class="text-danger">love:span>p>
38 <ul>
39 <li>cat nipli>
40 <li>laser pointersli>
41 <li>lasagnali>
42 ul>
43 <p>Top 3 things cats hate:p>
44 <ol>
45 <li>flea treatmentli>
46 <li>thunderli>
47 <li>other catsli>
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"> Indoorlabel>
55 div>
56 <div class="col-xs-6">
57 <label><input type="radio" name="indoor-outdoor"> Outdoorlabel>
58 div>
59 div>
60 <div class="row">
61 <div class="col-xs-4">
62 <label><input type="checkbox" name="personality"> Lovinglabel>
63 div>
64 <div class="col-xs-4">
65 <label><input type="checkbox" name="personality"> Lazylabel>
66 div>
67 <div class="col-xs-4">
68 <label><input type="checkbox" name="personality"> Crazylabel>
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">CatPhotoApph2>
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> Likebutton>
29 div>
30 <div class="col-xs-4">
31 <button class="btn btn-block btn-info"><i class="fa fa-info-circle">i> Infobutton>
32 div>
33 <div class="col-xs-4">
34 <button class="btn btn-block btn-danger"><i class="fa fa-trash">i> Deletebutton>
35 div>
36 div>
37 <p>Things cats <span class="text-danger">love:span>p>
38 <ul>
39 <li>cat nipli>
40 <li>laser pointersli>
41 <li>lasagnali>
42 ul>
43 <p>Top 3 things cats hate:p>
44 <ol>
45 <li>flea treatmentli>
46 <li>thunderli>
47 <li>other catsli>
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"> Indoorlabel>
53 div>
54 <div class="col-xs-6">
55 <label><input type="radio" name="indoor-outdoor"> Outdoorlabel>
56 div>
57 div>
58 <div class="row">
59 <div class="col-xs-4">
60 <label><input type="checkbox" name="personality"> Lovinglabel>
61 div>
62 <div class="col-xs-4">
63 <label><input type="checkbox" name="personality"> Lazylabel>
64 div>
65 <div class="col-xs-4">
66 <label><input type="checkbox" name="personality"> Crazylabel>
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 Playgroundh3>

第二十关:

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

第二十一关:

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

第二十一关

第二十二关:

1 <div class="container-fluid">
2     <h3 class="text-primary text-center">jQuery Playgroundh3>
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 Playgroundh3>
 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 Playgroundh3>
 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 Playgroundh3>
 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 Playgroundh3>
 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 Playgroundh3>
 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 Playgroundh3>
 3 <div class="row">
 4 <div class="col-xs-6">
 5 <h4>#left-wellh4>
 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-wellh4>
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 Playgroundh3>
 3 <div class="row">
 4 <div class="col-xs-6">
 5 <h4>#left-wellh4>
 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-wellh4>
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 Playgroundh3>
 3 <div class="row">
 4 <div class="col-xs-6">
 5 <h4>#left-wellh4>
 6 <div class="well" id="left-well">
 7 <button class="btn btn-default target" id="target1">#target1button>
 8 <button class="btn btn-default target" id="target2">#target2button>
 9 <button class="btn btn-default target" id="target3">#target3button>
10 div>
11 div>
12 <div class="col-xs-6">
13 <h4>#right-wellh4>
14 <div class="well" id="right-well">
15 <button class="btn btn-default target" id="target4">#target4button>
16 <button class="btn btn-default target" id="target5">#target5button>
17 <button class="btn btn-default target" id="target6">#target6button>
18 div>
19 div>
20 div>
21 div>

第三十关

第三十一关:写注释

 

转载于:https://www.cnblogs.com/edward-life/p/10764087.html