Yatak katman şablonu

hacışakir34

Decapat
Katılım
23 Ocak 2021
Mesajlar
31
Daha fazla  
Cinsiyet
Erkek
Herkese selamlar. Ben siteme aşağıdaki linklerde de mevcut olan dinamik yatak katman şemalarından yapmak istiyorum. Bunu CSS'te yapabilir miyim? Konuyla alakalı bilgili arkadaşlar bana destek olursa çok sevinirim.


Şimdiden teşekkürler.
 

Dosya Ekleri

  • yatak katman şeması.jpg
    yatak katman şeması.jpg
    48,2 KB · Görüntüleme: 102
Son düzenleyen: Moderatör:
Elbette.

HTML:
<!DOCTYPE html>
<html>
<head>
    <style>
        .toggle-Button:checked + .item-Description {
            display: block;
        }

        .item-Description {
            display: none;
        }
    </style>
</head>
<body>
    <div class='a-Container'>
        <input type='radio' name='toggle-Button' class='toggle-Button' checked>
        <div class='item-Description'>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut aliquam felis. Ut nec sem ac ante euismod luctus quis vitae nisi. Sed dapibus lacus purus, sit amet hendrerit sem interdum et. Praesent tincidunt metus eget nunc semper ullamcorper.
        </div>

        <input type='radio' name='toggle-Button' class='toggle-Button'>
        <div class='item-Description'>
            Proin gravida ex erat. Suspendisse nunc urna, interdum ut cursus vitae, rhoncus non mauris. Nam faucibus erat vitae lectus bibendum viverra. Nulla consectetur interdum tempor. Aenean quis efficitur nulla.
        </div>

        <input type='radio' name='toggle-Button' class='toggle-Button'>
        <div class='item-Description'>
            Integer vel nibh eu nisi eleifend hendrerit at vitae ante. Nulla blandit accumsan tempus. Nullam sollicitudin neque non mi lacinia, id pharetra nisi ultricies. Donec sodales erat at tortor eleifend convallis. Curabitur hendrerit nisi quis elit rutrum, eu elementum nibh convallis.
        </div>
    </div>
</body>
</html>
 
Umarım daha açıklayıcı olmuştur.

HTML:
<!DOCTYPE html>
<html>
<head>
    <style>
        .an-Item {
            display: flex;
        }

        .toggle-Button {
            display: none;
        }

        .toggle-Button:checked + .item-Description {
            display: block;
        }

        .item-Description {
            display: none;
        }
    </style>
</head>
<body>
    <div class='a-Container'>
        <label class='an-Item'>
            <img src='1-ustkumas_boss.webp'>
            <input type='radio' name='toggle-Button' class='toggle-Button' checked>
            <div class='item-Description'>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut aliquam felis. Ut nec sem ac ante
                euismod luctus quis vitae nisi. Sed dapibus lacus purus, sit amet hendrerit sem interdum et. Praesent
                tincidunt metus eget nunc semper ullamcorper.
            </div>
        </label>
        <label class='an-Item'>
            <img src='aeromax-active-zone-3cm_.webp'>
            <input type='radio' name='toggle-Button' class='toggle-Button'>
            <div class='item-Description'>
                Proin gravida ex erat. Suspendisse nunc urna, interdum ut cursus vitae, rhoncus non mauris. Nam faucibus
                erat vitae lectus bibendum viverra. Nulla consectetur interdum tempor. Aenean quis efficitur nulla.
            </div>
        </label>
    </div>
</body>
</html>
 

Geri
Yukarı