## 启动页制作
### 项目结构
### 制作欢迎页
`welcome.wxml`
~~~html
<view class='container'>
<image class='user-son' src='/images/son.jpg'></image>
<text class='user-name'>Hello,悠小爷</text>
<view class='open-container'>
<text class='open'>开启小程序之旅</text>
</view>
</view>
~~~
`welcome.wxss`
~~~css
page{
height: 100%;
background-color:#b3d4db;
}
.container{
display: flex;
flex-direction: column;
align-items: center;
height: 1334rpx;
}
.user-son{
width:200rpx;
height:200rpx;
border-radius:100rpx;
margin-top: 160rpx;
}
.user-name{
margin-top: 100rpx;
font-size: 32rpx;
font-weight: bold;
}
.open-container{
margin-top: 200rpx;
border: 1px solid #405f80;
width: 200rpx;
height: 80rpx;
border-radius: 5rpx;
text-align: center;
}
.open{
font-size: 22rpx;
font-weight: bold;
line-height: 80rpx;
color: #405f80;
}
~~~
`app.json`
~~~json
{
"pages":[
"pages/welcome/welcome"
],
"window":{
"navigationBarBackgroundColor":"#b3d4db"
}
}
~~~
