构建新闻列表Demo(上)
目录如下
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/220eafa4b82f5b587463f6702c432611.png#pic_center)
初始效果(未加CSS)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2eee1ac502384f897f7632f3b931f15c.png#pic_center)
代码如下
<view>
<view>
<image src="/images/avatar/1.png"></image>
<text>Sep 8 2020</text>
</view>
<text>云澈、萧澈</text>
<image src="/images/post/crab.png"></image>
<text>怎么回事……难道我还没有死?我明明坠下了绝云崖,怎么可能还活着!而且身上居然没有痛感……连不适感都没有?这是怎么回事?</text>
<view>
<image src="../../images/icon/chat.png"></image>
<text>96</text>
<image src="../../images/icon/view.png"></image>
<text>112</text>
</view>
</view>
构建新闻列表Demo(下)
当前效果(添加CSS后)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/fdf3343940c5f063ea710f08e2a0a28d.png#pic_center)
代码如下
<view class="post-container">
<view class="post-author-date">
<image src="/images/avatar/1.png" class="post-author"></image>
<text class="post-date">Sep 8 2020</text>
</view>
<text class="post-title">云澈、萧澈</text>
<image src="/images/post/crab.png" class="post-image"></image>
<text class="post-content">怎么回事……难道我还没有死?我明明坠下了绝云崖,怎么可能还活着!而且身上居然没有痛感……连不适感都没有?这是怎么回事?</text>
<view class="post-like">
<image src="../../images/icon/chat.png" class="post-like-image"></image>
<text class="post-like-font">96</text>
<image class="post-like-image" src="../../images/icon/view.png"></image>
<text class="post-like-font">112</text>
</view>
</view>
.post-container {
display: flex;
flex-direction: column;
margin-top: 20rpx;
margin-bottom: 40rpx;
background-color: #fff;
border-top: 1px solid #ededed;
border-bottom: 1px solid #ededed;
padding-bottom: 10rpx;
}
.post-author-date {
margin: 10rpx 0 20rpx 10rpx;
display: flex;
flex-direction: row;
align-items: center;
}
.post-author {
height: 60rpx;
width: 60rpx;
}
.post-date {
margin-left: 20rpx;
}
.post-title {
font-size: 34rpx;
font-weight: 600;
color: #333;
margin-left: 10px;
margin-bottom: 10px;
}
.post-image {
width: 100%;
height: 340rpx;
margin-bottom: 15px;
}
.post-content {
font-size: 28rpx;
color: #666;
letter-spacing: 2;
margin-left: 20rpx;
margin-bottom: 20rpx;
}
.post-like {
font-size: 26rpx;
margin-left: 20rpx;
display: flex;
flex-direction: row;
align-items: center;
}
.post-like-image {
height: 32rpx;
width: 32rpx;
margin-right: 16rpx;
}
.post-like-font {
margin-right: 40rpx;
}