FCC学习记录（一）——HTML5 and CSS

第一次使用FCC，体验非常好，准备记录我小白的成长路线，这部分的内容我分成四个大方向。

第一部分

.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;　　
}

.silver-background {
background-color: silver;　　
}
#cat-photo-form {　　
background-color: green;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<div class="silver-background">　　
<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>
</div>

<form action="/submit-cat-photo" id="cat-photo-form">　　　　
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>　　
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label>
<input type="text" placeholder="cat photo URL" required>　　　　
<button type="submit">Submit</button>　　
</form>

第二部分

.injected-text {　　
margin-bottom: 25px;　　
text-align: center;
}

.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}

.yellow-box {
background-color: yellow;
padding: 20px 40px 20px 40px;　　
}

.red-box {
background-color: red;
margin: -20px 40px 20px 40px;　　　　
}

.green-box {
background-color: green;
padding-top:20px;　　
padding-left:40px;
}
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>

第三部分