Kezdeti feltérképezése kapcsolt hírek néz ki:
Nem nagyon vonzó, nem? Mi vonzza a felhasználó figyelmét? Természetesen a képek!
Lépés №1: megtalálni relatednews.tpl sablonfájlba
Kezdetben ez a fájl tartalmazza a következő kódot:
Meg kell cserélni a kódot az alábbi:
- a neve a mi osztály, amely azt fogja létrehozni CSS.
[Xfvalue_img1] - az a kód, a további mezőket, amelyen keresztül azt levezetni az első képet cikk (kísérletezik Viola és mikrorazmetkoy). Ha nem írja ki az első kép a cikket dop.pole helyett [xfvalue_img1] beszúrni.
- Kép (title), amely hozzáadódik a viola (a leírás a kép keresőprogramok).
Lépés №2: szerkesztheti a stíluslapot.
Bárhol fájlt az osztály kódját.
.relatednews - a név az osztályban.
display: inline-block; - Az érték inline-block generál egy blokk elem, a viselkedés a sor elem (több aktív opció hasznos lehet a hibák kijavítását kijelző hülye IE böngésző).
szélesség: - szélessége a kép.
magasság: - a kép magasságát.
Ez elegendő ahhoz, hogy megjelenítse a képet vízszintes irányban.
Beauty hozzá keret.
padding. - A mező értéke a pixelek. Minél nagyobb az érték, annál vastagabb keret.
border-radius. - kerekítés sarkok. (-webkit átnyúló-sugár: - a határokon böngésző)
box-árnyék. - árnyék kereteket. (-moz-box-shadow: - a cross-browser)
Ez az! Játssz tsiferkami paraméterek és alkalmazkodik a webhelyen.
Az Internet Explorer, az megjelenik ugyanúgy!
Köszönjük a figyelmet!
PS: ne felejtsük el, hogy törölje a cache az admin felületen!
Kapcsolódó cikkek