安安，今天是day18，會延續上一篇的內容繼續下去，昨日先做了使用者輸入/表單的"傳統式"實作題，因為是一個完整個練習，所以接下來會將昨天做好的表單做css整形的部分，讓他看起來美觀一些:)所以一起來重新練一下css吧!!!（練習資源一樣是hahow課程歐）AJAX方法的實作練習明日會寫上，作為本次AJAX的完結。

ＧＯＧＯ！

可以看到昨天的雛形是長這樣，那先轉成sass來調整樣式。

sass程式碼（詳解在下面）：

$colorGreen: #DFFF47
$colorBrown: #37382F
$colorLightBrown: #383931
=size($w,$h:$w)
  width: $w
  height: $h
html
  background-color: $colorBrown
  background-image: url(https://2017.awiclass.monoame.com/img/form_ground.svg)
  background-size: 100% auto
  background-repeat: no-repeat
  background-position: 0 80% 
body
  display: flex
  justify-content: center
  align-items: center
  // 讓他跟視窗是等高的 min-height
  min-height: 100vh
form
  background-color: lighten($colorBrown,2)
  color: white
  padding: 30px 100px
  display: flex
  flex-direction: column
  max-width: 300px
  letter-spacing: 1px
  border-bottom: 5px solid $colorGreen
  box-shadow: 0px 0px 50px rgba(black,0.1)
  img
    width: 120px
    margin-left: auto
    margin-right: auto
  &>*
    margin-bottom: 15px
  h2
    font-weight: normal
    text-align: center
    margin-bottom: 20px
  input,textarea,select
    padding: 8px 15px
    font-size: 15px
    border-radius: 0px
    opacity: 0.9
    //點選的時候不想要醜的藍色框
    outline: none
    &::placeholder
      color: rgba($colorBrown,0.4)
  // 記得設置select
  select,input[type='radio']
    appearance: none
  .recommand
    display: flex
    align-items: center
    margin-top: 10px
    margin-bottom: 20px
    label
      margin-right: 40px
      margin-left: 5px
  input[type='radio']
    padding: 0
    +size(20px)
    border: 2px solid white
    border-radius: 50%
    cursor: pointer
    transition: 0.5s 
    &:checked
      background-color: $colorGreen
      border-color: $colorGreen
  button
    // transparent可以讓按鈕變成透明的
    background-color: transparent 
    padding: 8px
    color: white
    cursor: pointer
    &:hover
      background-color: rgba(white,0.1)

1.先設定常用變數$colorGreen...等等

2.設定html背景顏色

3.body調整裡面區塊的位置，設定min-height: 100vh是為了讓他跟視窗等高

4.設定form的背景色及區塊位置，結束後再回來調整陰影

5.調整元件樣式(input,textarea,select)，使用outline:none是為了點選時候不要有醜醜的藍色框，&::placeholder改變提示字樣式

6.注意：還記得昨日提過元件輸入狀態的樣式，如果不想被瀏覽器控制的話，可以使用appearance:none，取消預設的樣式就可自定義，但有個注意事項，radio跟checkbox會不見，需要自己設定樣式讓他出現！

input[type='radio']
    padding: 0
    +size(20px)
    border: 2px solid white
    border-radius: 50%
    cursor: pointer
    transition: 0.5s
		&:checked
      background-color: $colorGreen
      border-color: $colorGreen

7.最後設置按鈕樣式，background-color:transparent 可以讓按鈕變成透明的（透明感很美），最後再設置滑鼠移動上去變色就好囉

最後會看到這個樣式，附上codepen：https://codepen.io/cinj/pen/YzqoWxb?editors=0100

好久沒重溫css拉！今天複習完明天就來AJAX囉！（順帶一提，今天買到了可不可的皮卡丘樣式，超級可愛的(*´∀`)~♥ 推坑