小程序和HTML布局的不同处：布局所有使用的组件（标签）不同，css样式属性一致。
微信小程序的HTML文件后缀为.WXML，多为双标签组件
<!--index.wxml-->
<view class='header'>
<view class='header_l'>
<icon type='search' size='40rpx' color='#000'></icon>
</view>
<view class='header_c'>
<text style='font-size:30rpx;'>推荐</text>
<text space="nbsp" style='font-size:18rpx;'> | </text>
<text style='font-size:24rpx;'>合肥</text>
</view>
<view class='header_r'>
<image src='../img/scan.png'></image>
<image src='../img/live.png'></image>
</view>
</view>
<swiper vertical='true' autoplay='' indicator-dots='' style='height:{{windowHeight}}px;'>
<swiper-item>
<view class='content_right'>
<view>
<image src='https://img.php.cn/upload/avatar/000/000/001/ffbb53f28335718dbbe7d163f6b51d6c.jpg'></image>
<image src='../img/follow.png' style='width:30rpx;height:30rpx;'></image>
</view>
<view class='content_right_ment'>
<image src='../img/love.png'></image>
<view class='text'>1666</view>
<image src='../img/forwa.png'></image>
<view class='text'>1666</view>
<image src='../img/com.png'></image>
<view class='text'>1666</view>
</view>
</view>
</swiper-item>
</swiper>微信小程序的css文件后缀为.wxss，样式属性与css一致
/**index.wxss**/
.header{position: fixed;top:10rpx;z-index: 9999;width: 100%;}
.header_l{position: fixed;left: 6%;}
.header_c{position: fixed;left: 43%;}
.header_r{position: fixed;right: 4%;}
.header_r image{width: 40rpx;height: 40rpx;margin-left: 25rpx;}
.content_right{position: fixed;right: 4%;width: 100rpx;bottom: 50rpx;text-align: center;z-index: 99;}
.content_right image{width: 50rpx;height: 50rpx;}
.content_right_ment>image{width: 50rpx;height: 50rpx;margin-top: 30rpx;}
.content_right_ment>.text{font-size: 20rpx;color: #ccc;}