我正在嘗試使用純HTML和CSS建立一個(gè)標(biāo)誌。設(shè)計(jì)非常直觀,是一個(gè)[13x13]的矩陣,其中包含一些有顏色的項(xiàng)目。
CSS非常簡(jiǎn)單和次要。但是,HTML程式碼卻有許多重複的部分,需要進(jìn)行DRY(Don't Repeat Yourself)處理。
body { width: 100vmin; margin: auto } logo { display: grid; grid-template-columns: repeat(13, 1fr); } s { } w { background-color: #d6d6d6; aspect-ratio: 1 } l { background-color: #d6d6d6; aspect-ratio: 1 } f { background-color: #d6d6d6; aspect-ratio: 1 }
<logo> <f></f><f></f><f></f><s></s><f></f><f></f><f></f><s></s><f></f><s></s><f></f><f></f><f></f> <f></f><s></s><f></f><s></s><s></s><s></s><f></f><s></s><f></f><s></s><s></s><s></s><s></s> <f></f><s></s><f></f><s></s><f></f><f></f><f></f><s></s><f></f><s></s><f></f><s></s><f></f> <f></f><s></s><s></s><s></s><s></s><s></s><s></s><s></s><f></f><s></s><s></s><s></s><f></f> <f></f><s></s><l></l><l></l><l></l><l></l><l></l><s></s><f></f><s></s><f></f><s></s><f></f> <f></f><s></s><s></s><s></s><s></s><s></s><s></s><s></s><s></s><s></s><f></f><s></s><f></f> <f></f><s></s><l></l><l></l><l></l><l></l><l></l><l></l><s></s><f></f><f></f><s></s><f></f> <f></f><s></s><l></l><s></s><s></s><s></s><s></s><s></s><s></s><s></s><s></s><s></s><s></s> <f></f><s></s><l></l><s></s><l></l><l></l><l></l><s></s><w></w><s></s><w></w><s></s><w></w> <s></s><s></s><l></l><s></s><s></s><s></s><l></l><s></s><s></s><s></s><w></w><s></s><s></s> <l></l><l></l><l></l><s></s><l></l><l></l><l></l><w></w><w></w><w></w><w></w><s></s><w></w> <l></l><s></s><s></s><s></s><s></s><s></s><s></s><s></s><s></s><s></s><s></s><w></w><s></s> <l></l><l></l><l></l><l></l><l></l><l></l><l></l><l></l><l></l><l></l><s></s><w></w><w></w> </logo>
我已經(jīng)嘗試過(guò)使用<f/>
代替<f></f>
,但沒(méi)有成功。
有沒(méi)有辦法減少這段程式碼?
注意:顏色應(yīng)保持不變。
如果javascript可以使用,您可以將單元格類型連接成字串對(duì)象,並使用它動(dòng)態(tài)建立標(biāo)誌。範(fàn)例程式碼如下。
let logo = document.getElementById("logo"); logo.dataset["cells"].split('').forEach(a => logo.append(document.createElement(a)));
body { width: 100vmin; margin: auto } logo { display: grid; grid-template-columns: repeat(13, 1fr); } w { background-color: #d6d6d6; aspect-ratio: 1 } l { background-color: #d6d6d6; aspect-ratio: 1 } f { background-color: #d6d6d6; aspect-ratio: 1 }
<logo id="logo" data-cells="fffsfffsfsffffsfsssfsfssssfsfsfffsfsfsffsssssssfsssffslllllsfsfsffsssssssssfsffsllllllsffsffslssssssssssfslslllswswswsslssslssswsslllslllwwwwswlssssssssssswllllllllllsww"></logo>
根據(jù)對(duì)HTML/CSS的需求和@Temani Afif的評(píng)論,這裡提供了一個(gè)SVG解決方案:
.w * { stroke:red;stroke-width:1;;fill:none;stroke-linejoin="miter"; } .l * { stroke:green;stroke-width:1;;fill:none;stroke-linejoin="miter"; } .f * { stroke:blue;stroke-width:1;;fill:none;stroke-linejoin="miter"; }
<logo> <svg height="300" width="300" viewBox="-1 -1 15 15"> <g class="w"> <path d="M12.5,10 L12.5,12.5 L11,12.5" /> <path d="M6.5,10.5 L10.5,10.5 L10.5,8" /> <path d="M8,8.5 L9,8.5" /> <path d="M12,8.5 L13,8.5" /> </g> <g class="l"> <path d="M4,8.5 L6.5,8.5 L6.5,10.5 L4,10.5" /> <path d="M7,4.5 L2,4.5" /> <path d="M8,6.5 L2.5,6.5 L2.5,10.5 L0.5,10.5 L0.5,12.5 L10,12.5" /> </g> <g class="f"> <path d="M0.5,9 L0.5,0.5 L2.5,0.5 L2.5,3" /> <path d="M4,0.5 L6.5,0.5 L6.5,2.5 L4,2.5" /> <path d="M8.5,0 L8.5,5" /> <path d="M10,0.5 L13,0.5" /> <path d="M10,2.5 L11,2.5" /> <path d="M12.5,2 L12.5,7" /> <path d="M10.5,4 L10.5,6.5 L9,6.5" /> </g> </svg> </logo>