微信小程序界面美化

頁面樣式（頁面參考了別的小程序的頁面）

標題字體的樣式

.title{
  margin-top: 45rpx;
  font-size: 50px;
  font-weight: 700;
  background: -webkit-linear-gradient(left, #6cc6cb, #ef33b1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

}

• font-size是字體大小
• font-weight是字體的粗細
• 字體顏色漸變
  background: -webkit-linear-gradient(left, #6cc6cb, #ef33b1);這一行是設置字體顏色從左往右漸變，顏色是從#6cc6cb到 #ef33b1
  漸變色的搭配參考
  -webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;

輸入框的樣式

.get_info{
  height: 500rpx;
  width: 600rpx;
  background-color: white;
  text-align: center;
  margin-top: 50rpx;
  border-radius: 50rpx;
  box-shadow: 6rpx 6rpx 6rpx 6rpx violet;
}

• border-radius: 50rpx;是設置圓角，取值為百分比或者數字
  相關border屬性
• box-shadow: 6rpx 6rpx 6rpx 6rpx violet; 設置對象的陰影
  box-shadow:有六個參數，分別為：水平陰影的位置、垂直陰影的位置、模糊距離、陰影的大小、陰影的顏色、從外層的陰影（開始時）改變陰影內側陰影

按鈕的樣式

.button-contain{
  height: 90rpx !important;
  width: 70% !important;
  margin-top: 350rpx;
  border-radius: 20rpx;
  background: linear-gradient(to right, #bbdbec, #e5b7e9);
  color: white;
}

• 按鈕的高度和寬度后加了!important，否則按鈕大小無法改變，只能是系統默認的大小，加!important提高了屬性的優先級

• border-radius: 20rpx;同樣是設置圓角

• background: linear-gradient(to right, #bbdbec, #e5b7e9); 設置按鈕背景顏色從左往右線性漸變
  第一個參數設置漸變的方向，可以是to right,to bottom right,45deg
  點擊查看具體函數效果

• color: white;設置字體顏色，這些設置顏色的都可以寫成漸變

頁面布局

一些重要的屬性

• display控制組件的顯示方式
  常見的值：
  display:none隱藏該元素
  display:block設置為塊元素，總是從新行開始，對寬高的屬性值生效
  display:inline設置為內聯元素，可以和其他元素在一行上，對寬高屬性值不生效，完全靠內容撐開寬高
  display:inline-block結合的行內和塊級的優點，既可以設置長寬，可以讓padding和margin生效，又可以和其他行內元素並排。
  display:flex彈性布局，適應於不同屏幕尺寸
• align-items在flex布局的容器中，將各個子項對齊
  align-items:center元素位於容器的中心。
  具體效果
• justify-content在flex布局的容器中，各個子項在橫軸上（水平）的對齊方式

justify-content: center;     /* 居中排列 */
justify-content: start;      /* 從行首開始排列 */
justify-content: end;        /* 從行尾開始排列 */
justify-content: flex-start; /* 從行首起始位置開始排列 */
justify-content: flex-end;   /* 從行尾位置開始排列 */
justify-content: left;       /* 一個挨一個在對齊容器得左邊緣 */
justify-content: right;      /* 元素以容器右邊緣為基准，一個挨着一個對齊, */

具體效果

• text-align指定元素文本的水平對齊方式

left	把文本排列到左邊。默認值：由瀏覽器決定。
right	把文本排列到右邊。
center	把文本排列到中間。
justify	實現兩端對齊文本效果。
inherit	規定應該從父元素繼承 text-align 屬性的值。

• margin設置元素外邊距（上下左右）
  相關的四個單獨的屬性

margin-bottom 底部邊距
margin-left 左邊距
margin-right 右邊距
margin-top 上邊距

• padding設置填充屬性
  和margin效果類似
  區別： margin設置元素外邊距的值，padding設置元素內邊距的值
• flex-direction 規定元素的排列方式

row  將元素水平顯示
column 將元素垂直顯示

• rpx
  寬度和高度數值如果是rpx，就會自適應屏幕大小

根據頁面解釋布局

就看頁面上半部分

各個class樣式之間的級別關系

（忽略box_contain）

background_color

.background_color{
  height: 500rpx;
  width: 100%;
  background-color: mistyrose;
  align-items: center;
  display: flex;
  flex-direction: column;
}

刪除align-items: center;，該容器內元素就不會居中

將flex-direction 改為row，元素就不會垂直排列

get_info

.get_info{
  height: 500rpx;
  width: 600rpx;
  background-color: white;
  text-align: center;
  margin-top: 50rpx;   
  border-radius: 50rpx;
  box-shadow: 6rpx 6rpx 6rpx 6rpx violet;
}

去掉text-align: center;，內容就不會居中

剩下的就不說了

.input-contain{
  align-items: center;
  display: flex;
  flex-direction: column;
}

.input_info{
  width: 80%;
  height: 100rpx;
  background-color: whitesmoke;
  margin-top: 20rpx;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

一些居中

align-items: center;
是讓元素位於容器中心，就是水平、垂直居中

justify-content: center; 
讓元素在水平上居中

text-align: center; 
讓文本水平居中