01 de 06
Conas Nascleanúint Tabbed a Chruthaigh le Íomhánna CSS agus Uimh
Is foirm liosta é loingseoireacht ar leathanaigh ghréasáin, agus is cosúil le liosta cothrománach a bhaineann le nascleanúint tabbed. Tá sé éasca go leor nascleanúint cluaisín cothrománach a chruthú le CSS, ach tugann CSS 3 roinnt uirlisí níos mó dúinn chun iad a dhéanamh níos cuma fós.
Tabharfaidh an teagaisc seo duit tríd an HTML agus CSS ag teastáil chun roghchlár tabbed CSS a chruthú. Cliceáil ar an nasc sin chun a fheiceáil conas a bheidh sé cuma.
Úsáideann an roghchlár tabbed seo aon íomhánna , ach HTML agus CSS 2 agus CSS 3. Is féidir é a eagarthóireacht go héasca chun cluaisíní breise a chur leis nó an téacs a athrú iontu.
Tacaíocht Brabhsálaí
Oibreoidh an roghchlár cluaisín seo i ngach príomhbhrabhsálaí . Ní thaispeánfaidh an taiscéalaí Idirlín na coirnéil chothromaithe, ach ar shlí eile, taispeánfaidh sé cluaisíní díreach cosúil le Firefox, Safari, Opera, agus Chrome.
02 de 06
Scríobh do Liosta Menu
Níl liosta neamhordaithe i ndáiríre ar na biachláir agus na cluaisíní loingseoireachta go léir. Mar sin, is é an chéad rud is mian leat a dhéanamh ná liosta de naisc a scríobh chuig an áit ar mhaith leat do nascleanúint tabbed.
Tá an teagasc seo ag glacadh leis go bhfuil tú ag scríobh do HTML in eagarthóir téacs agus go bhfuil a fhios agat cá háit an HTML a chur ar do roghchlár ar do leathanach gréasáin.
Scríobh do liosta neamhordaithe mar seo:
- class = "tablist">
- CSS 3
- id = "reatha"> Tabs
- Chun
- Roghchláir
Feicfidh tú go n-éilíonn an cód dhá rud: class = "tablist" agus id = "current". Is gá an chéad cheann. Mura gcuireann tú an rang tablist ar do liosta neamhordaithe, ní oibreoidh na cluaisíní. Tá an dara rogha roghnach. Cuir an id = "reatha" ar cibé cluaisín ar mhaith leat a bheith béimnithe ar an leathanach sin. Bainim úsáid as seo de ghnáth chun an leathanach a bhfuil mé ar siúl agam a tharraingt siar, ach is féidir leat é a úsáid chun aird a tharraingt ar an gcláir is tábhachtaí. Nó is féidir leat é a bhaint go hiomlán.
03 de 06
Tús a Thosú Do Bileog Stíl
Is féidir leat bileog stíl seachtrach nó bileog stíl inmheánach a úsáid . Úsáideann leathanach an roghchláir sampla bileog stíl inmheánach sa
An Chéad Feicfimid Stíl Féin OL
Seo é an áit a n-úsáideann muid an tabliosta ranga. An HTML. Seachas an clog OL a stíliú, rud a stílfeadh gach liosta neamhordaithe ar do leathanach, ba chóir duit an rang OL a stíl. Tablist Mar sin, ba chóir go mbeadh an chéad iontráil i do CSS:
.tablist {}Is maith liom a chur sa deireadh braceach coileach (}) roimh an am, mar sin ní dhéanaim dearmad air níos déanaí.
Cé go n-úsáideann muid liosta liosta neamhordaithe don liosta roghchláir cluaisíní, ach nílimid ag iarraidh go mbeadh aon urchair nó uimhreacha ag cromadh. Mar sin, is é an chéad stíl ba chóir duit a chur leis. liosta-stíl: none; Insíonn sé seo don bhrabhsálaí, cé gur liosta é, is liosta é nach bhfuil aon stíleanna réamh-chinnte (cosúil le piléar nó uimhreacha cosúil leis).
Ansin, is féidir leat airde do liosta a shocrú chun an spás is mian leat é a líonadh. Roghnaigh mé 2em ar mo airde, mar go dúbailte sin an clómhéid caighdeánach, agus tugann sé thart ar leath em thuas agus thíos téacs an chluaisín. airde: 2em; Ach is féidir leat do leithead a leagan ar cibé méid is mian leat. Tógfaidh clibeanna OL suas go huathoibríoch 100% den leithead, mar sin mura rud é gur mhaith leat a bheith níos lú ná an gcoimeádán reatha, is féidir leat an leithead a fhágáil amach.
Mar fhocal scoir, mura bhfuil réamhshocruithe le haghaidh do chláir mháistirstíl le haghaidh clibeanna Ollscoil Luimnigh agus OL, ba mhaith leat iad a chur isteach. Ciallaíonn sé seo gur cheart duit na teorainneacha, na corrlaigh agus an stuáilín a mhúchadh ar do Ollscoil Luimnigh. stuáil: 0; imeall: 0; teorainn: none; Má tá tú ag athshocrú cheana féin ar an gclib OL, is féidir leat na corrlaigh, an stuáil nó an teorainn a athrú ar rud éigin a d'oirfeadh le do dhearadh.
Ba chóir go mbeadh an rang deiridh .tablist seo mar seo:
.tablist {liosta-stíl: none; airde: 2em; stuáil: 0; imeall: 0; teorainn: none; }04 de 06
Ag Eagrú na Míreanna Liosta LI
Nuair atá tú ag styled do liosta neamhordaithe, ní mór duit na clibeanna LI a stíl taobh istigh de. Seachas sin, gníomhóidh siad mar liosta caighdeánach agus gluaiseoidh siad go dtí an chéad líne eile gan do chuid cluaisíní a chur i gceart.
Ar dtús, cuir do mhaoin stíl ar bun:
.tablist li {}Ansin, is mian leat do chuid cluaisíní a snámháil ionas go mbeidh siad ag teacht suas ar an bplána cothrománach. snámhphointe: ar chlé;
Agus ná déan dearmad roinnt corrlach a chur idir na cluaisíní, mar sin ní chumaíonn siad le chéile. ceart corrlach: 0.13em;
Ba chóir go mbeadh cuma ar do chuid stíleanna mar seo:
.tablist li {float: left; ceart corrlach: 0.13em; }05 de 06
Breathnaíonn na Tabs ag tabhairt taitneamhachtaí le CSS 3
Chun an chuid is mó den ardú trom sa bhileog stíl seo a dhéanamh, táim ag díriú ar na naisc laistigh den liosta neamhordaithe. Aithníonn brabhsálaithe go ndéanann naisc níos mó ar leathanach gréasáin ná clibeanna eile, agus mar sin tá sé níos éasca brabhsálaithe níos sine a bheith ag cloí le rudaí cosúil le hover stáit má chuireann tú iad chuig an gclib ancaire (naisc). Scríobh do chuid stíl airíonna den chéad uair:
.tablist li a {} .tablist li a: hover {}Ós rud é gur chóir go mbeadh na cluaisíní seo ag feidhmiú mar chluaisíní in iarratas, ba mhaith leat go mbeadh cliceáil ar fad ar an gcláir, ní hamháin ar an téacs nasctha. Chun seo a dhéanamh, caithfidh tú an tag A a thiontú ón stát " inlíne " is gnách i blocghné . taispeáint: bloc; (Má tá suim agat níos mó a fhios agam faoin difríocht, léigh Bloc-Leibhéal vs Inline Elements .)
Ansin, bealach éasca chun do chuid cluaisíní a chumasú a bheith siméadrach lena chéile, ach tá sé fós oiriúnach chun leithead an téacs a oiriúnú chun an stuáil cheart agus clé a dhéanamh mar an gcéanna. Bhain mé úsáid as an maoin ghearrthréitigh greamaitheacha chun an barr agus an bun go 0 a shocrú agus an ceart agus clé go dtí 1em. stuáil: 0 1em;
Roghnaigh mé freisin go mbainfí leas as an nasc, ionas go mbeidh na cluaisíní níos lú cosúil le naisc. Ach más rud é go bhféadfaí do lucht féachana a mheascadh, fág an líne seo amach. nasc-maisiú: none;
Trí theorainn tanaí a chur thart ar na cluaisíní, cuireann sé cosúil le cluaisíní iad. Bhain mé úsáid as maoin ghearrláimhe na teorann chun an teorainn a chur ar fud na teorann ar fad ar an gceithre thaobh: 0.06em soladach # 000; Agus ansin d'úsáid an mhaoin thosaigh teorann é a bhaint as an mbun. bun teorann: 0;
Ansin rinne mé roinnt athruithe ar chló, dath, agus dath cúlra na gclár. Socraigh iad seo ar na stíleanna a mheaitseálann do shuíomh. cló: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; dath: # 000; dath cúlra: #ccc;
Ba cheart go mbeadh gach ceann de na stíleanna thuasluaite sa roghnóir .tablist li a, an riail ionas go ndéanann siad difear do na clibeanna ancaire i gcoitinne. Ansin, chun na cluaisíní a dhéanamh a bheith le feiceáil níos mó, ba cheart duit riail cúpla stáit a chur leis .tablist li a: hover.
Is maith liom dath an téacs agus an chúlra a athrú chun an cluaisín a dhéanamh nuair a bhíonn tú ag lucháil air. cúlra: # 3cf; dath: #fff;
Agus chuir mé meabhrúchán eile ar fáil do na brabhsálaithe nach bhfuil mé ag iarraidh go n-éireoidh leis an nasc a bheith fíneáilte. maisiú téacs: none; Is é an modh coiteann eile ná an líne a chur ar ais nuair a luíonn tú an cluaisín. Más mian leat é sin a dhéanamh, déan é a athrú chuig maisiú téacs: cuir béim air;
Ach Cá bhfuil an CSS 3?
Má tá tú ag tabhairt aire, is dócha gur thug tú faoi deara nach raibh aon stíleanna CSS 3 in úsáid sa bhileog stíl. Is é seo an leas a bhaint as oibriú in aon bhrabhsálaí nua-aimseartha, lena n-áirítear Internet Explorer. Ach ní dhéanann sé go bhfuil na cluaisíní cosúil le rud ar bith níos mó ná boscaí cearnacha. Trí ghaol teorann CSS 3 a chur leis (agus glaonna ar leith a bhaineann leis an bhrabhsálaí) is féidir leat na h-imill a chothromú, chun breathnú níos mó cosúil le cluaisíní ar fhillteán manila.
Na stíleanna ba chóir duit a chur leis an .tablist Is é riail: -webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-ga: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-gaius-topleft: 0.50em; teorann-barr-dheis-ghaire: 0.50em; gaol-barr-chlé-gha: 0.50em;
Seo na rialacha stíl deiridh a scríobh mé:
.tablist li {taispeáint: bloc; stuáil: 0 1em; maisiú téacs: none; teorainn: 0.06em soladach # 000; bun teorann: 0; cló: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; dath: # 000; dath cúlra: #ccc; / * CSS 3 eilimintí * / webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-ga: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-gaius-topleft: 0.50em; teorann-barr-dheis-ghaire: 0.50em; gaol-barr-chlé-gha: 0.50em; } .tablist li a: hover {cúlra: # 3cf; dath: #fff; maisiú téacs: none; }Leis na stíleanna seo, tá roghchlár tabbed agat a oibríonn i ngach príomhbhrabhsálaí agus is cosúil go bhfuil cluaisíní clóite deas i mbrabhsálaithe comhlíontacha CSS 3. Tugann an chéad leathanach eile rogha amháin duit is féidir leat é a úsáid chun é a ghléasadh suas níos mó.
06 de 06
Mínigh an Tab Reatha
Sa HTML a chruthaigh mé, bhí eilimint liosta amháin ag UL le ID. Ligeann sé seo duit stíl dhifriúil a thabhairt do LI amháin ón gcuid eile. Is é an staid is coitianta ná an taifead reatha a dhéanamh amach ar bhealach éigin. Bealach eile chun smaoineamh ar seo ná gur mhaith leat na cluaisíní nach bhfuil beo a liath amach. Athraíonn tú ansin i gcás ina bhfuil an id ar na leathanaigh éagsúla.
Stíl mé an chlib #current A chomh maith leis an #current A: hover sta ionas go mbeidh an dá rud beagán difriúil. Is féidir leat dath, dath cúlra, fiú airde, leithead agus stuáil an eilimint sin a athrú. Déan cibé athruithe a dhéanann ciall i do dhearadh.
.tablist li # reatha {background-color: # 777; dath: #fff; } .tablist li # reatha a: hover {cúlra: # 39C; }Agus tá tú déanta! Chruthaigh tú roghchlár tabbed díreach ar do láithreán gréasáin.