該闖關內容與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>
第三十一關:寫注釋