位置:电子教程 > 微信小程序设计教程 (如果看不到内容请使用360浏览器) 推荐学习资源
小程序样式基础
框模型
定位
选择器
当前阅读教程:微信小程序设计教程 > 小程序应用
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 外边距 下一篇: 外边距合并

小程序应用

根据基础语法,下面在微信小程序中实现定义组件的外边距。

.wxml文件代码示例

小白教程网www.2d5.net

如下:

<!--外框就定义背景,内框定义个一个长宽都是100px带背景的。-->
<view>
  <view>默认文本,不带外边距</view>
</view>
 
<view></view><!--高度3的空白行-->
<view>
  <view>默认文本,带外边距10px;</view><!--外边距定义10px-->
  <!--要实现内框外面都是灰色见下面代码:外框定义内边距来实现-->
</view>
 
<view></view><!--高度3的空白行-->
<view>
  <view>默认文本</view>
</view>

.wxss文件代码示例

小白教程网www.2d5.net

如下:

.cls1-a{ /*外框*/
   background-color: gray;
}
.cls1-b{ /*内框*/
   background-color: gainsboro;
   width: 100px;
   height: 100px;
}
 
.hr{min-height: 3px;} /*高度3的空白行*/
.cls1-c{ /*内框*/
   background-color: gainsboro;
   width: 100px;
   height: 100px;
   margin: 10px;
}
 
.cls2-a{ /*外框*/
   background-color: gray;
   padding: 10px; /*要实现内框外面都是灰色见:外框定义内边距来实现*/
}
.cls2-b{ /*内框*/
   background-color: gainsboro;
   width: 100px;
   height: 100px;
}

效果如图4-7所示

image.png

上一篇: 外边距 下一篇: 外边距合并
毕业设计网             广告联系QQ:45157718(微信同号)