zoukankan      html  css  js  c++  java

  • 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>
    第三十关

    第三十一关:写注释
  • 相关阅读:
    模板 无源汇上下界可行流 loj115
    ICPC2018JiaozuoE Resistors in Parallel 高精度 数论
    hdu 2255 奔小康赚大钱 最佳匹配 KM算法
    ICPC2018Beijing 现场赛D Frog and Portal 构造
    codeforce 1175E Minimal Segment Cover ST表 倍增思想
    ICPC2018Jiaozuo 现场赛H Can You Solve the Harder Problem? 后缀数组 树上差分 ST表 口胡题解
    luogu P1966 火柴排队 树状数组 逆序对 离散化
    luogu P1970 花匠 贪心
    luogu P1967 货车运输 最大生成树 倍增LCA
    luogu P1315 观光公交 贪心
  • 原文地址：https://www.cnblogs.com/edward-life/p/10764087.html
Copyright © 2011-2022 走看看