新的标题：使用纯CSS和HTML压缩HTML矩阵布局设计-PHP中文网问答

问答

新的标题：使用纯CSS和HTML压缩HTML矩阵布局设计

P粉458913655 2023-09-07 21:27:33 查看 639

CSS3

我正在尝试使用纯HTML和CSS创建一个标志。设计非常直观，是一个[13x13]的矩阵，其中包含一些有颜色的项目。

CSS非常简单和次要。但是，HTML代码却有很多重复的部分，需要进行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>

我已经尝试过使用<f/>代替<f></f>，但没有成功。

有没有办法减少这段代码？

注意：颜色应保持不变。

Your Answer

提交

1 个回答

如果javascript可以使用，您可以将单元格类型连接成一个字符串对象，并使用它动态构建标志。示例代码如下。

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>

根据对HTML/CSS的需求和@Temani Afif的评论，这里提供了一个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>

2023-09-08 09:14:38

提交