Példák a használata a címke div
Üdvözlet, barátok. A minap kellett játszani blokkok és lehetőségeit felhasználásuk a design. Ezért sietek megosztani veletek egy pár ötletet.
A cikk végén - egy bónusz: a részletes útmutató, hogy a távolság, a különböző kijelzők a számítógépek és mobil eszközök.
Magyarázat kezdőknek:
1. példa: Hátterek és Képek. Keret és árnyék.
Készíts egy blokkot a háttérképet, hogy töltse meg a szöveget és képeket. További esztétikai lekerekített sarkok a blokk, és adjunk hozzá egy árnyék.
Itt block_1 felelős a design a fő egység, a háttér és block_2 - felkiáltójelet a sarokban.
A negatív érték különbözet block_2 megtanultuk a sarokban, és még azon is túl az alapvető eleme.
Block_1 számomra a magasságot. Ez úgy történik, több láthatóság, mert akkora, mint egy üres keret jelentősen torzul. Akkor lesz egy szöveget úgy, hogy a vonal magassága lehet eltávolítani, hogy ne takarja el a súlyos korlátozásokat. De block_2 szélesség-magasság hagyható, mert szükségünk van egy ikon egy bizonyos méretet.
3. példa: A köre és annak hiányával
Itt egy kép a hiányzó elegáns border'om lehet tenni megadásával külön stílusokat minden a keret. A felirat «The end» nem valószínű, hogy hasznos lehet, de lehet cserélni, például összekapcsolni oldalak, cikkek vagy oszlopok.
Ebben a példában a tervezés minden szöveg és térfogat eléréséhez kiadott külön CSS. Az első egység maradt némi zavart, így azok nem a szöveg a sorrendben.
Példa # 7: Több blokk reagál a készülék és annak expanziós
A megoldás, hogy most már lehetséges, logikus lenne, hogy helyezze az anyagokat a mobil elrendezés. De szeretném összegyűjteni érdekes lehetőségeket div'ami egy helyen, hogy mindenki itt talált valami hasznos.
Tehát, mi több egység egy sorban elhelyezett és kivitelezett, például használatával .bl. Méretek százalék, minden rendben van. De ez elég szűk a kis képernyő szélességének százalékában teszi a blokkot, és a szöveg jelenik meg belülről nem nagyon szép.
Mivel a blokkok találhatók a nagy képernyőn ...
Segítség jön @media irányelv, amely lehetővé teszi, hogy az egyes stílusok konkrét eszközöket. Szükséges hozzá a tartályt
(File header.php). Ebben az esetben a feltétel a következő: