Fejleszteni tippeket css3 használata nélkül script

* Nyelv: HTML / CSS
* Nehézség: Közepes
* Idő teljesítmény: 20 perc

Ó, ezek a tippek lehet a válasz, hogy sok kérdést a felhasználók, vagy ha azt szeretné, hogy valamit, hogy jelezze a látogatók. Ma sok honlapok megtalálható az interneten, hogy tippeket, de ... hogy mindent megtesznek azért, hogy vezessenek be a honlap? Szeretnénk, hogy meséljek egy érdekes módja, teljesen kizárja a j # 097; vascript. Ma fejleszteni egy nagyon jó tipp, CSS3 Tiszta kód, és akkor majd hozzá kell igazítani a mobil változat, és ez itt, hogy mi lesz, hogy keményen dolgozni, mert itt már van, hogy egy kis scriptet j # 097; vascript Dean Edwards (Dean Edwards) - IE9.js.

Megjegyzés: Az ötletek teljes mértékben támogatott böngésző IE, kezdve 8. verzió. IE7 támogatja őket, kivéve egy mobil változata (a változat azzal a lehetőséggel kattintással).

És most a vezetés festett szakaszokban. Továbbá, ne felejtsd el letölteni a fájlokat javasolt az elején ezt a cikket.

1. lépés: A hasított

Kezdjük a fejlesztés vezetője a dokumentumot, majd adja be a stíluslapot. Törölheti tut.css kidolgozása során a saját projekt, mert ez a fájl csak a bemutatót ebben a cikkben.

Kihasználtuk HTML5 fájltípus, amelyet a továbbiakban! DOCTYPE html, majd hívatta két stíluslapok. Az első táblázat a felelős az átlátszó változat, de a mi eredeti dokumentumot, akkor válassza ki néhány témát. A második táblázat - ez tut.css, amit a fent tárgyalt, és használják a tervezési például a mai cikk, így szabadon használhatja.

Most, hogy elkészült a fejlesztés a dokumentum fejlécében, menjünk tovább, hogy a fejlesztés a tetemet közvetlenül tippeket. Ebben a cikkben, akkor használj rendezetlen listát, de használható bármilyen lehetőség, hiszen mi csak a CSS osztály nevét, ahelyett elosztásának magát a listát, amely lehetővé teszi számunkra, hogy könnyen be osztályok bármely kívánt helyre.

Miután a csúcs osztályt kell tooltipL osztály (azaz strong class = „tooltipL”), amelyet bármilyen tipp, hogy megjelenik a bal oldalon a tételt, amelyre a kurzor már indukált. Ebben az esetben vonatkozik az első link.

A példa szerint a fenti, akkor a cikket írjuk le a folyamat kialakulásának a további utasításokat. Elvileg minden közel azonos minden kérdésre. Az egyetlen különbség a fokozatok. Ehelyett tooltipL fogunk .tooltipR minden tippeket található a jobb oldalon az elem, amelyen a kurzor; .tooltipB, alján található, és a .tooltipT, tetején található. Bármikor, amit akar, akkor adjunk hozzá egy új kártyát a saját projekt. Mindössze annyit kell tennie: használni egy ilyen osztály, attól függően, hogy hol szeretné megjeleníteni a prompt.

Tippek mobileszközök

Tehát elkészült a fejlesztés HTML. Most nézzük meg a CSS, hogy a mi „baby” dolgozni!

2. lépés: A funkcionális tervezésére és tervezés CSS segítségével

A példában használjuk a stílus tip-transparency.css, de a lényeg, akkor válasszon egy másik stílus, tetszik a legjobban.

Kezdeni, meg kell hozzá egy kis stílust a mi osztályok.
Itt egy paraméter-relatív pozicionálás (position: relative), valamint a soros kijelző egység. Így a csúcs fog kialakulni összhangban a elemeket, amelyekhez a kurzor legyen.

Ezután meg kell elrejteni a nyomokat, hogy a pillanat, amikor a szóban forgó terméket nem kerül sor egy kattintás, vagy amíg az egér vége. Ehhez már csak ki kell választania egy osztály minden irányban, és használja a paraméter display: none.

Most van egy működő csúcsát, de meg kell kiállítani. A legtöbb minden ötlet majdnem ugyanaz, kivéve egy pár pillanatig, leírjuk később.

Mint látható, szükségünk van a tippeket nézett azonosak, így azok mind azonos háttérrel és szint kijelzés sűrűségű mutatott 85% -kal. Azt is hozzá egy box-árnyék, ami a mélységet és az érintett folyamatos határtól a beltartalmi elválasztani a fő oldal tartalmát.
Azt is meg kell jegyezni, a következő fontos szempontokat: min-width: 200px használjuk a nyíl volt ugyanazon a vonalon az elem, amelyből kiterjed egy csipetnyi abszolút pozicionálás (position: absolute) van kitéve a célzást, hogy ne befolyásolja mások elemek, és a z-index: 10 használunk annak érdekében, hogy tip mindig több mint a többi tartalmát.

Tehát, mint a különbség a tippeket, amelyek közül néhány található képest az elem, amelyből származnak. Ezek az értékek úgy tűnik, hogy meg kell dolgozni a legjobb, és nem kell változtatni, de mégis, ha meg kell változtatni őket, hogy mindent megfelelően működjön a projektekben, akkor legjobb, ha egy dinamikus újra pozicionálása j # 097 ; vascript, de ez nem releváns a jelen cikket.

Tanulás a CSS alábbi kódot, akkor láthatjuk, hogy mi indokolja a tippeket, hogy azok az azonos sorban az elemek, amelyekből távoznak, és a relatív pozícionálás a fő csoportja tartja nyomokat az elem, melyet kivetett felett, hogy van. e. Tippek nem kerülnek azonnal utána.

Majdnem kész! Most arra van szükség, hogy a nyíl a nyomokat, amelyek jelzik nekik. Ismét van néhány különbség, amely fogunk beszélni később.

Itt a különbség abban az irányban, amelyben meg kell mutatni, hogy a nyíl, valamint valami, amit használni egy szilárd háttér az egyik oldalon és átlátható - a többit. Azt is meg kell mozgatni őket lefelé és kissé jobbra mutató nyilat, hogy néz ki, ha ez található az elem.

Miután ezt megtette, a leckét vége, és a végeredmény legyen nagyjából ugyanaz, mint az alábbi képen. Ha igen, nem úgy néz ki, mint a képen látható, majd visszatér egy kicsit, és ellenőrizze a kódot a hibákat. Talán valamit nem.

Annak érdekében, hogy a projekt úgy néz ki mint a képen, használja tut.css fájlt.