微信小程序UI代码书写范例

<view class="page">

<view class="page__bd">
<view class="head-bg">
<view class="card1"><navigator hover-class="none" url="">
<image class="themes-list-img" src="../../style/images/h6.png"/>
</navigator></view>
<view class="card2"><navigator url="" hover-class="none">
<image class="themes-list-img-big" src="../../style/images/h4.png"/>
</navigator></view>
<view class="card3"><navigator hover-class="none" url="">
<image class="themes-list-img1" src="../../style/images/h5.png"/>
</navigator></view>
<text class="themes-box-subtitle">你还没有就诊卡哦，请添加就诊卡</text>
</view>




<view class="fast-btn-box">
<view class="fast1">
<navigator  url="../zhu/zhu?id={{id}}">
<image class="img1" src="../../style/images/h1.png"/>
<text class="title1">门诊挂号</text>
<text class="subtitle">足不出户</text>
<text class="subtitle">预约看病</text>
</navigator>
</view>
<view class="fast2">
<view class="fast2-sub">
<navigator  url="http://m.999brain.com" >
<view class="pdt6">
<view class="fast2-sub-sub">
<text class="title2">住院费用</text>
<text class="subtitle">出院后查询</text>
</view>
<image class="img1" src="../../style/images/h7.png"/>
</view>
</navigator>
</view>




<view class="fast2-sub2">
<navigator  url="../zhu/zhu?id=1111"  ><!--redirect="true"-->
<view class="pdt6">
<view class="fast2-sub-sub">
<text class="title2">检查预约</text>
<text class="subtitle">快捷方便 检查不排队</text>
</view>
<image class="img1" src="../../style/images/h2.png"/>
</view>


</navigator>


</view>


</view>
<view class="cl"></view>
</view>


<view class="fast-btn-box">
<view class="fast-btn-list">
 <navigator  url="../zhu/zhu?id={{id}}" hover-class="none">
<image class="img1" src="../../style/images/h8.png"/>
<text class="title3">查询专家</text>
</navigator>
<navigator  url="../zhu/zhu?id={{id}}" hover-class="none">
<image class="img1" src="../../style/images/2.png"/>
<text class="title3">专科专病</text>
</navigator>
<navigator  url="../zhu/zhu?id={{id}}" hover-class="none">
<image class="img1" src="../../style/images/h9.png"/>
<text class="title3">联系我们</text>
</navigator>
<view class="cl"></view>
</view>


</view>








    </view>

</view>

样式文件：

/**index.wxss**/


.weui-grids {
 background-color: white
}
.cl{ clear: both}
 .fl{ float:left}
 .fr{ float:right}
.mrt20{ margin-top:20px }
.mrt10{ margin-top:10px }
.pdt20{ padding-top:20px }
.pdt10{ padding-top:10px }


.pdt5{ padding-top:5px }
.pdt6{ padding-top:6px }
.pdt8{ padding-top:8px }
.head-bg{ background-color:#ecfbf4;height: 100px; padding-top: 10px}
.themes-list-img-big{  width: 60px; height: 58px;  }
.themes-list-img{ width: 20px; height: 21px;  }
.themes-list-img1{  width: 28px; height: 30px;  }
.card1{ float: left; width: 15%;text-align: center; padding-top: 10px}
.card2{ float: left; width: 70%;text-align: center}
.card3{ float: right; width: 15%;text-align: center; padding-top: 10px}
.themes-box-subtitle{ clear: both; display: block; width: 100%;text-align: center;font-size: 30rpx; }
.nav{ text-decoration:none }
.fast-btn-box{ margin-top: 15px; background-color: white;clear: both;}
.title1{clear: both; display: block; width: 100%;font-weight: bold;}
.img1{  width:60px; height: 61px; }
.fast1{float: left; width: 35%;text-align: center; border-right: 1px #e2e2e2 solid; }
.fast1 image{display: block;  margin:0 auto; margin-top: 10px}
.fast2{float: left; width: 64%;text-align: center;  }


.subtitle{clear: both; display: block; width: 100%;font-size: 30rpx; color: #9d9d9d; height: 20px;}
.fast2-sub{ text-align: left; border-bottom: 1px #e2e2e2 solid;  }
.fast2-sub-sub{ width: 60%; padding-top: 10px; float:left; padding-left: 10px}
.fast2-sub-sub navigator{ width: 10%; display: block;  float:left; text-align: center}
.title2{clear: both; display: block; width: 100%;font-weight: bold;}
.fast2-sub2{ text-align: left;  }
.fast-btn-list{ padding-bottom: 15px; padding-top: 15px}
.fast-btn-list navigator{ float: left; width: 33.33%; text-align: center; }
/*.fast-btn-list image{ display: block;  margin:0 auto;}*/


.title3{clear: both; display: block; width: 100%;font-size: 35rpx; }