Kuidas teha nuppu, kui sait ?

Kuidas teha nuppu, kui sait ?

Vaata videot

Kuidas teha nuppu, kui sait?

nuppu kohas -, on atribuut vabatahtlik;ilma selleta on võimalik teha lihtsaid teksti lingid või regulaarselt menüüs nimekirja.Aga elegantne nuppu kaunistada lehel esile menüü teha märkuse, näiteks ettepaneku leht oma järjehoidjaid.Peaasi, et ta ei ole vastuolus üldiste disain stiili ja allika sisu.

Kuidas teha nuppu kasutades html

nupud ei pruugi teha.Nad võivad ka teha programmiliselt kasutades skripte või CSS ja HTML.Kuid see on lihtne ristkülikukujuline nupud, kuid alade tõsine sisu ja minimalistliku disaini, näiteks õigus-, see on, mida sa vajad.

Kuidas teha skripti nuppu, me vaatame, kuidas mõned järgmine kord.Nüüd keskendume kõige lihtsam variant - html.Oletame, et soovid juhtida saidile nupud "Kodu", "Meie", "Kontakt" jneParem nuppude teksti ja linke, mis viivad neid lehti.

pelk viide kirjutatakse: & lt;a href = "leheküljel aadress" & gt; teksti lingid & lt; / a & gt;.Vaata, see struktuur on järgmine: lingi tekst.Te saate muuta fonti.Näiteks, sest: & lt;font size = "+ 1" color = # ff0000 href = "leheküljel aadress" & gt; teksti lingid & lt; / a & gt;.Selle tulemusena lingi tekst värvub punaseks, fondi, ühe võrra.# Ff0000 - seda värvi nimetust.Koodid eri värvi võib leida internetis.Näiteks, siin on väike tabel põhilised värvid, mida ei saa määrata koode ja sõnad inglise keeles.Täielik tabel värve ja koodid on siin.

kasutatud CSS

nuppu Registreerida kood kõrvuti link, luua stiili viitetekstis.Selleks on "pea" kohapeal kusagil sildid & lt;Head & gt;ja & lt; / Head & gt; pange sildid & lt;stiilis & gt;ja & lt; / style & gt; ja nende vahel kirjutada, mida teksti lingid me tahame näha.Siin on, kuidas:

& lt;Head & gt;

& lt;stiilis & gt;

endale {suurus: +1;Värv: # 0000ff}

& lt; / style & gt;

& lt; / Head & gt;

Aga see on ühine seos, kuigi kaunistatud omapäraselt.Kuidas teha nuppu?Selleks kirjuta teksti lingid taustal, kui üldine taust lehel.Laske nupp on hall, värvi kood # 999999.Lisa atribuudi "tausta» - taust.Ja allajoonimine lingid on parem eemaldada.Niisiis, lisada veel üks omadus: text-decoration: none.

& lt;Head & gt;

& lt;stiilis & gt;

endale {TAUST: # 999999;suurus: +1;Color: # ff0000;Text-decoration: none}

& lt; / style & gt;

& lt; / Head & gt;

Soovi korral saad teha raam tausta laius 1 piksel on must - Oskus ÄÄRIS 1px tahke # 000000.Saada:

& lt;Head & gt;

& lt;stiilis & gt;

endale {ÄÄRIS 1px tahke # 000000;Taust: # 999999;suurus: +1;Color: # ff0000;Text-decoration: none}

& lt; / style & gt;

& lt; / Head & gt;

Meil ​​on nüüd link suuremas kirjas punasega hallil taustal musta raami.Väga sarnane nuppu.

«Press»

nuppu, kui soovid illusiooni, et nuppe vajutada, on vaja ette näha stiilid lingid siis, kui viid kursori seda ja kui klõpsate seda.Oletame, et tekitatud Kursorinupu muutub heledamaks, ja vajutades tumedam ja laiema raami.Meie disain on keeruline:

& lt;Head & gt;

& lt;stiilis & gt;

endale {TAUST: # 999999;suurus: +1;ÄÄRIS 1px tahke # 000000;Color: # ff0000;Text-decoration: none}

A: hover {TAUST: # cccccc;ÄÄRIS 1px tahke # 000000;Color: # ff0000;Text-decoration: none}

A: aktiivse {TAUST: # 666666;ÄÄRIS 2px;Color: # ff0000}

& lt; / style & gt;

& lt; / Head & gt;

Nüüd on meil "Press" nuppu.Et seda näha, kopeerida järjehoidja meie "head" ja siis vahel sildid & lt;body & gt;ja & lt; / body & gt;kirjuta oma viide:

& lt;HTML & gt;

& lt;Head & gt;

& lt;stiilis & gt;

endale {TAUST: # 999999;suurus: +1;ÄÄRIS 1px tahke # 000000;Color: # ff0000;Text-decoration: none}

A: hover {TAUST: # cccccc;ÄÄRIS 1px tahke # 000000;Color: # ff0000;Text-decoration: none}

A: aktiivse {TAUST: # 666666;ÄÄRIS 2px;Color: # ff0000}

& lt; / style & gt;

& lt; / Head & gt;

& lt;body & gt;

& lt;a href = "leheküljel aadress" & gt; teksti lingid & lt; / a & gt;

& lt; / body & gt;

& lt; / HTML & gt;

Salvesta fail laiendiga.html.Ava see iga brauseriga, vaadake, kuidas nuppu.