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开发初学者往往会忽视一些常见的漏洞 ...
随机推荐
- Ubuntu16 搭建Git 服务器
刚入职一个月左右,昨晚公司给培训了SVN和Git的使用.之前在研究生期间,和导师做项目就一直使用git做版本管理.想起研究生有一段时间,git总出错(秘钥都不好使了,只有某个机器生成的rsa key ...
- vue项目上传Github预览
最近在用Vue仿写cnode社区,想要上传到github,并通过Github pages预览,在这个过程中遇到了一些问题,因此写个笔记,以便查阅. 完成Vue项目以后,在上传到github之前,需要修 ...
- 【LOJ#3097】[SNOI2019]通信（费用流）
[LOJ#3097][SNOI2019]通信(费用流) 题面 LOJ 题解 暴力就直接连\(O(n^2)\)条边. 然后分治/主席树优化连边就行了. 抄zsy代码,zsy代码是真的短 #include ...
- 当PsychicBoom_发觉自己是个大SB的时候……
这些题都是没ac调了好久发现是sb错误的题--. 想清楚再写题!!! 2019.4.18 洛谷P5155 [USACO18DEC]Balance Beam 转移方程\((a[l[i]]*(r[i]-i ...
- 哈尔滨工程大学第十四届程序设计竞赛（同步赛）F 小帆帆走迷宫(dp)
题目描述 小帆帆被困在一个 NxN 的方格矩阵迷宫,每个格子中都有一个整数 A[i][j].小帆帆从迷宫起点(左上角)格子 A[1][1]开始走,每一步可以向右或向下移动,目标是移动到迷宫的出口右下角 ...
- ArrayDataProvider数据分页
模型 public function search($page=10){ $lists = self::find()->orderBy('id DESC')->all(); $dataPr ...
- Codeforces Round #554 (Div. 2)自闭记
A 签到 #include<bits/stdc++.h> using namespace std; ],t[],ans; int main() { scanf("%d%d&quo ...
- jemter+ant+jenkins进行集成测试
一下为我学习的一些笔记: 一.安装配置ant 安装地址:http://ant.apache.org/ 1.下载ant一路傻瓜式安装 2.配置ant环境变量:path下配置ant的bin路径 3.将jm ...
- 如何部署WebSphere服务器的开发环境
WebSphere Liberty 简介 IBM WebSphere Application Server Liberty 或WebSphere Liberty Profile Server(简称 L ...
- 02-oracle中的基础sql
1.SQL SQL(Structured Query Language) 语言是目前主流的关系型数据库上执行数据操作.数据检索以及数据库维护所需要的标准语言,是用户与数据库之间进行交流的接口,许多关系 ...