Hogyan kell végrehajtani a CSS design négyzetet-s
Üdvözlöm, hogy a blogom, kedves olvasók, érdekli Web design. Ma megmutatom neked egy jó technika, amely megteremti nagy négyzeteket, sokkal szebb, mint a kínált html alapértelmezés szerint. Megmutatom, hogyan mennek a dolgok CSS design négyzetet Nő. Más szóval, megmutatom, hogyan lehet szép css négyzeteket (jelölőnégyzet), azaz kullancs.
inicializálunk
Tehát, meg kell kezdeni annak érdekében, hogy a HTML-kódot, amely pedig a négyzeteket és feliratok (címke), ezeken a területeken társítani egymással, úgy, hogy ha rákattint a címkén beállíthatja a négyzetet.
Mindannyian, webmesterek és a fejlesztők folyamatosan dolgoznak a telek. Szeretném, ha ajánlani a helyszínen, hogy élvezi magát:- Reg.ru - rögzíti, és meghosszabbítja domain nevek, egy nagyon megbízható cég!
- HostIQ - tárhely prémium minőségű.
- Ihor - több költségvetési, hanem nagyon magas színvonalú internetes tárhely szolgáltató.
- Telderi.ru - az egyetlen megbízható csere RuNet, ahol lehet kapni kész weboldalak bevételt!
Vegye le a bemeneti teszünk ki Span
Tehát most már, hogy elrejtse a szokásos négyzeteket oldalon.
Most kell valahogy hivatalossá az új területeken. Mi végre az elemek span, mivel a címke alatt.
bemenet [type = "checkbox"] + címke span kijelző: inline-block;
szélesség: 40px;
margin-right: 10px;
magasság: 40px;
függőleges-align: közép;
border: 5px zölden világít;
kurzor: pointer;
border-radius: 5px;
>
Ez a szelektor választottuk minden Span a címkéket, amelyek a kód mögött közvetlenül a bemeneti s típusának jelölőnégyzetet. Így a tervezési fog vonatkozni a Spano. Adunk nekik egy blokk-line típusú, egy bizonyos szélesség és magasság, padding a jogot, hogy nem egybefüggő szöveg szorosan.
A regisztráció, azt hozzá egy vastag zöld határon és lekerekített sarkokkal, hogy 5 pixel. Is hozzá stílust a kurzor - ha felett lebeg Átnyúlik meg kell változtatni a szokásos formáját, hogy ujjal mutatva.
Ezáltal, hogy működik
Most arra van szükség, hogy megbizonyosodjon arról, hogy ha rákattint belül Span, vagyis ha kiválaszt néhány lehetőséget, hogy automatikusan tegye egy kullancs. Ehhez kezdek találni az interneten a megfelelő ikont egy kullancs (it png formátumban), csökkenti, hogy a mérete a területen. Most is, hogy helyezze be az alábbi kódot:
bemenet [type = "checkbox"]: ellenőrzött + címke span háttér: url (btn.png) no-ismétlődés;
>
Minden most dolgozik! Próbáld flip és látni fogja, hogy a választás egy gyönyörű pipa. Saját kép ugyanabban a könyvtárban, mint a css fájlt, és az úgynevezett btn.png. ezért ezt a bejegyzést.