# 106: Részletek építése, 3. rész (HTML és CSS) - CSS-trükkök

Anonim

Elég közel vagyunk ahhoz, hogy elkészüljön a webhely Snippets területének kezdőlapja. Rögtön elkezdjük csípni a dolgokat és több dolgot formába hozni.

Furcsa tapasztalatunk van, amikor az abszolút helyzetben lévő álelem nem reagált a negatív bal margóra, de pozitív jobb margóval volt jó. Aki tudta.

Ezután áttérünk egy „aktív” osztályra a kódrészlet-kategóriák bal oldali menüjéhez. Egyszerre csak egyet böngészhet (a kapcsolódó kivonatok listáját láthatja a jobb oldalon). Mondja, hogy a „HTML” aktív, és rákattint a „CSS” elemre. A jobb oldalon csak a CSS-hez kapcsolódó kivonatok új listája jelenik meg. Kell lennie valamilyen stílusnak, hogy megmutassa, melyik aktív. A z-index megváltoztatása egy aktív osztályon elég ahhoz, hogy nekünk működjön (az árnyék fölé üljön).

A jobb oldali listánál csábít, hogy a linkeket megjelenítse: block - de szinte túl sok kattintható terület. Furcsának tűnik ezt gondolni, de szerintem igaz. Nem akarja, hogy véletlen kattintások nagyon messze legyenek a link szövegétől, hogy aktiválják ezt a linket. Meglepő és furcsa lenne. Tehát maguk a linkek inline-blokkolhatók, így lehetnek párnázataik, de ne töltsék ki teljes szélességükben, mint a listában szereplő elem.

Maguk a linkek esetében úgy döntünk, hogy a kivonatok címének színezése annak a kategóriának a színével, amelyhez tartoznak, túl erős. Ehelyett a linkek szürke színűek lesznek, de az áthúzás színe felveheti ezt a különleges színt.

Azt is eldöntjük, hogy egyenesen lefelé egy oszloplista egyelőre működik, de ha a görgetés túl nevetségessé válik, talán valamikor két oszlopra oszthatunk és lerövidíthetjük.