W3CSchool闯关笔记(Bootstrap)
该闯关内容与JS闯关衔接.
每一题的答案均在注释处,
第一关:把所有的HTML内容放在一个包含有container-fluid的class名称的div下(注意,是所有的HTML内容,style标签属于CSS,为了代码可读性尽量不要把style标签内容放在div内,需要添加代码的地方已经用注释标注出来了)
<link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
} h2 {
font-family: Lobster, Monospace;
} p {
font-size: 16px;
font-family: Monospace;
} .thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
} .smaller-image {
width: 100px;
}
</style> <!--这里是div起始标签-->
<div class="container-fluid"> <h2 class="red-text">CatPhotoApp</h2> <p>Click here for <a href="#">cat photos</a>.</p> <a href="#"><img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a> <p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form> <!--这里是div闭合标签-->
</div>
第一关
第二关:在示例图片下方再添加一张图片,并使之适应设备屏幕宽度
<link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
} h2 {
font-family: Lobster, Monospace;
} p {
font-size: 16px;
font-family: Monospace;
} .thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
} .smaller-image {
width: 100px;
}
</style> <div class="container-fluid">
<h2 class="red-text">CatPhotoApp</h2> <p>Click here for <a href="#">cat photos</a>.</p> <a href="#"><img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a> <!--下面的是添加图片并设置class属性的语句-->
<a herf="#"><img class="img-responsive" src="/statics/codecamp/images/running-cat.jpg"></a> <p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
第二关
第三关:使h2的标题文字居中
<link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
} h2 {
font-family: Lobster, Monospace;
} p {
font-size: 16px;
font-family: Monospace;
} .thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
} .smaller-image {
width: 100px;
}
</style> <div class="container-fluid">
<!--在下面语句的class中添加text-center即可-->
<h2 class="red-text text-center">CatPhotoApp</h2> <p>Click here for <a href="#">cat photos</a>.</p> <a href="#"><img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a> <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
第三关
第四关:在大的猫咪图片下添加指定要求的按钮,按钮默认长度与按钮文本相同
<link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
} h2 {
font-family: Lobster, Monospace;
} p {
font-size: 16px;
font-family: Monospace;
} .thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
} .smaller-image {
width: 100px;
}
</style> <div class="container-fluid">
<h2 class="red-text text-center">CatPhotoApp</h2> <p>Click here for <a href="#">cat photos</a>.</p> <a href="#"><img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a> <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive"> <!--下面这行添加按钮,别忘了按钮文本为'Like'-->
<button class="btn">Like</button> <p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
第四关
第五关:为按钮添加新的属性使按钮长度适应屏幕
<link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
} h2 {
font-family: Lobster, Monospace;
} p {
font-size: 16px;
font-family: Monospace;
} .thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
} .smaller-image {
width: 100px;
}
</style> <div class="container-fluid">
<h2 class="red-text text-center">CatPhotoApp</h2> <p>Click here for <a href="#">cat photos</a>.</p> <a href="#"><img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a> <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive"> <!--在btn属性后加空格,然后加入btn-block属性即可-->
<button class="btn btn-block">Like</button> <p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
第五关
第六关:为按钮添加新属性
<link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
} h2 {
font-family: Lobster, Monospace;
} p {
font-size: 16px;
font-family: Monospace;
} .thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
} .smaller-image {
width: 100px;
}
</style> <div class="container-fluid">
<h2 class="red-text text-center">CatPhotoApp</h2> <p>Click here for <a href="#">cat photos</a>.</p> <a href="#"><img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a> <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive"> <!--遇上一题几乎相同-->
<button class="btn btn-block btn-primary">Like</button> <p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
第六关
第七关:添加新按钮,要符合要求
<link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
} h2 {
font-family: Lobster, Monospace;
} p {
font-size: 16px;
font-family: Monospace;
} .thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
} .smaller-image {
width: 100px;
}
</style> <div class="container-fluid">
<h2 class="red-text text-center">CatPhotoApp</h2> <p>Click here for <a href="#">cat photos</a>.</p> <a href="#"><img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a> <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive"> <button class="btn btn-block btn-primary">Like</button>
<!--添加的新按钮在下面-->
<button class="btn btn-block btn-info">Info</button> <p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
第七关
第八关:添加新按钮
<link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
} h2 {
font-family: Lobster, Monospace;
} p {
font-size: 16px;
font-family: Monospace;
} .thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
} .smaller-image {
width: 100px;
}
</style> <div class="container-fluid">
<h2 class="red-text text-center">CatPhotoApp</h2> <p>Click here for <a href="#">cat photos</a>.</p> <a href="#"><img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a> <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive"> <button class="btn btn-block btn-primary">Like</button>
<button class="btn btn-block btn-info">Info</button>
<!--添加的新按钮在这儿-->
<button class="btn btn-block btn-danger">Delete</button> <p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
第八关
第九关:为按钮设置外框,方便进行按钮布局
<link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
} h2 {
font-family: Lobster, Monospace;
} p {
font-size: 16px;
font-family: Monospace;
} .thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
} .smaller-image {
width: 100px;
}
</style> <div class="container-fluid">
<h2 class="red-text text-center">CatPhotoApp</h2> <p>Click here for <a href="#">cat photos</a>.</p> <a href="#"><img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a> <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive"> <!--添加的代码在下面-->
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
</div> <p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
第九关
第十关:删除多余的没用的标签和样式,注意:CSS样式中删掉的,HTML元素中如果有引用该样式的元素应该也删掉该样式
<link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
<!--red-text删除--> h2 {
font-family: Lobster, Monospace;
} <!--p删除--> .thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
} <!--smaller-image删除--> </style> <div class="container-fluid"> <!--下面的h2中的red-text删除,并添加text-primary属性-->
<h2 class="text-center text-primary">CatPhotoApp</h2> <!--下面的p标签删除--> <!--下面的a标签里的image中的smaller-image属性删除,并添加img-responsive属性-->
<a href="#"><img class="img-responsive thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a> <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
</div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
第十关
第十一关:添加span标签,设置样式
<link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style> h2 {
font-family: Lobster, Monospace;
} .thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
} </style> <div class="container-fluid">
<h2 class="text-primary text-center">CatPhotoApp</h2> <a href="#"><img class="img-responsive thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a> <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
</div> <!--修改的代码在这儿-->
<p>Things cats <span class = "text-danger">love:</span></p> <ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
第十一关
第十二关:图片个标题合并到一个块区域
<link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style>
h2 {
font-family: Lobster, Monospace;
} .thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style> <div class = "container-fluid"> <!--要修改的代码在这儿开始-->
<div class = "row">
<div class="col-xs-8">
<h2 class = "text-primary text-center">CatPhotoApp</h2>
</div> <div class="col-xs-4">
<a href = "#"><img class = "img-responsive thick-green-border" src = "/statics/codecamp/images/relaxing-cat.jpg"></a>
</div>
</div>
<!--要修改的代码在这儿结束--> <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love:</span></p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
第十二关
第十三关:给按钮添加图标
<link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h2 {
font-family: Lobster, Monospace;
} .thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style> <div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2>
</div>
<div class="col-xs-4">
<a href="#"><img class="img-responsive thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a>
</div>
</div>
<img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive"> <div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary">
<i class="fa fa-thumbs-up"></i> <!--添加的i标签在这儿-->
Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">
<i class="fa fa-info-circle"></i> <!--添加的i标签在这儿-->
Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger"> <!--添加的i标签在这儿-->
<i class="fa fa-trash"></i>
Delete</button>
</div>
</div> <p>Things cats <span class="text-danger">love:</span></p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
第十三关
第十四关:与上一关相同
<link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h2 {
font-family: Lobster, Monospace;
} .thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style> <div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2>
</div>
<div class="col-xs-4">
<a href="#"><img class="img-responsive thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a>
</div>
</div>
<img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive"> <div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary">
<i class="fa fa-thumbs-up"></i> <!--添加的i标签在这儿-->
Like
</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">
<i class="fa fa-info-circle"></i> <!--添加的i标签在这儿-->
Info
</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">
<i class="fa fa-trash"></i> <!--添加的i标签在这儿-->
Delete
</button>
</div>
</div> <p>Things cats <span class="text-danger">love:</span></p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
第十四关
第十五关:给单选按钮添加div块组件
<link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h2 {
font-family: Lobster, Monospace;
} .thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style> <div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2>
</div>
<div class="col-xs-4">
<a href="#"><img class="img-responsive thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a>
</div>
</div>
<img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love:</span></p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol> <form action="/submit-cat-photo"> <!--修改的代码从这里开始-->
<div class="row">
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
</div>
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
</div>
</div>
<!--修改的代码到这里结束--> <label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form> </div>
第十五关
第十六关:给复选框加div块
<link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h2 {
font-family: Lobster, Monospace;
} .thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
} </style> <div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2>
</div>
<div class="col-xs-4">
<a href="#"><img class="img-responsive thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a>
</div>
</div>
<img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love:</span></p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<div class="row">
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
</div>
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
</div>
</div> <!--修改的代码从这里开始-->
<div class="row">
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Loving</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Lazy</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Crazy</label>
</div>
</div>
<!--修改的代码到这里结束--> <input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>
第十六关
第十七关:给文本框加表格控制属性,给提交按钮加图标
<link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h2 {
font-family: Lobster, Monospace;
} .thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
} </style> <div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2>
</div>
<div class="col-xs-4">
<a href="#"><img class="img-responsive thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a>
</div>
</div>
<img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love:</span></p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol> <form action="/submit-cat-photo">
<div class="row">
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
</div>
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Loving</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Lazy</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Crazy</label>
</div>
</div> <!--修改的代码从这里开始-->
<input type="text" class="form-control" placeholder="cat photo URL" required>
<button type="submit" class="btn btn-primary">
<i class="fa fa-paper-plane"></i>
Submit
</button>
<!--修改的代码到这里结束--> </form>
</div>
第十七关
第十八关:输入框和提交按钮放到一个块组件里
<link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h2 {
font-family: Lobster, Monospace;
} .thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
} </style> <div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2>
</div>
<div class="col-xs-4">
<a href="#"><img class="img-responsive thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a>
</div>
</div>
<img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love:</span></p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<div class="row">
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
</div>
<div class="col-xs-6">
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Loving</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Lazy</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Crazy</label>
</div>
</div> <!--修改的代码从这里开始-->
<div class="row">
<div class="col-xs-7">
<input type="text" class="form-control" placeholder="cat photo URL" required>
</div>
<div class="col-xs-5">
<button type="submit" class="btn btn-primary">
<i class="fa fa-paper-plane"></i>
submit
</button>
</div>
</div>
<!--修改代码到这里结束--> </form>
</div>
第十八关
第十九关:开始做游乐场项目
<h3 class="text-primary text-center">jQuery Playground</h3>
第二十关:
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
</div>
第二十一关:
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row"> </div>
</div>
第二十一关
第二十二关:
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
</div>
第二十二关
第二十三关:
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div class="well"></div>
</div>
<div class="col-xs-6">
<div class="well"></div>
</div>
</div>
</div>
第二十三关
第二十四关:
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div class="well">
<button></button>
<button></button>
<button></button> </div>
</div>
<div class="col-xs-6">
<div class="well">
<button></button>
<button></button>
<button></button> </div>
</div>
</div>
</div>
第二十四关
第二十五关:
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div class="well">
<button class="btn btn-default"></button>
<button class="btn btn-default"></button>
<button class="btn btn-default"></button>
</div>
</div>
<div class="col-xs-6">
<div class="well">
<button class="btn btn-default"></button>
<button class="btn btn-default"></button>
<button class="btn btn-default"></button>
</div>
</div>
</div>
</div>
第二十五关
第二十六关:
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div class="well">
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
<div class="col-xs-6">
<div class="well">
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
</div>
</div>
第二十六关
第二十七关:
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<div class="well" id="left-well">
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
<div class="col-xs-6">
<div class="well" id="right-well">
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
</div>
</div>
第二十七关
第二十八关:
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<h4>#left-well</h4>
<div class="well" id="left-well">
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
<div class="col-xs-6">
<h4>#right-well</h4>
<div class="well" id="right-well">
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
</div>
</div>
第二十八关
第二十九关:
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<h4>#left-well</h4>
<div class="well" id="left-well">
<button id="target1" class="btn btn-default target"></button>
<button id="target2" class="btn btn-default target"></button>
<button id="target3" class="btn btn-default target"></button>
</div>
</div>
<div class="col-xs-6">
<h4>#right-well</h4>
<div class="well" id="right-well">
<button id="target4" class="btn btn-default target"></button>
<button id="target5" class="btn btn-default target"></button>
<button id="target6" class="btn btn-default target"></button>
</div>
</div>
</div>
</div>
第二十九关
第三十关:
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<h4>#left-well</h4>
<div class="well" id="left-well">
<button class="btn btn-default target" id="target1">#target1</button>
<button class="btn btn-default target" id="target2">#target2</button>
<button class="btn btn-default target" id="target3">#target3</button>
</div>
</div>
<div class="col-xs-6">
<h4>#right-well</h4>
<div class="well" id="right-well">
<button class="btn btn-default target" id="target4">#target4</button>
<button class="btn btn-default target" id="target5">#target5</button>
<button class="btn btn-default target" id="target6">#target6</button>
</div>
</div>
</div>
</div>
第三十关
第三十一关:写注释
W3CSchool闯关笔记(Bootstrap)的更多相关文章
- W3CSchool闯关笔记(JQuery)
<script> $(document).ready(function(){ }); </script> <!-- Only change code above this ...
- W3CSchool闯关笔记(中级脚本算法)
坚持下去,编程是一门艺术,与君共勉!!! function sumAll(arr) { var result = 0; var sn = Math.min(arr[0] , arr[1]); var ...
- W3CSchool闯关笔记(初级脚本算法)
W3C后台校验代码bug很多,有的时候跑不过不一定是自己代码写得有问题,也许是网页后台的bug,可以自己把代码放到本地的html文件中跑一下看看 function reverseString(str) ...
- XSS Challenges闯关笔记
前言 做xss做疯了再来一个. 地址:https://xss-quiz.int21h.jp/ ,这个貌似是日本的一个安全研究员yamagata21做的. 做到第九关就跪了,而总共有二十关.一半都还没有 ...
- 某xss挑战赛闯关笔记
0x0 前言 在sec-news发现先知上师傅monika发了一个xss挑战赛的闯关wp([巨人肩膀上的矮子]XSS挑战之旅---游戏通关攻略(更新至18关)https://xianzhi.aliyu ...
- W3CSchool实战闯关笔记（JavaScript）
//handsome /** *ugly **/ 第一关注释 // 举例 var myName; // Define myName below this line 第二关声明变量 // Setup v ...
- The Python Challenge 闯关笔记
The Python Challenge : http://www.pythonchallenge.com/ Level 0: 看提示图片中为2**38,计算值为274877906944. Hint: ...
- 网页闯关游戏(riddle webgame)--H5刮刮卡的原理和实践
前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. 对于刮刮卡, 想必大家都很熟悉, 也很喜 ...
- 网页闯关游戏(riddle webgame)--SQL注入的潘多拉魔盒
前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. web开发初学者往往会忽视一些常见的漏洞 ...
随机推荐
- H5键盘事件处理
if (/Android/gi.test(navigator.userAgent)) { const innerHeight = window.innerHeight; window.addEvent ...
- HTML 5 & checkbox & switch components
HTML 5 & checkbox & switch components <!DOCTYPE html> <html lang="zh-Hans" ...
- leanote 信息栏显示笔记本和笔记类型
本文解决如下两个问题: 1. 在列表视图下使用搜索时,不知道搜出来的笔记属于哪个笔记本.(摘要视图下是有显示的) 2. 增加显示笔记类型(markdown 或 富文本) 修改resources\app ...
- 洛谷P1512伊甸园的日历游戏题解
题目 因为可能要参加qbxt的数论考试,所以最近要开始猛刷数论题了. 这是第一道,不过看样子并不想数论题啊,只是一个博弈论. 思路 一位著名老师说过,数学就是转化和化简,所以先考虑化简,先考虑化简年份 ...
- nuxt npm run dev 报错Solution to the "Error: listen EADDRINUSE 127.0.0.1:8080"
Solution to the "Error: listen EADDRINUSE 127.0.0.1:8080" Hello, Just sharing a solution t ...
- CentOS 7 网卡配置对比
1.DHCP模式(原始) [root@centos7-minimal /]# vim /etc/sysconfig/network-scripts/ifcfg-eno16777736 TYPE=&qu ...
- 前端三剑客:html,css,JavaScript
一.前端概念 二.html详细介绍 三.css基础 四.css盒模型 五.css高级布局 六.JS基础 七.JS常用类 八.JS基础操作 九.JS高级与事件 十.BOM与DOM 十一.jQuery初识 ...
- 详解最大似然估计（MLE）、最大后验概率估计（MAP），以及贝叶斯公式的理解
转载声明:本文为转载文章,发表于nebulaf91的csdn博客.欢迎转载,但请务必保留本信息,注明文章出处. 原文作者: nebulaf91 原文原始地址:http://blog.csdn.net/ ...
- LA4255/UVa1423 Guess 拓扑排序 并查集
评分稍微有一点过分..不过这个题目确确实实很厉害,对思维训练也非常有帮助. 按照套路,我们把矩阵中的子段和化为前缀和相减的形式.题目就变成了给定一些前缀和之间的大小关系,让你构造一组可行的数据.这个东 ...
- 关于 iOS 性能优化方面的面试题，
这是我前面几天碰到的面试题: 如何对定位和分析项目中影响性能的地方?以及如何进行性能优化? 我的答案: 定位方法: instruments 在iOS上进行性能分析的时候,首先考虑借助instrum ...