该闯关内容与JS闯关衔接.
每一题的答案均在注释处,
第一关:把所有的HTML内容放在一个包含有container-fluid的class名称的div下(注意,是所有的HTML内容,style标签属于CSS,为了代码可读性尽量不要把style标签内容放在div内,需要添加代码的地方已经用注释标注出来了)
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
第二关:在示例图片下方再添加一张图片,并使之适应设备屏幕宽度
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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的标题文字居中
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
第四关:在大的猫咪图片下添加指定要求的按钮,按钮默认长度与按钮文本相同
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
第五关:为按钮添加新的属性使按钮长度适应屏幕
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
第六关:为按钮添加新属性
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
第七关:添加新按钮,要符合要求
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
第八关:添加新按钮
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
第九关:为按钮设置外框,方便进行按钮布局
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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元素中如果有引用该样式的元素应该也删掉该样式
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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标签,设置样式
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
第十二关:图片个标题合并到一个块区域
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
第十三关:给按钮添加图标
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
第十四关:与上一关相同
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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块组件
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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块
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
第十七关:给文本框加表格控制属性,给提交按钮加图标
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
第十八关:输入框和提交按钮放到一个块组件里
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
第二十一关:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <div class="container-fluid"> 2 <h3 class="text-primary text-center">jQuery Playground</h3> 3 <div class="row"> 4 5 </div> 6 </div>
第二十二关:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
第二十三关:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
第二十四关:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
第二十五关:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
第二十六关:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
第二十七关:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
第二十八关:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
第二十九关:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
第三十关:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
第三十一关:写注释