从品牌网站建设到网络营销策划,从策略到执行的一站式服务
微信小程序 flex实现导航实例详解
成都创新互联公司专注为客户提供全方位的互联网综合服务,包含不限于成都网站制作、成都网站设计、外贸营销网站建设、安多网络推广、成都小程序开发、安多网络营销、安多企业策划、安多品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;成都创新互联公司为所有大学生创业者提供安多建站搭建服务,24小时服务热线:18980820575,官方网址:www.cdcxhl.com
实现示意:
1.链接顶部内边距,留出圆形图标的位置。
2.伪元素:before绘制圆形。
3.圆形中添加图标。
4.左右外边距控制间距,及促使在需要的地方换行。
wxml:
资本 ……
wxss:
.serviceMenu{ display:flex; //使用flex布局 flex-wrap:wrap; //子元素换行 justify-content:center; //子元素居中对齐 padding:30rpx 0; //留出上下边距 } .serviceMenu navigator{ position:relative; //为了绝对定位 padding-top:120rpx; //留出圆形图标的位置 flex-basis:140rpx; //设定基础宽度 margin:15rpx; //触发换行位置(小程序会自动换算,不必考虑适配) text-align:center; font-size:24rpx; } //创建图标 .serviceMenu navigator:before{ content:"\20"; position:absolute; top:0; left:50%; margin-left:-55rpx; width:110rpx; height:110rpx; border-radius:50%; background:#bbc1cd; } //设定不同图标。注意链接地址是绝对地址,因为小程序不支持相对地址的背景图。只支持image相对地址。 .serviceMenu navigator:nth-child(1):before{ background:#fc6e51 url(http://xwbline.com/icon_service_big01.png) no-repeat center center; } .serviceMenu navigator:nth-child(2):before{ background:#48cfad url(http://xwbline.com/icon_service_big02.png) no-repeat center center; } ………………
如果需要字数限制的话:
text{ display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图