Kiemelve a képet, vagy hozzon létre egy gombot css
Úgy döntöttem, hogy írok egy ilyen feljegyzést itt azok számára, akik nem profi HTML és CSS. Azt mondom magamnak is, nem vagyok profi, de nem tudok újra bármely sablon felismerhetetlenségig, beleértve a szerkesztés stílus és a mellett a minta különböző chipek.
Oly gyakran van az elején, amikor még nem szorosan együttműködött a stílusok és használata DIV elrendezést (preferált táblázatot) merült fel, mintha azt mondaná, nem értik, hogyan lehet összekapcsolni bizonyos belső oldalra, vagy más oldalon csinálni mint egy gombot.
Ezt találtam egy gombot a CSS a Google segítségével, és add meg a honlapon. Most, amikor elkezdtem tanulni részletesebben az elrendezés és a CSS DIV-ek, ez úgy értendő, hogy ez valójában nagyon egyszerű.
Most azt akarom, hogy mutassa meg valamilyen módon, hogy kiemelje a képet, vagy kapcsolja egy egyszerű link egy gombot.
Tegyük fel, hogy valahol a normál kép, és szeretné használni, mint egy gomb az oldalon.
Itt azt feltételezzük, a következő kép:
Add, hogy az oldal nagyon egyszerű. Ha dobd a gyökere a helyén, a kód a következő:
Tedd túl könnyű hivatkozás, csomagolja a kódot ahhoz, hogy felcímkézni a linkeket
Az eredmény egy egyszerű kép hivatkozva megvilágítás nélkül:
De azt akarjuk, hogy, ha lebeg a gomb világít. Ezt meg lehet tenni számos módon. Most nézd meg őket.
Módszerek megvilágítási helyettesítésével egy másik képet
Az első dolog, amire szüksége van - az, hogy még egy képet egy másik színű vagy világosabb (sötétebb) és helyettesítse azt a kurzort.
Például egy kép, ami magasabb, mint a már felfedezték a Microsoft Office Picture Manager, tette szinte fekete-fehér és megtartotta a nevét knopka_bablo-1.png. Kiderült, hogy a két kép (töltse ki őket hosting; ebben az esetben ki van töltve az oldalon root):
Ki lebeg a kurzor kép változik a fekete-fehér szín, használja a következő kódot a szövegben vagy webhelysablonhoz:
És itt van az eredmény (hover):
Ez is lehet másképpen. Az a CSS-stíluslap (általában style.css a sablon kód), az azonosító nevét lehet gondolni minden, abban az esetben május img-bablo:
És a linket csomagolás div tag a megfelelő azonosítóval (egyszerűen az alábbi kódot beilleszteni a hely, ahol meg szeretné jeleníteni a képet):
Ugyanazt az eredményt kapjuk (hover)