慕课网-微信小程序入门与实战-常用组件API开发技巧项目实战-第6章构建新闻详情页面-先静后动，构建新闻详情页面样式

先静后动，构建新闻详情页面样式

1.进入目录 pages/posts/post-item，修改文件 post-detail.wxml

<!-- 先静后动，先样式再数据 -->
<view>
  <image src="/images/post/sls.jpg"></image>
  <view>
    <image src="/images/avatar/2.png"></image>
    <text>胡歌</text>
    <text>发表于</text>
    <text>三天前</text>
  </view>
  <text>炉石传说好玩吗</text>
  <view>
    <view>
      <image src="/images/icon/collection.png"></image>
      <image src="/images/icon/share.png"></image>
    </view>
    <view></view>
  </view>
  <text>炉石传说能不好玩吗，暴雪的游戏都是很好玩的。</text>
</view>

2.查看效果

3.进入目录 pages/posts/post-item，修改文件 post-detail.wxml，添加 class

<!-- 先静后动，先样式再数据 -->
<view class="container">
  <image class="head-image" src="/images/post/sls.jpg"></image>
  <view class="author-date">
    <image class="avatar" src="/images/avatar/2.png"></image>
    <text class="author">胡歌</text>
    <text class="const-text">发表于</text>
    <text class="date">三天前</text>
  </view>
  <text class="title">炉石传说好玩吗</text>
  <view class="tool">
    <view class="circle-img">
      <image src="/images/icon/collection.png"></image>
      <image class="share-img" src="/images/icon/share.png"></image>
    </view>
    <view class="horizon"></view>
  </view>
  <text class="detail">炉石传说能不好玩吗，暴雪的游戏都是很好玩的。</text>
</view>

4.进入目录 pages/posts/post-item，修改文件 post-detail.wxss

.container {
  display:flex;
  flex-direction:column;
}

.head-image {
  width:100%;
  height:460rpx;
}

.author-date {
  flex-direction:row;
  margin-left:30rpx;
  margin-top:20rpx;
}

.avatar {
  height:64rpx;
  width:64rpx;
  vertical-align:middle;
}

.author {
  font-size:30rpx;
  font-weight:300;
  margin-left:20rpx;
  vertical-align:middle;
  color:#666;
}

.const-text {
  font-size:24rpx;
  color:#999;
  margin-left:20rpx;
}

.date {
  font-size:24rpx;
  margin-left:30rpx;
  vertical-align:middle;
  color:#999;
}

.title {
  margin-left:40rpx;
  font-size:36rpx;
  font-weight:700;
  margin-top:30rpx;
  letter-spacing:2px;
  color:#4b556c;
}

.tool {
  margin-top:20rpx;
}

.circle-img {
  float:right;
  margin-right:40rpx;
  vertical-align:middle;
}

.circle-img Image{
  width:90rpx;
  height:90rpx;
}

.share-img {
  margin-left:30rpx;
}

.horizon {
  width:660rpx;
  height:1rpx;
  background-color:#e5e5e5;
  vertical-align:middle;
  position:relative;
  top:46rpx;
  margin:0 auto;
  z-index:-99;
}

.detail {
  color:#666;
  margin-left:30rpx;
  margin-top:20rpx;
  margin-right:30rpx;
  line-height:44rpx;
  letter-spacing:2px;
}

5.修改文件 app.wxss

text {
  font-family:MicroSoft Yahei;
  font-size:24rpx;
}

6.测试