Kuidas Kohanda sisendnuppu

Online pangandus kasutab sisestusklahvide . Hemera Technologies / Photos.com / Getty Images

sisestusklahvide kõige sagedamini võimaldab koduleheküljel külastaja esitada sisu vormi - midagi lihtsat kontakti kasti online ankeeti.Kasutades CSS stiili lehed ja põhiteadmised HTML, saate kohandada neid nuppe ilmuvad aga soovite.

juhised

  1. avatud lähtekoodi fail oma vormi Notepad või teise teksti või HTML editor.

  2. Loo laadilehte kirjutades järgmised & lt; head & gt;osa faili otse & lt; title & gt;line:

    & lt; style type = "text / css" & gt;
    & lt; / style & gt;

  3. Rääkige oma -laaditabelite sa lähed tuleb luua stiili & lt; input & gt;nuppu klassile "minu-nupp" lisatakse järgmine aasta kahe ainena stiilis & gt;read:

    input.my-nuppu {}

    Et see toimiks täpselt, siis tuli tunnistada "minu-nupp" klassi sees nuppu Esita.Sa võid kasutada ükskõik millisesse klassi nimi, mida soovite;"minu-nupp" on lihtsalt üks näide.

  4. Muuda oma sisendnuppu kuulutades reeglite sees looksulg, lõpetades iga reegel semikooloniga.Et alust

    ada, muuta laiuse ja kõrguse nuppu kasutades "laiuse" ja "kõrgus" atribuudid:

    input.my-nuppu {
    laius: 200px;
    kõrgus: 100px;
    }

  5. Muuda värvi nuppu kasutades "background-color" atribuut ning värvi teksti "color" atribuut:

    background-color: black;
    värv: kollane;

  6. Muuda piiri nuppu, millel on "piiri" atribuut.Toas piiri omadus, mida saab deklareerida piiri laius pikslites, type - punktiir, tormas jms --and värv:

    piiri: 4px tormas kollane;

  7. ilme muutmine fonti kasutades atribuudid nagu "font-size:" "text-muuta," ja "font-family" atribuudid:

    font-size: 30 px;
    font-family: Trebuchet MS;
    teksti muuta: suur-;

  8. Kasuta custom taustapilti koos "background-image" atribuut.Salvesta pilt töölauale button.jpg.Vabane "background-color" väärtus ja seatud "border" 0 jooksul oma lähtekoodi faili:

    background-image: url ("button.jpg");
    piiri: 0;

Tips & amp;Hoiatused

  • Leia rohkem laadilehte atribuudid kasutada kohandada oma sisestusklahvide vaadates üle Mozilla Developer Network CSS kirjanduse loetelu (vt Resources).

Resources

  • Mozilla Developer Network: CSS Viide
903
0
1
Web Design