当前阅读教程:微信小程序设计教程 > 绝对定位-小程序应用 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 绝对定位-基础语法 | 下一篇: 浮动-基础语法 |
根据基础语法,下面在微信小程序中实现组件如何实现绝对定位。典型的应用是制作居于顶部和底部的菜单。 .wxml文件代码示例 如下: <view> <view >区块1 </view> <view class='fk a2'>区块2 </view> <!--该区块实现绝对定位,距离顶部和左边都是30px--> <view >区块3 </view> </view> <view> <view >区块1 </view> <view class='fk a3'>区块2 </view> <!--该区块实现绝对定位,居于底部--> <view >区块3 </view> </view> .wxss文件代码示例 如下: /* 定义方块 */ .fk{ width: 100px; height: 100px; margin: 10px; background-color: gainsboro; } /* 定义flex模式,让三个view都在同一行 */ .cls{ display: flex; flex-direction: row; } .a2{ background-color: gray; position: absolute; /* 实现绝对定位 */ top: 30px; /* 距离顶部30px */ left: 30px /* 距离左边30px */ } .a3{ background-color: cadetblue; position: absolute; /* 实现绝对顶部 */ bottom: 0px; /* 距离底部0px */ } 效果如图5-5所示。 |
|
上一篇: 绝对定位-基础语法 | 下一篇: 浮动-基础语法 |