cari

Rumah  >  Soal Jawab  >  teks badan

Tajuk Baharu: Reka Bentuk Reka Letak Matriks HTML Mampat Menggunakan CSS dan HTML Tulen

Saya cuba mencipta logo menggunakan HTML dan CSS tulen. Reka bentuk ini sangat intuitif, menjadi matriks [13x13] yang mengandungi beberapa item berwarna.

CSS sangat mudah dan kecil. Walau bagaimanapun, kod HTML mempunyai banyak bahagian berulang dan perlu KERING (Jangan Ulang Sendiri).

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>

Saya telah mencuba menggunakan <f/>代替<f></f> tetapi tidak berjaya.

Adakah terdapat cara untuk mengurangkan kod ini?

Nota: Warna hendaklah kekal sama.

P粉458913655P粉458913655517 hari yang lalu538

membalas semua(1)saya akan balas

  • P粉713846879

    P粉7138468792023-09-08 09:14:38

    Jika javascript tersedia, anda boleh menggabungkan jenis sel ke dalam objek rentetan dan menggunakannya untuk membina bendera secara dinamik. Contoh kod adalah seperti berikut.

    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>

    Berdasarkan keperluan untuk HTML/CSS dan komen @Temani Afif, berikut adalah penyelesaian 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>

    balas
    0
  • Batalbalas