微信公眾號底部菜單一般由幾個按鈕組成,通過css樣式可以實現按鈕的美化。以下是一些常見的css樣式。
1. 菜單按鈕字體大小和顏色
.weui-tabbar__label { font-size: 14px; color: #666666; }
2. 菜單按鈕被選中后的字體顏色和背景顏色
.weui-tabbar__item.on .weui-tabbar__label { color: #45C01A; } .weui-tabbar__item.on { background-color: #FFFFFF; }
3. 菜單按鈕的圖標大小和顏色
.weui-tabbar__icon { width: 22px; height: 22px; margin: 5px 0 2px; background-size: 22px 22px; -webkit-background-size: 22px 22px; } .weui-tabbar__icon-on { background-image: url(http://weui.github.io/weui/images/icon_tabbar.png); background-position: 0 -98px; } .weui-tabbar__icon-off { background-image: url(http://weui.github.io/weui/images/icon_tabbar.png); background-position: 0 -50px; }
4. 菜單按鈕被選中后的圖標顏色
.weui-tabbar__item.on .weui-tabbar__icon { background-image: url(http://weui.github.io/weui/images/icon_tabbar.png); background-position: 0 -98px; }
總之,通過css樣式可以讓微信公眾號底部菜單更美觀和易于使用。
上一篇mysql 群輝 安裝包
下一篇mysql 置頂