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开发初学者往往会忽视一些常见的漏洞 ...
随机推荐
- Python openpyxl ： Excel 文档简单操作
安装方法 使用 pip 或通过专门python IDE(如pyCharm)进行安装 其中pip安装方法,命令行输入: pip install openpyxl 基本使用 第一步先是要导入 openp ...
- vedio-js的视频插件用法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 如何关闭WIN7自动配置 IPV4 地址 169.254
如何关闭WIN7自动配置 IPV4 地址 169.254 以管理员身份运行cmd.exe 输入:netsh winsock reset catalog 回车 输入:netsh int ip reset ...
- <TCP/IP原理> (一)
1.协议和标准 2.标准化组织 3.Internet标准:RFC 4.Internet的管理机构 一.协议和标准 1.协议(Protocol) 一组控制数据通信的规则 三要素:语法(syntax).语 ...
- jmeter笔记（9）--JDBC Request的使用
JDBC Request可以向数据库发送一个JDBC(Java Data Base Connectivity)请求(sql语句),获取返回的数据库数据进行操作.它需要和JDBC Connection ...
- 微信公众、QQ群、知识星球（附比特币链接）
文章一般都会在公众号抢先预览,一个系列出差不多的时候一般博客园汇总一下(文章很长) 微信公众号:逸鹏说道(dotnetcrazy) 群友刚创建的Python中级群,有一定Python基础的可以共同探讨 ...
- Linux安装gitbook
安装g++ 默认centos7上是没有安装g++ 通过命令: $ yum -y install gcc openssl-devel gcc-c++ compat-gcc-34 compat-gcc-3 ...
- Go package(1) time 用法
golang使用的版本: go version go1.10.3 一:功能介绍 time的一些功能,比如时区,像linux中的定时器,时间计算等 格式化时间 时区(Location) 时间计算 Tic ...
- linux批量压缩当前目录中文件后，删除原文件
linux批量压缩当前目录中文件后,删除原文件 for i in `ls|awk -F " " '{print $NF}'`; do tar -zcvf $i.tar.gz $i ...
- C++常见问题解答博客合集
1 关于宏 https://blog.csdn.net/hanchaoman/article/details/8809951