într-o lume conectată prin Internet, este esențial ca marca sau compania dvs. să aibă prezență online. Acest lucru este de obicei reprezentat frecvent printr-un site web.
În prezent, există mai multe instrumente care vă permit să efectuați pagini de aterizare sau bloguri generice. Cu toate acestea, acestea nu furnizează site-ul cu o identitate care le face să se evidențieze de restul. Din acest motiv, astăzi vă aducem un acordeon de imagini, perfect pentru site-ul dvs. pentru a evidenția între mulțime.
Nu este nevoie de JavaScript
cel mai bun din acest acordeon, este doar Utilizați HTML și CSS! Deci, nu aveți nevoie de un script suplimentar pentru a funcționa. Structura HTML care necesită este simplă și constă în elemente imbricate unul cu celălalt. Acestea conțin o imagine, care este însoțită de o figură și un radio de buton, care ne va oferi funcționalitatea.
DIV ID = „E0367068B1″>
așa cum se poate afișa, raza Butonul trebuie să aibă același nume astfel încât acordeonul să funcționeze corect.
Trebuie să se menționeze stilurile
că imaginile pe care le folosim trebuie să aibă aceeași dimensiune, astfel încât acordeonul nostru să fie uniformă. În cazul nostru, le vom folosi într-un format de 335px lățime de înălțime de 480px. Această lățime (335px) va fi cea pe care o vom vedea când imaginea este extinsă, totuși, atunci când este contractată, va arăta doar o lățime de 50px.
Prin urmare, elementul nostru ac--container trebuie să măsurați lățimea unei imagini implementate, plus lățimea restului imaginilor contractate. Ca și în exemplul nostru vom folosi imagini, lățimea ar fi de 335px (imaginea desfășurată) + 50px + 50px + 50px + 50px (4 imagini contractate) = 535px.
divid id = „b95e43dbf8”
În plus, vom poziționa radioul butonului, astfel încât acestea să cuprindă toată lățimea imaginilor contractate.
DIV ID = „A1F250E845″>
Aducerea acordeonului nostru la viață
În plus, putem aplica alte stiluri și animații, astfel încât acorda noastră să fie dinamică și atractivă în vedere. Amintiți-vă că puteți juca cu animații și culori pentru a vă crea propriul design, dar funcționalitatea va rămâne intactă.
Personalizare la gustul nostru
Există o infinitate a posibilităților care ne permit să oferim personalitate site-ului nostru, prin elemente CSS editate de noi. Acordeonul pe care îl prezentăm anterior, va fi o modalitate excelentă de a evidenția imaginile dvs. despre vizitatorii care le vizualizează.
în IDA, includem fișierul .zip cu exemplul pe care tocmai l-ați văzut, astfel încât să puteți Descărcați-l și editați-l în funcție de nevoile dvs.:
Descărcați