技术小白之微信小程序的图片加文字链接

在多彩的图片呈现下的程序必不可缺的便是文字的搭配，图片勾起兴趣，文字辅助表达，多数情况下我们上传的图片都需要在它周围添上合适的标题，以便美观和表述清晰。下面是简单的图片文字链接的截图：

说到图片和文字的链接就不得不理下思路：首先我想要在小程序内显示图片文字信息，且在点击目标图片或文字时，可以转到我希望到达的另一个目标页面，这就表示我们需要在图片和文字外围用navigator将它们包裹住，其次如上述图片一样，希望文字位于图片下方，那么就要将包裹图片的image先写出来，再写入包裹文字的text或view，
wxml代码如下：

     
     相亲终结者

上述是一张图片和文字的链接，如需要在一行内填入多张图片，则只需将上述的图片和链接的地址和文字改改，复制在上述代码的下行就可以了，规定在同行显示用wxss来控制，
如下wxss代码：

.lianjie{
  width: 32.8%;      //给你的链接加入限定的宽，这里用%是因为希望它能等比例适应大小
  height: 185px;     //给链接加入高，这个高是图片的高加文字的高
  display: inline-block;    //这个很重要，没了这个你的图片就会排队，排一溜下去~
  background-color: #d8f1ca;   //给你的链接宽设置背景颜色，使它美观点
  margin-left: 0.2%;      //希望链接屏幕的左边有点间隙
}

.tp{
   width:100%;              //在被链接包围下，需要100%的宽度显示你的图片
   height: 150px;          //不要超过链接框的高度
   margin-top:2px;        //让图片和链接框有点距离
   border: 1px solid rgb(250, 250, 250);   //图片外围加上边框，使图片们之间有点间隔
 }

.ziti{
font-size: 12px;          //字体大小设置
height: 20px;               //设置字体所在位置高度
text-align: center;         //字体水平居中
line-height: 20px;         //字体垂直居中
}

具体wxml代码如下：

     
     相亲终结者




师兄，请按剧本来!




邪君宠-貂蝉

注：上述图片地址都是网络图片。而上述代码中的kuang是用来总体规划布局的，它的wxss如下：

.kuang{
  background-color: #d8f1ca;
  width: 100%;
  height: 185px;
}

代码和解释有写的不对的地方请见谅，可以的话请留下你宝贵的修改建议和问题提出，感谢~