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

来自CloudWiki
112.38.217.43讨论2018年11月25日 (日) 04:27的版本
(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)
跳转至: 导航搜索


操作准备

操作前先规划好详情页面的模板的样式,规划好详情页面的列或者行,根据详情页面的列或者行进行编辑

操作

这是一个大体的详情页面的样式

<view>

 <image src="/image/aa.png"></image>
 <view>
   <image src="/image/bb.png"></image>
   <text>胡歌</text>
   <text>发表于</text>
   <text>三天前</text>
 </view>
 <text>活着</text>
 <view>
   <view>
     <image src="/image/cc.png"></image>
     <image src="/image/dd.png"></image>
   </view>
   <view></view>
 </view>
 <text>所有失去的, 终会以另一种方式归来</text>

</view>


在对其属性进行具体的调式编写, 使其逐步达到理想中的页面,

涉及的属性代码理解

  .Container  实现列和行的分布
  .container {
   Display: flex;    成为一个盒子模型
   Flex-direction:column;  让他的布局方式成为一个列布局
   }
 补充:

Flex-direction:row; 让他的布局方式成为一个行布局