微信小程序期末项目task部分的wxss编写

微信小程序想要做的引人注目,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表内容的增加而改变位置。

你可能感兴趣的:(微信小程序)