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