Facem frumos singur site-ul - un design frumos al site-ului - di-Grand
Principiul structura paginilor privind vânzarea oricărui produs este aproape întotdeauna la fel. Ele constau din blocuri individuale, referindu-se la care utilizatorul poate forma o opinie cu privire la produsele vândute pe ea. În cazul în care fiecare bloc eliberări, pagina, care constă din ele, ea va arata luminos și atractiv. Așa că vizitatorul a vrut să fie sigur de a cumpăra bunurile oferite, chiar dacă în urmă cu numai cinci minute, el nu a știut și a crezut. Aici ne uităm la modul de a crea în mod corespunzător un bloc cu avantajele pentru CSS. Să examinăm această problemă în parte, deoarece utilizarea blocurilor - cel mai popular mod de a organiza un site de o pagină.
Ceea ce avem nevoie pentru a obține un rezultat: o unitate constructivă este format din două componente - vizibile și ascunse. Vizibil pictograma de modul și numele beneficiile, avantajele. Partea ascunsă este plasată o descriere completă a beneficiilor, apare atunci când treceți peste pictograma.
Pentru a vedea efectele Descărcați acest lucru cu un exemplu:
Cum de a face un design frumos pentru site-ul dvs. de marketing?
Structura 1. HTML
Primul pas este de a insera icoane de la FontAwesome între tag-uri
. care va fi utilizat pentru a descrie:- Cu primul a cincisprezecea cusături - bloc comun care conține trei descriere bloc.
- Al doilea prin al șaselea - o unitate separată, cu o descriere a beneficiilor.
- Al treilea rând - pictograma de blocare.
- A patra linie - o indicație vizibilă a modulului cu beneficii.
- A cincea linie - modulul care detaliază beneficiile ascunse.
După cum puteți vedea, un design foarte simplu. Acum trebuie să adăugați animație.
2. Stiluri CSS
Specificam stilurile care sunt comune pentru toate cele trei blocuri: