Kelly Stone ❣

【CSS】

/**body所有的標籤全域設定**/

body前面不用.做呼叫CSS

body {
  display: flex;
  justify-content: center;     /**Flex 外容器屬性**/
  align-items: center;         /**Flex 內元件屬性**/
  background: #e9ebee;
  font-family: 'MicroSoft Jhenghei',sans-serif;
}

推薦這個網址給大家參考~~ 寫得很好

https://cythilya.github.io/2017/04/04/flexbox-basics/

/**用#呼叫id**/

#fb {
  width: 500px;
  padding-bottom: 12px;
  background: white;
  border: 1px solid #dddfe2;
  border-radius: 4px;    /**圓角的效果**/
}

#fb .header {

  display: flex;
  justify-content: space-between;     /**將 .header 中的兩個元件分別往左右散開**/
  padding: 12px 12px 0;     /**上，左右，下的間距值**/
}

#fb .header .left-info {
  display: flex;
  justify-content: center; /**已經被排到左邊之後，才做置中**/
  align-items: center;
}
 

/**用來看大家的邊界很方便*/
* { 
  border: 1px solid;
}

#fb .header .left-info .thumbnail img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;   /**圓角**/
  margin-right: 8px;     /**與右邊框線的內部距離**/
}

#fb .header .left-info .name-info .name {
  cursor: pointer;     /**滑鼠移上文字時的圖示／手勢**/
  font-weight: bolder;    /**文字粗細**/
}

#fb .header .left-info .name-info .name a {
  text-decoration: none;
  color: #365899;
}

/**在HTML中名字的標籤為<a>，而<a>標籤有個預設的特性，就是底下會有一條藍色的底線，這可以說是 HTML 的預設樣式。

但我們不想要這條線出現，所以加上了 text-decoration: none 的設定**/

#fb .header .left-info .name-info .name a:hover {
  text-decoration: underline;
}

/**滑鼠移動到一個 <a> 標籤的正上方時就會觸發 :hover 的樣式。**/

好多........繼續加油.........