A psd-től a html-ig
Ebben a leckében hozzon létre egy blokkot kosárral. Az index.html fájlban írja le a következő kódot ehhez a blokkhoz:
Két blokkot hoztunk létre: a sapkákhoz
és a tartalomhoz . Most menj a fájlba a stílusokkal és írd meg a fejléc tulajdonságait, azaz. a .header választóhoz:Itt jeleztük a mondat belsejét a blokk belsejében, a bal oldalon pedig 35 px-et tettünk meg, hogy beillesszük az ikont. A sarkok kerekítési sugara megjelölve, nevezetesen a bal felső sarokban és a jobb felső sarokban. Adja meg a betűtípus tulajdonságait: arc, méret, sortávolság, szín.
Adjuk hozzá a háttérkép hátterének és a háttér-ismétlés tulajdonságainak tulajdonságait:
Mivel a bal oldali oszlop minden egyes blokkjának saját ikonja van, hozzáadjuk saját osztályunkat ezekhez a blokkokhoz, például egy kosárral rendelkező blokkhoz kosárosztály lesz.
:A stílussal ellátott fájlban a kosárba írjuk a blokkhoz tartozó kép elérési útját:
Amikor a blokk két vagy több osztály, akkor írj a fájlt a stílust vagy egy osztályba választó, vagy az összes együtt hézagmentesen, mint a fenti példában .block.basket
A tartalomosztályhoz tartozó blokk esetében. a blokk belsejében található az osztályblokk. a következő tulajdonságokat írjuk le:
És a blokk belsejében lévő bekezdés tulajdonságai:
Átkerülünk a blokkba a keresési formanyomtatványon.