WXSS美化样式

给骨架穿上漂亮衣服

📖知识引入

👕WXSS是衣服

结构是骨架，样式是衣服。WXSS决定颜色、大小、间距，让页面从「毛坯房」变成「精装修」。

🎯class选择器

先在WXML里给标签写class="btn"，再在WXSS里用.btn { ... }给它打扮——像点名「3号同学穿红色」。

📐rpx自适应单位

750rpx等于一屏宽，rpx会随手机屏幕自动缩放。写rpx，大屏小屏显示都协调，小程序专属魔法单位！

🌈常用属性四件套

color文字颜色、background背景、font-size字号、border-radius圆角——几行代码，页面大变样。

📦Flex布局神器

display:flex让盒子横排竖排随心排、居中对齐一步到位。2026年做移动端页面，Flex是必修神器。

💡

rpx是魔法尺子：750rpx=一屏宽，什么手机都协调！

🔍一键换装

.card {
  background: #ffffff;
  border-radius: 24rpx;    /* 圆角 */
  padding: 30rpx;          /* 内边距 */
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}

.btn {
  background: #07c160;     /* 微信绿 */
  color: #ffffff;
  border-radius: 999rpx;   /* 胶囊按钮 */
  text-align: center;
}

同一个view，加样式前后：

改造前：          改造后：
┌──────────┐    ╭──────────╮
│ 白底黑字   │ -> │ 圆角卡片  │
│ 方方正正   │    │ 带小阴影  │
└──────────┘    ╰──────────╯

圆角大法：
border-radius: 0       → 直角
border-radius: 24rpx   → 圆角卡片
border-radius: 999rpx  → 胶囊按钮

想让按钮变成微信官方绿？ background: #07c160 （微信标志就是这个绿！）

🎯小测验

第1题：WXSS负责页面的？

第2题：关于rpx单位，正确的是？

第3题：想让按钮变成微信官方绿，该设置？

📝本课知识点

✓WXSS给骨架穿衣服
✓class选择器点名样式
✓750rpx=一屏宽，自适应缩放
✓圆角、阴影瞬间提升颜值
✓Flex布局是排列神器

第7课完成！继续探索下一课吧 🚀

🧱

上一课

第6课

下一课

第8课

🧱