微信小程序想要做的引人注目,UI界面的设计也至关重要。对于我们新手开发微信小程序,wxss的编写也需要简洁,有能力需要美观。经过一学期的小程序学习,在task部分的wxss我用到了一些简单的,方便的小程序代码功能。
按钮的属性:
`.nav1 {
flex: 1;
background-color: rgb(0, 140, 255);
font-size: 60rpx;
width: 80px;
height: 110px;
margin: 20px 20px;
border-radius: 50%;
color: #fff;
line-height: 100rpx;
align-items: center;
text-align: center;
display: flex;
transition: all .7s;
justify-content: center;
}`
border-radius使按钮变为圆形。transition使按钮被点击后展现延迟动画。
按钮的界面固定:
.btn {
margin: 600rpx 0rpx 0rpx 0rpx;
width: 650rpx;
position: fixed;
bottom: 30rpx;
}
position属性设为fixed,表示按钮设为绝对位置,不因为list表内容的增加而改变位置。