小程序的css樣式控制和web開發中的css樣式控制基本一致。這里將介紹一些小程序中css樣式控制的基本知識。
首先在小程序的wxml文件中,通過添加class來引入樣式。
<view class="box"></view>
這個例子中,view標簽的樣式被控制為box樣式。可以在app.wxss文件中設置box樣式。
.box { width: 100px; height: 100px; background-color: red; }
此時,運行小程序可以看到一個寬100px,高100px,背景顏色為紅色的方塊。
除了class,還可以通過id來引入樣式。
<view id="box1"></view>
在app.wxss文件中,可以通過#來引用id樣式。
#box1 { width: 100px; height: 100px; background-color: blue; }
此時,運行小程序可以看到一個寬100px,高100px,背景顏色為藍色的方塊。
除了常規樣式控制,還可以通過偽類控制樣式,如:hover。
.box:hover { background-color: green; }
此時,當用戶鼠標懸停在box區域上方時,box的背景顏色將變為綠色。
總之,小程序的css樣式控制基本與web開發一致,熟練掌握css樣式控制將幫助您更好更快地開發小程序。
上一篇小手指css
下一篇導航條改為白色css代碼