freeCodeCamp 练习1

1. html 响应式网页设计：在 head 中加上

   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   

2. CSS div 居中

     margin-left:auto;
     margin-right:auto;
   

3. CSS 背景设为图片

   background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)
   

4. html ‘article’ 标签:
   定义独立的内容;
   定义的内容本身必须是有意义的且必须是独立于文档的其余部分。
5. CSS 两段（p）放入同一行：display: inline-block

   .item p { 
     display: inline-block;
   }
   

6. 菜单格式（菜名靠左，价格靠右）:两个选择器 width:50%，将两段 p 写在一行，中间不留空格

   <article class="item">
      <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
   </article>
   

7. CSS 网址（a）颜色状态三件套：

   a:visited {
     color: grey;
   }
   
   a:hover {
     color: brown;
   }
   
   a:active {
     color: white;
   }