常州布谷鸟网络上海小程序开发公司,上海APP开发,上海小程序分销商城,上海小程序商城,上海网站定制,上海网络公司,上海网站建设,上海微信公众号维护
微信小程序的图片加文字链接
日期:2021-9-11 11:40:34  阅读:

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

wxml代码如下:


     

     相亲终结者


1

2

3

4

上述是一张图片和文字的链接,如需要在一行内填入多张图片,则只需将上述的图片和链接的地址和文字改改,复制在上述代码的下行就可以了,规定在同行显示用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;         //字体垂直居中

}


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

具体wxml代码如下:


     

     相亲终结者



师兄,请按剧本来!



邪君宠-貂蝉



1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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


.kuang{

  background-color: #d8f1ca;

  width: 100%;

  height: 185px;

}

1

2

3

4

5


————————————————

版权声明:本文为CSDN博主「世木尹」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/weixin_42800902/article/details/82858083





作者:世木尹 (来源:CSDN

[声明] 本文系本网编辑转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与本网邮箱 7016867@qq.com 联系,我们将在第一时间删除内容!
Design By 布谷鸟网络 Since 2004 | 上海网络公司 | 上海网站设计 | 上海网页设计 | 上海小程序开发公司 | 上海微信商城设计 | 上海微信公众号商城 | 上海小程序商城 | 网站地图 |
本站由 为布谷鸟网络(www.cncuckoo.com)提供云计算与安全服务 苏ICP备12074670号-1 上海百度优化