仿礼物说小程序项目实战——4.首页（2）

配置好了全局的信息之后，我们就开始写单独的页面，找到pages/index/index目录
删除默认生成index.wxml的helloworld代码。我们看到头部是一个从红色到橙色渐变的一个块
里面包含了两行文字，还有一个操作指南的跳转页面的按钮。
根据设计稿我们就来写index.wxml，
这里我们发现会有一个操作指南的跳转页面，那么我们需要在app.json的pages属性中添加操作指南页面的路径"pages/guide/guide"
在wxml文件中一个跳转的链接用标签，url属性就是要跳转页面的路径
index.wxml代码如下：

<view class="container">
    <view class="top">
        <text class="text1">微信送礼新方式</text>
        <text class="text2">微信上送礼·对方填地址·免邮送上门</text>
        <navigator url="/pages/guide/guide" class="guide">操作指南</navigator>
    </view> 
</view>

接下来我们来写index.wxss这个文件，已达到和效果图一样的效果展示
在小程序中我们自己写的wxml都是在page标签下的，好比html文件的html标签

样式代码中，和普通的css没什么区别，只是单位是rpx.一个可视区域的宽度为750rpx
如果说一个元素占了整个屏幕宽度的一半，那么就是375rpx
index.wxss代码如下

page{
  background: #f2f2f2;
}
.container{
  padding: 0;
  background: #f2f2f2;
}
.top{
  height: 360rpx;
  width: 100%;
  background: linear-gradient(#e50e38, #f0743e);
}
.top .text1{
  font-size: 40rpx;
  color: #fff;
  padding-left:80rpx;
  position: relative;
  top: 80rpx;
  display: block;
}
.top .text2{
  font-size: 30rpx;
  color: #fff;
  padding-left:80rpx;
  position: relative;
  top: 90rpx;
  display: block;
}
.top .guide{
  display: inline-block;
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: #f34043;
  position: absolute;
  right: 40rpx;
  top: 40rpx;
  text-align: center;
  color: #fff;
  padding: 20rpx;
  line-height: 30rpx;
  font-size: 24rpx;
}

之后我们看一下效果如下所示，点击操作指南也能正常跳转