flex實(shí)現(xiàn)小程序?qū)Ш叫率纸坛獭?/p>
實(shí)現(xiàn)示意：
1.鏈接頂部內(nèi)邊距，留出圓形圖標(biāo)的位置。
2.偽元素:before繪制圓形。
3.圓形中添加圖標(biāo)。
4.左右外邊距控制間距，及促使在需要的地方換行。
如果需要字?jǐn)?shù)限制的話：
資本
- .serviceMenu{
- display:flex;?//使用flex布局
- flex-wrap:wrap;?//子元素?fù)Q行
- justify-content:center;?//子元素居中對(duì)齊
- padding:30rpx 0;?//留出上下邊距
- }
- .serviceMenu navigator{
- position:relative;?//為了絕對(duì)定位
- padding-top:120rpx;?//留出圓形圖標(biāo)的位置
- flex-basis:140rpx;?//設(shè)定基礎(chǔ)寬度
- margin:15rpx;?//觸發(fā)換行位置(小程序會(huì)自動(dòng)換算，不必考慮適配)
- text-align:center;
- font-size:24rpx;
- }
- //創(chuàng)建圖標(biāo)
- .serviceMenu navigator:before{
- content:"/20";
- position:absolute;
- top:0;
- left:50%;
- margin-left:-55rpx;
- width:110rpx;
- height:110rpx;
- border-radius:50%;
- background:#bbc1cd;
- }
- //設(shè)定不同圖標(biāo)。注意鏈接地址是絕對(duì)地址，因?yàn)樾〕绦虿恢С窒鄬?duì)地址的背景圖。只支持image相對(duì)地址。
- .serviceMenu navigator:nth-child(1):before{
- background:#fc6e51 url(https://xwbline.com/icon_service_big01.png) no-repeat center center;
- }
- .serviceMenu navigator:nth-child(2):before{
- background:#48cfad url(https://xwbline.com/icon_service_big02.png) no-repeat center center;
- }
- ………………
- text{
- display:block;
- overflow:hidden;
- white-space:nowrap;
- text-overflow:ellipsis;
- }
新聞熱點(diǎn)
疑難解答
圖片精選
