有幾天沒更新我的漫島系列了哈,設定十一月底完成漫島的第一版,時間挺緊迫的,另外,大家能看到的漫島的部分頁面,就截止到個人中心了,其餘的先不給看了。
由於知識雜又多,記不過來,像less稍微複雜一點的語法,每次我還得查一查文檔,所以把平時遇到的比較不常規的用法記錄下來,隨時查閱。
言歸正傳:
Less的循環
實現功能:一個循環搞定多個div的背景圖片。
說明:希望你能領會何時用循環以及如何使用,不必拘泥於我的例子。
實現效果如下:
代碼如下:
<!-- html 節點-->
<div class="dashboard">
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
</div>
//less循環語法
.dashboard {
width:800px;
margin:0 auto;
display: flex;
justify-content: space-around;
.panel {
width: 220px;
height: 100px;
border: 1px solid #f00;
background-position: left top;
background-repeat: no-repeat;
}
}
//循環用法如下:
.loop(@counter) when (@counter<=4) {
.loop(@counter+1);
.panel:nth-of-type(@{counter}) {
@imgsrc: "https://4xiaer.oss-cn-beijing.aliyuncs.com/jy/panel_bg@{counter}.png";
background-image:url("@{imgsrc}");
}
}
.loop(1);
Less的字符串拼接
拼接示例如下:
後面的用到了再繼續補充吧。
怎麼忽悠一個UI給我漫島免費做設計啊,好難啊!