微信小程序

2024-06-26 12:28| 来源: 网络整理| 查看: 265

编写一个页面 welcome.wxml文件：

hello,world 开启小程序之旅

welcome.wxss文件：

/*静态样式，建议写在wxss文件中，动态样式可以写在wxml中用style*/ .container{ display: flex; flex-direction:column; align-items: center; background-color:#b3d4db; } .user-avatar{ height:200rpx; width:200rpx; margin:30rpx; } .user-name{ margin-top: 200rpx; font-size: 42rpx; font-weight: bold; } .moto{ font-size: 32rpx; font-weight: bold; line-height: 80rpx; color:#405f80; } .moto-container{ margin-top: 200rpx; border: 1rpx solid #405f80; width:250rpx; height:80rpx; border-radius: 5px; text-align: center; }

welcome.json:

{ "navigationBarBackgroundColor": "#b3d4db" }

显式的效果如下

：

设置了background-color，但是效果不是我想要的那样

此处background-color设置的只是标签里边container的背景，通过调试工具可以看到，其实wxml页面还有一个隐藏的page标签，所以在wxss中加上以下代码：

page{ height:100%; background-color: #b3d4db; }

效果如图：

【本文地址】

公司简介

联系我们