Hogyan készítsünk egy blokkot DIV CSS-nek

Hogyan készítsünk egy blokkot a CSS központjában

A szerzőtől: Üdvözlöm újra a blogunkon. Ebben a cikkben szeretném megvitatni egy ilyen kérdést részletesebben, hogyan lehet egy blokkot a CSS-ben, valamint több más manipulációt blokk elemekkel.

Központosítás

Sok elem van egy weboldalon, amely a központban állhat. Például a címsorok, a logó a fejlécben vagy a láblécben található információk. De hogyan kell igazítani tökéletesen a központba? Természetesen meg kell értened, hogy mit kell kiszámítani manuálisan bemélyedését, vagy alkalmazza a pozícionálás nem éri meg, ha a margó csodálatos értéke van – Auto:

Ennek a tulajdonságnak az első értéke meghatározza a fenti és az alábbi ábrát. Ennek megfelelően nulla helyett írhatja az értékét, ha ilyen francia bekerülést kell adnia. Az automatikus második érték határozza meg a bal és jobb oldali fekvéseket. Úgy határozzák meg, hogy az elem a központban lesz. De itt nagyon fontos, hogy megfigyeljen egy másik szabályt:

Gyakorlati kurzus az adaptív webhely elrendezéséről a semmiből!

Fedezze fel a kurzust, és megtudja, hogyan kell létrehozni a modern webhelyeket a HTML5 és a CSS3-on

Tudj meg többet

Az elemnek be kell állítania a szélességet. Szükségszerűen. Megmagyarázom, miért. Például a pixelszélesség teljes tartályában van. És ha nem adja meg a blokk explicit szélességét, akkor a középpontban is kiegyenlített? Általában elegendő az írásszélesség vagy a maximális szélesség, és a központosítás működik.

Ugyanígy, akkor centen a blokkok befektetni ebbe. Általában a fészkelő szint nem zavarja a központozást.

Hogyan hozzunk létre egy blokkot CSS-ben és megjelenésével

Már beszéltem az előző cikkek egyikében, hogy a blokk elemeket a div-címke hozza létre. Ő gőz. Ez csak egy üres tartály a tartalomhoz. Azt is be kell állítania egy stílusosztályt vagy azonosítót, hogy kapcsolatba léphessen vele CSS-en keresztül. Feltételezem:

Div osztály = “Post-Anony” / div

Hozzunk létre egy világos neveket, amelyek azonnal világosak, hogy milyen szerepet töltenek be. Például a kód ezen sorában az azonnal világos, hogy blokkunk a cikk bejelentése. Ezután megfelelően ki kell adni.

Sok különböző szabályt adtunk töredékünknek. Például külső és belső francia bekezdések, háttér, kerekítő sarkok, valamint a fő méretek – szélesség és magasság.

Tartalom hozzáadása

Létrehoztunk egy blokkot a bejelentéshez, de maga a bejelentés még nem. Adjuk hozzá, hogy olyan legyen, mint egy igazi oldalon. Amely általában tartalmaz egy bejelentést? Általában a közzététel dátuma és a szerző neve, a cikk fejlécje, egy miniatűr és egy gomb További információ. De készítsünk egy egyszerű bejelentést: cím, kép és gomb.

DIV osztály = “Post-Anony” IMG SRC = “HAB” H1Poles / H1ptotekstance, általában kiderült!./ Pahref = “#” főkönyv / a

Amint láthatod, hozzáadunk mindent, amire szüksége van. Mobil tapéta, fejléc, kis szöveg a bekezdésben és a link az olvasás teljesen. Természetesen nem vezet bárhol, hiszen nem vagyunk valós webhely – csak azt vizsgáljuk, hogyan kell egy blokkot készíteni.

A kép megkérdezte, hogyan fekszik ugyanabban a mappában, mint a CSS-fájl, amelyben ezeket a stílusokat megadják. Most már el kell gondoskodnia:

Gyakorlati kurzus az adaptív webhely elrendezéséről a semmiből!

Fedezze fel a kurzust, és megtudja, hogyan kell létrehozni a modern webhelyeket a HTML5 és a CSS3-on

Tudj meg többet

Kérdezzük meg tiszta méretét, nyomja meg a bal szélhez, hogy a szöveg jobbra áramlik, mi is adunk kis ferdét. És ez történt a végén:

Úgy néz ki, mint egy bejelentés? Természetesen úgy tűnik, számomra úgy tűnik, nagyon jól kiderült. Természetesen az igazi helyszínen még mindig kifinomult. A szöveg és a cím megkapja azokat a színeket és betűtípusokat, amelyeket a design határoz meg, és a bal oldali egyéb hirdetési blokkokat hozzáadnák.

Mindazonáltal itt van egy egyszerű példa arra, hogy olyan blokkot hozzon létre, amelyben van mindent, amire szüksége van a felhasználó kényelméről.

Hogyan készítsünk egy blokkot a CSS-ben

Kezdetben megígértem néhány több manipulációt blokkokkal. Röviden fontolja meg őket, az oldal elemének láthatóságát érintik. Például adja hozzá a készüléket a létrehozott blokkhoz, ahogy a létrehozott: kijelző: nincs;

Frissítse az oldalt, és látni fogja, hogy nincs semmi rajta – az egység eltűnt. Egy másik módja annak eltávolítására, hogy átlátható legyen. Ehhez megfelel az ingatlan átlátszatlanságának. Alapértelmezés szerint az átlátszatlan oldal összes eleme, vagyis az opacitása van: 1. Ha beállítja az opacitást: 0, a blokk teljesen átlátszó lesz. Beállíthatja az értékeket ezek között a számok között.

A gyakorlatban

A blokkot átláthatóvá tesszük, és hozzáadjuk a szavakat, amelyekre szükség lesz rá, hogy megjelenjen.

DIV osztály = “Show-Anony” Hegedywood, Toveanons / Div

Így létrehoztuk a kívánt blokkot.

Hirdetést átlátszóvá tették.

.Show-Anony: Hover+.Utólagos anonce {

Ezek a szabályok a következőket jelentik: amikor a show-Anony blokkra helyezed, a bejelentésünk átlátszatlan lesz, azaz teljesen látható. Azt is megtörténik, és amikor a kurzort a bejelentésen közzéteszik, hogy nem tűnik el a látványtól.

Tesztelje magát, és győződjön meg róla, hogy ez az. Természetesen ritkán találkoztam azzal, hogy amikor rejtett volt az oldalon, kezdetben bejelentette, de a legfontosabb dolog az, hogy elkapja a lényegét. Most a PROP-DOWN menüt még parancsfájlok nélkül is. Egész esetben hozzáadhat sima változásokat a színekben és más konverzióban. Tágas a képzeletedért.

Így kezdtem egy igazítással, és befejeztem a blokk láthatósági irányítást. Valójában mindez csak egy apró funkció, amely a CSS-t az elemek irányításában adja. Ha többet szeretne tudni, akkor tanuld meg a CSS-t, és feliratkozunk a blogunkra, hogy minden héten hasznos anyagokat kapjunk a weboldalon.

Gyakorlati kurzus az adaptív webhely elrendezéséről a semmiből!

Fedezze fel a kurzust, és megtudja, hogyan kell létrehozni a modern webhelyeket a HTML5 és a CSS3-on

Tudj meg többet

PSD HTML-re

Helyszíni elrendezés a HTML5 és a CSS3-on a semmiből

Néz

Címkék: webhely elrendezése

Hasonló cikkek: