该闯关内容与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>