下面实现二级页面的编写，页面内容为平面设计。

新建页面

app.json中新建页面ps：

  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/works/works",
    "pages/dynamic/dynamic",
    "pages/ps/ps"
  ],

添加头部和底部内容

将之前的index页面中的头部和底部内容复制粘贴一份放入ps页面（后面会介绍继承模板的方法，提高代码复用性）
ps.wxml:

编写内容

wxml:

<view class="header">
  <view class="container hdCon">
    <navigator class="logo" open-type="switchTab" url="/pages/index/index">
      <image class="hdPic" mode="heightFix" src="/images/logo.png"  ></image>
    </navigator>
    <view class="kefu">
      <button class="btn" open-type="contact"></button>
      <image class="pic" mode="heightFix" src="/images/xiaoxi.png"></image>
    </view>
  </view>
</view>

<view class="banner">
  <image src="/images/psbanner.jpg1 (1).jpg"></image>
</view>

<view class="psBox" >
  <view class="psBoxTit">
    专业软件技能
  </view>
    <view class="psBoxConOne">
      <view class="item" wx:for="{{5}}">
        <image src="/images/photoshop.png1.png"></image>
        <view>photoshop</view>
      </view>
    </view>
   </view>



<view class="psBox" wx:for="{{5}}">
  <view class="psBoxTit">
    专业软件技能
  </view>
  <view class="psBoxCon">
     <image class="pic" mode="widthFix" src="/images/psmajor02.jpg2.jpg"></image>
     <view class="text">
       <view>嘿嘿</view>
       <view>哈哈</view>
       <view>嘻嘻</view>
       <view>嚯嚯</view>
       <view>呵呵</view>
       <view>哼哼</view>
       <view>嘿嘿</view>
       <view>嘿嘿</view>
     </view>
   </view>
</view>

<view class="footer">
  <image class="pic" mode="widthFix" src="/images/logo.png"></image>
  <view class="text">- 芜湖起飞 -</view>
</view>

wxss:

.header {
  width: 750rpx;
  height: 90rpx;

  overflow: hidden;
}

.hdCon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 26rpx;
}

.hdCon .logo,
.kefu image {
  height: 50rpx;
}

.hdCon .hdPic {
  height: 100%;
}

.kefu {
  position: relative;
  animation: dh 1s linear infinite;
  /* animation将动画与标签绑定，infinite循环播放,linear匀速*/
}

.kefu .btn {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
}

.banner{
  width:100%;
}
.banner image{
  width:750rpx;
  height:1080rpx;
  display: block;
}
.psBox{padding:80rpx 0; background:#1c356e;}
.psBox:nth-child(2n){background:#fff}

.psBoxTit{
  width: 490rpx;
  height:70rpx;
  background:#de2e05;
  border-radius:70rpx;
  color:white;
  text-align: center;
  line-height: 70rpx;
  margin: 0 auto;
  font-size: 40rpx;
  position: relative;
  margin-bottom: 40rpx;
} 

.psBoxTit::before{
  display: block;
  content :"";
  width: 100%;
  height:100%;
  border: 2px dotted #de2e05; /* dotted点线  dashed虚线 */
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  border-radius: 70rpx;
  transform: scale(1.03,1.2);  /* 向外扩展*/
}

.psBoxCon .pic{
  width: 100%;
}
.psBoxCon .text{
  padding: 40rpx 26rpx 0;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}
.psBoxCon .text view{
  width: 50%;
  font-size: 30rpx;
  line-height: 1.8em;
  position: relative;
  padding-left: 18rpx;
  box-sizing: border-box;
}

.psBoxCon .text view::before{
  content: "";
  display: block;
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  background: #000;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -5rpx;
}
.psBox:nth-child(2n-1) .psBoxCon .text{color:#fff} 
.psBox:nth-child(2n-1) .psBoxCon .text view::before{background:#fff} 

.psBoxConOne{
  color: #fff;
  display: flex;
  flex-wrap: wrap;  /*自动换行*/
  justify-content: center;
}

.psBoxConOne .item{
  text-align: center;
  padding: 30rpx;
}
.psBoxConOne .item image{
  width: 150rpx;
  height: 150rpx;
}
.psBoxConOne .item .view{
  text-transform: uppercase;
  font-size: 28rpx;
  padding-top:5rpx;
}

.footer{
  padding: 30rpx 0;
  background: #f2f2f2;
  text-align: center;
}
.footer .pic{
  width: 180rpx;
}

.footer .text{
  font-size: 25rpx;
  color: #666;
}

补充

图片占全宽大小

有两种种方法

• 第一种方法：直接设置宽度和高度

• 第二种方法使用image的mode属性，让图片的高度自动根据宽度变化（可以适用于不知道图片的宽高情况下使用）。

  • mode="widthFix"

  快速提取颜色工具

  qq截图模式，光标移动到提取区域，然后ctrl+c即可

图片与其他区域衔接处有缝隙

如图，可以看到图片和下一个块级元素有缝隙，
原因是因为图片默认是行元素，由于行元素的特性，导致其与下方有间隔。

解决方案就是将图片转换成块级元素即可。（display:block;）

css样式补充

margin:auto

在其父级元素中居中显示

nth-child() 选择器

https://www.w3school.com.cn/cssref/selector_nth-child.asp

可以设置交错的不同颜色的背景效果:

.psBox{padding:60rpx 0; background:#1c356e;}
.psBox:nth-child(2n){background:#fff}

border-radius圆角样式

https://www.runoob.com/cssref/css3-pr-border-radius.html

transform: scale()缩放样式

https://www.cnblogs.com/yanggeng/p/11277199.html
缩放样式，可以实现点线边框效果。