Azt, hogy szép single-site - egy gyönyörű design a helyén - di-grand
Az elv szerkezete oldalt az értékesítés bármely termék szinte mindig ugyanaz. Ezek közé tartozik az egyes blokkok, utalva, amelyek a felhasználó alkotnak véleményt az értékesített termékek rajta. Ha minden blokk eredeti problémát, az oldal, amely a számukra, hogy fog kinézni világos és vonzó. Annak érdekében, hogy a látogató biztos akart lenni abban, hogy megvásárolja a felkínált árut, akkor is, ha csak öt perce, hogy nem tudja, és a gondolat. Itt nézd meg, hogyan kell helyesen hozzon létre egy blokkot ellen az előnyöket a CSS. Vizsgáljuk meg ezt a kérdést külön-külön, mivel a használata blokkok - a legnépszerűbb módja, hogy szervezzen egy egyoldalas oldalon.
Amire szükségünk lesz az eredmény: egy konstruktív egység két részből áll - a látható és a rejtett. Látható fel modul ikon és nevet a hasznát, előnyeit. A rejtett része kerül teljes leírását előnyöket, úgy tűnik, ha lebeg az ikonra.
Hogy a hatás letöltése ezt egy példa:
Hogyan készítsünk egy szép design az Ön weboldalán marketing?
1. HTML struktúra
Az első lépés az, hogy helyezze ikonok FontAwesome címkék között
. amelyek leírására használható:- Az első, hogy tizenötödik öltések - közös blokkot, amely három blokk leírása.
- A második-hatodik vonalak - egy külön egység egy leírást előnyöket.
- A harmadik sor - blokk ikonra.
- A negyedik sor - láthatóan jelzi, hogy a modul előnyeit.
- Az ötödik sor - rejtett modulban részletezve az előnyöket.
Mint látható, egy nagyon egyszerű design. Most meg kell adni animáció.
2. CSS stílusok
Mi határozza meg a stílusok, amelyek közösek mind a három blokk: