欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

    微信小程序赞赏生姜头金钱赞赏首页设计制作开发教程(2)

    2018-07-23 09:37 来源/作者:懒人模板 分类:小程序教程  « »
     
    二、wxss样式文件代码如下:
    page {
      background-color: #fbf9fe;
    }
    
    .container {
      width: 100%;
      margin-bottom: 10rpx;
    }
    
    .header {
      width: 100%;
      height: 320rpx;
      border-radius: 50%;
      background-color: #d55a4a;
      margin-top: -160rpx;
      position: relative;
    }
    
    .header .group {
      width: 100%;
      position: absolute;
      bottom: -200rpx;
      text-align: center;
    }
    
    .header image {
      width: 196rpx;
      height: 196rpx;
      border-radius: 50%;
    }
    
    .header .name {
      width: 100%;
      display: inline-block;
      margin-top: 30rpx;
      color: #4e5b65;
    }
    
    .line {
      display: block;
      width: 600rpx;
      margin: 0 auto;
      height: 1px;
      background-color: #dddddd;
      margin-top: 300rpx;
      margin-bottom: 100rpx;
    }
    
    .price-list {
      padding: 0 15rpx;
      text-align: center;
      flex-direction: row;
    }
    
    .price-list .item {
      float: left;
      margin-right: 10rpx;
      margin-left: 10rpx;
      margin-bottom: 20rpx;
      width: 220rpx;
    }
    
    .price-list .price-box {
      width: 100%;
      height: 100rpx;
      border-radius: 20rpx;
      border: 1rpx solid #d55a4a;
      text-align: center;
    }
    
    .price-list .price-box em {
      line-height: 100rpx;
      color: #d55a4a;
      font-size: 30rpx;
    }
    
    .price-list .price-box .price {
      font-size: 50rpx;
      display: inline-block;
    }
    
    .price-list .price-box.active {
      background-color: #d55a4a;
    }
    
    .price-list .price-box.active em {
      color: #fff;
      background-color: #d55a4a;
    }
    

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议