06/01
Nola sortu Tabbed Navigation CSS eta Irudirik gabe
Web orrien nabigazioa zerrenda baten forma da, eta fitxako nabigazioa zerrenda horizontala da. Oso erraza da CSS bidez nabigazio horizontala horizontalki sortzeko, baina CSS 3- k beste tresna batzuk ematen dizkizu, are hobeto ikusteko.
Tutorial honek HTML eta CSS bidez egingo du CSS fitxako menu bat sortzeko. Egin klik esteka horretan nola egingo den ikusteko.
Fitxa-menu honek ez ditu irudiak , HTML eta CSS 2 eta CSS 3 erabiltzen ditu. Erraz editatu daiteke fitxa gehiago gehitzeko edo hauen testua aldatzeko.
Arakatzailearen laguntza
Fitxa menuko nabigatzaile nagusietan lan egingo du. Internet esploratzaileak ez ditu biribildutako txokoak erakutsiko, baina, bestela, Firefox, Safari, Opera eta Chrome bezalako fitxak erakutsiko ditu.
02 de 06
Idatzi zure menu-zerrenda
Nabigazio menuak eta fitxak guztiak zerrenda soil bat besterik ez dira. Beraz, lehenengo gauza egin nahi baduzu, zure nabigazio-nabigazioan joan nahi duzun esteken zerrenda desordenatua idaztea da.
Tutorial honek zure HTML testu-editorean ari zaren idazten ari dela suposatzen du, eta zure webguneko HTML kodea zure webgunean non dagoen jakingo duzula.
Idatzi hau bezalako ordenadore zerrenda hau:
- class = "tablist">
- CSS 3
- id = "current"> Fitxak
- for
- menuak
Kodea bi gauza deitzen ditu: class = "tablist" eta id = "current". Lehenengoa beharrezkoa da . Taulen zerrenda klase ordenatuan ez baduzu jarri, fitxak ez dira funtzionatuko. Bigarrena hautazkoa da. Jarri id = "korrontea" orri horretan nabarmendu nahi duzun orrialdean. Erabili ohi dut hau naizen orrialdea nabarmentzeko, baina erabil dezakezu fitxa garrantzitsuena nabarmentzeko. Edo erabat ezabatu dezakezu.
03 de 06
Hasi Estiloa fitxa editatzea
Kanpoko estilo-orri bat edo barneko estilo-orri bat erabil ditzakezu. Laginaren menuko orrialdeak dokumentuaren
barruko estilo-orri bat erabiltzen du.Lehenengoa UL estiloa dugu
Hau da, non erabiltzen dugun klaseen zerrenda .in HTMLa. UL etiketa estilizatu beharrean, zure orrialdeak ordenatu gabeko zerrenda guztiak estilatuko lirateke, UL klaseak bakarrik estilatu beharko zenituzke. tablist Beraz, zure CSS lehen sarrera izan behar du:
.tablist {}Giltza giltza amaieran (}) jarri aurretik gustatzen zait, beraz, ez dut ahaztu geroago.
Zerrenda ordenatu gabeko etiketa zerrenda bat erabiltzen ari gara bitartean, baina ez dugu inolako buletak edo zenbakiak sartu nahi. Beraz, gehitu behar duzun lehenengo estiloa da. Zerrenda-estiloa: none; Horrek zerrendan dagoen bitartean arakatzaileari kontatzen dio, aurrez zehaztutako estilo ez duten zerrenda bat da (balak edo zenbakiak bezala).
Ondoren, zure zerrendaren altuera ezar dezakezu bete nahi duzun tokira. 2em aukeratu nuen nire altuera, letra-tamaina estandarraren bikoitza dela eta tabulazioaren testuaren goialdetik eta behetik erdi bat ematen duena. altuera: 2em; Baina zabalera ezar dezakezu nahi duzun tamainara. UL etiketak automatikoki zabaleraren% 100 hartuko du, beraz, uneko edukiontziarengatik baino txikiagoa izan ezean, zabalera utzi dezakezu.
Azkenean, zure maisu-estiloko orriek ez badituzte UL eta OL etiketak aurrez zehaztu, jarri nahi dituzu. Horrek esan nahi du UL, UL eta UL-ko marjinak estaltzen dituzula. padding: 0; marjina: 0; mugan: none; UL etiketa berrezarri baduzu, marjinak, estalkiak edo ertzak aldatu ditzakezu zure diseinura egokitzen diren zerbaitetara.
Zure azken .tablist klaseak hau izan beharko luke:
.tablist {list-style: none; altuera: 2em; padding: 0; marjina: 0; mugan: none; }04 de 06
LI zerrendako elementuak editatzea
Behin ordenatu gabeko zerrenda zerrendatu ondoren, LI etiketak estiloa behar duzu barruan. Bestela, estandar zerrenda eta mugimendu bakoitza hurrengo lerroan egongo dira zuzenean zure fitxak jarri gabe.
Lehenik eta behin, zure estiloa konfiguratu:
.tablist li {}Orduan zure fitxak flotatu nahi dituzu lerro horizontal batean lerrokatuta. flotatzen: ezker;
Eta ez ahaztu fitxen arteko marjina batzuk gehitzeko, beraz, ez dira elkartzen. marjina-eskuin: 0.13em;
Zure estiloak itxura hau izan behar du:
.tablist li {float: left; marjina-eskuin: 0.13em; }05 de 06
Tabs Look Do Like fitxak egin CSS 3rekin
Estilo-orri honetan jasotze astunik handiena egiteko, zerrenda desegokiak barruan lotzen ditut. Arakatzaileek beste web orri batzuek baino lotura gehiago egiten dituztela aintzatesten dute, beraz, errazagoa da arakatzaile zaharragoak nabigazio-esteken inguruko estekak txertatzea, aingura-etiketa (estekak) eransteko. Lehenik eta behin, idatzi zure estiloko propietateak:
.tablist li a {} .tablist li a: hover {}Fitxa hauek aplikazio batean fitxak bezalakoak izan beharko luketenez, tabulazioaren area osoa klikagarria izan dadin nahi duzu, estekatutako testua ez bakarrik. Horretarako, A etiketa bat " blokeatu " egoeran arrunta bihurtu behar duzu. display: block; (Ezberdintasunari buruz gehiago jakin nahi baduzu, irakurri blokeo-maila vs. lerro elementuak ).
Orduan, zure fitxak elkarren simetrikoa izateko bide erraza da, baina oraindik ere testuaren zabalera doitzeko flexioa eskuin eta ezkerreko betegarria da. Betegarrien taulen propietate hau erabiltzen nuen goiko eta beheko 0 eta eskuinetara eta ezkerrera 1era ezartzeko. betegarria: 0 1em;
Esteka azpimarratu ere ezabatu nahi izan dut, tabulak estekak bezain gutxiago ikusten dituztelako. Baina zure ikusleak hori nahastu balute, utzi lerro hau. link-decoration: none;
Fitxa horretako ertz finko bat jarriz gero, fitxak itxuraz egiten ditu. Mugako taupada-propietatea erabili nuen mugan lau aldeetatik mugitzeko: 0.06m ona # 000; Ondoren, mugako beheko propietatea erabili zen behetik kentzeko. mugatik-bottom: 0;
Ondoren, zenbait doikuntza egin ditut fitxen letra-tipoa, kolorea eta atzeko planoko kolorea. Konfiguratu zure gunearekin bat datozen estiloak. letra: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; color: # 000; background-color: #ccc;
Goiko estiloak guztiak hautamarrean sartu behar dira .tablist li a, arauaren arabera, ainguraketen etiketak orokorrean eragina izan dezaten. Orduan, fitxak gehiago klikagarriak izan daitezen, estatuko zenbait egoera gehitu beharko zenituzke .tablist li a: pasatzean.
Testuaren kolorea eta atzeko kolorea aldatu nahi badituzu, saguarekin sagua sakatzen duzunean. hondo: # 3cf; color: #fff;
Eta beste gogorarazpen bat ere eman nion azpian azpimarratu nahi ez dudan nabigatzaileei. Testu-decoration: none; Metodo arrunt bat beste azpimarratu nahi baduzu, sagua fitxa gainean sartzen duzunean. Hori egin nahi baduzu, aldatu testurako dekorazioa: azpimarratu;
Baina non dago CSS 3?
Arretaz arduratzen bazara, ziurrenik ohartu zara ez duzula estilo-orriko CSS 3 estilorik erabili. Nabigatzaile moderno batean lan egiten duen abantaila du, Internet Explorer barne. Baina ez du tabuladoreak kutxen koadroak baino zerbait gehiago izaten. CSS 3 estiloko deiak ertz-erradioa gehituz (eta arakatzaileko berariazko deiak lotutakoak) biribildutako ertzak egin ditzakezu, manila karpetan fitxa gehiago ikusteko.
Estandarrak .tablist-era gehitu behar dituzun estiloak hauek dira: -webkit-border-top-right-radius: 0.50em; -webkit gaindiko-top-left-eremua: 0.50em; -moz gaindiko-erradioak-topright: 0.50em; -moz gaindiko-erradioak-topleft: 0.50em; mugatik-top-eskuin-eremua: 0.50em; mugatik-top-left-eremua: 0.50em;
Hauek dira idatzitako azken arau hauek:
.tablist li a {erakutsi: blokea; betegarria: 0 1em; Testu-decoration: none; mugan: 0.06m ona # 000; mugatik-bottom: 0; letra: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; color: # 000; background-color: #ccc; / * CSS 3 elementu * / webkit-border-top-right-radius: 0.50em; -webkit gaindiko-top-left-eremua: 0.50em; -moz gaindiko-erradioak-topright: 0.50em; -moz gaindiko-erradioak-topleft: 0.50em; mugatik-top-eskuin-eremua: 0.50em; mugatik-top-left-eremua: 0.50em; } .tablist li a: hover {background: # 3cf; color: #fff; Testu-decoration: none; }Estilo hauei esker nabigatzaile nagusietan lan egiten duen tabuladore bat daukazu eta CSS 3 arakatzaileekin bateragarriak diren inprimatutako fitxetan itxura du. Hurrengo orrialdea are gehiago janzteko aukera gehiago ematen dizu.
06ko 06
Nabarmendu uneko fitxa
HTMLan sortu nuen, ULek elementu bat izan zuen ID batekin. Honek beste estilo bat eman diezaioke gainerako bati. Arazo ohikoena uneko fitxa nabarmentzea da, nolabait esateko. Horra hor beste modu bat pentsatzea, zuzenean ez diren fitxak grisa izatea nahi baduzu. Idatzi non dagoen idazten duzun orrialde desberdinetan.
Edozein # korronte etiketa bat baita #current A: hover sta estiloa dut, beraz, biak apur bat desberdinak dira. Kolorea, atzeko planoko kolorea alda dezakezu, baita elementu horren altuera, zabalera eta betegarria ere. Egin ezazu zure diseinua zentzua edozein dela ere.
.tablist li # korronte bat {background-color: # 777; kolorea: #fff; } .tablist li # korronte a: hover {background: # 39C; }Eta zuk amaituko zara! Zure webguneko menu-barra bat sortu duzu.