微信小程序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; }