⼩程序——简单静态⽹页的制作⼀、前⾔
需要知识：
HTML
CSS
注意：⼩程序的语法与HTML和CSS不太相同，但本质是⼀样的。
要求：
1. 进⼊开发者⼯具并且创建⼀个测试⼩程序， 选择建⽴快速模板
2. 在pages⽬录底下新建⼀个first的⽂件夹，其中包括指定的四个⽂件，并且设置第⼀个页⾯为first页⾯
3.在first.wxml⾥制作如图ui界⾯，采⽤盒模型以及flex布局
4.⽤户头像和待付款等四个圆圈统⼀⽤⿊⾊的圆圈表⽰
5.⽤户id和余额应在first.js⽂件⾥⾯写，然后wxml⾥⾯获取js的内容，具体操作培训已讲
3. 采⽤rpx布局，根据⼿机⼤⼩⾃适应
4. 可以尝试在first.json⽂件⾥⾯将顶部样式做⼀些修改
要求样张：
margin: 2%;
}
.flex-container {
display: flex;
display: -webkit-flex;
align-items: center;
}
.UserHeadImage {
margin: 50rpx;
margin-left: 35rpx;
}
.
UserHeadImage image{
width: 130rpx;
height: 130rpx;
background-color: #000000;    border-radius: 65rpx;
}
.user-name {
简单网页width: 350rpx;
height: 75rpx;
}
.PersonalitySignature {
font-size: 20rpx;
color: #665c5c;
}
.money {
color: red;
font-size: 30rpx;
margin-bottom: 55rpx;
margin-left: 5rpx;
}
.Order {
display: flex;
margin-left: 35rpx;
}
.MyOrder {
margin-right: 30rpx;
}
.AllofOrder {
margin-left: 380rpx;
font-size: 30rpx;
color: gray;
padding-top: 7rpx;
}
.State {
margin-top: 20rpx;
display: flex;
margin: 25rpx;
}
.Sta {
margin: 37rpx;
}
.Center {
text-align: center;
font-size: 20rpx;
color: gray;
}
.Mine {
display: flex;
flex-direction: column;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。