Stiùireadh ceum air cheum
Co dhiubh a tha do chlàr-taice seòladh na shreath chòmhnard thar a 'mhullach no sreath dìreach sìos an taobh, chan eil ann ach liosta. Nuair a tha sinn a 'dealbhadh seòladh lìn, glè thric tha e furasta a dhìochuimhneachadh gu bheil clàr-taice seòladh dìreach na bhuidheann de cheanglaichean glòrmhor. Ach ma chuireas tu am prògram agad air bhog le XHTML + CSS, faodaidh tu clàr a chruthachadh a tha beag airson luchdachadh sìos (an XHTML) agus furasta a ghnàthachadh (CSS).
A 'tòiseachadh
Gus tòiseachadh air dealbhadh liosta airson seòladh, feumaidh tu liosta a chleachdadh.
Is dòcha gur e liosta coitcheann neo-iomchaidh a chaidh a chomharrachadh mar an seòladh:
Ma sheallas tu gu dlùth air an HTML, seallaidh tu gu bheil ID air a 'cheangal "Dachaigh" agad. Leigidh seo dhut clàr-taice a chruthachadh a chomharraicheas an làrach làithreach do luchd-leughaidh. Fiù mura h-eil thu a 'planadh a bhith a' faighinn an seòrsa sin de shealladh lèirsinneach air do làrach an-dràsta, faodaidh tu am fiosrachadh sin a chur a-steach. Ma cho-dhùineas tu an cluag a chuir ris a-rithist, bidh nas lugha de chòd agad gus an làrach agad ullachadh.
Gun stoidhle CSS sam bith, tha an clàr-taice XHTML seo coltach ri liosta coitcheann neo-iomchaidh. Tha peilearan ann agus tha na h- earrannan air an cur an òrdugh beagan. Seach gu bheil mi a 'cleachdadh cheanglaichean luchd-àite , cha nochd a' chuid as motha de na brabhsairean na ceanglaichean mar a chleachdas iad (air an cur sìos agus ann an gorm). Ma nì thu greim anns an HTML gu h-àrd ann an duilleag lìn, seallaidh an seòladh agad mar seo:
- Dachaigh
- Products
- Seirbheisean
- Cuir fios thugainn
Tha seo gu math tarraingeach agus chan eil e coltach gu math ri clàr-taice. Ach le dìreach stoidhlichean CSS air an cur ris an liosta, faodaidh tu clàr-taice a chruthachadh a bheir toileachas dhut.
Clàr-taice seòladh dìreach
Tha clàr-taice dìreach dìreach furasta a sgrìobhadh oir tha e a 'taisbeanadh san aon dòigh ri liosta àbhaisteach: suas is sìos.
Bidh na h-earrannan liosta a 'nochdadh sìos gu dìreach sìos air an duilleig.
Nuair a tha mi a 'dealbhadh bhùird-làimhe, is toil leam tòiseachadh aig an taobh a-muigh agus obair a dhèanamh. Le seo, tha mi a' ciallachadh gu bheil mi an toiseach a 'stoidhleachadh ul # navigation agus an uairsin gluasad gu na h-eileamaidean li agus na ceanglaichean, msaa. Mar sin, chiad thu a 'mìneachadh farsa an clàr-taice. Nì seo cinnteach ged a bhios na h-einnseanan fada, cha toir iad a-steach don chòrr den chrìoch thairis no a bhith a 'dèanamh sgrìobadh còmhnard.
ul # navigation {leud: 12em; }
Aon uair 's gu bheil an leud leud agam, is urrainn dhomh cluich leis na h-àireamhan liosta. Tha seo a 'toirt cothrom dhomh rudan a shuidheachadh mar (faighinn cuidhteas na peilearan), dathan cùl-raoin, crìochan, co-chòrdadh teacsa, agus iomaill.
ul # navigation li {
liosta-stoidhle: none;
cùl-dath: # 039;
border-top: solid 1px # 039;
teacs-align: clì;
iomall: 0;
}
Aon uair 's gu bheil thu air na nithean bunaiteach a shuidheachadh airson na h-àireamhan liosta as urrainn dhut tòiseachadh a' cluich le mar a tha an clàr-taice a 'coimhead anns an raon cheanglaichean. A 'chiad stoidhle an UL # navigation LI A agus an uair sin an A: ceangal, A: tadhail, A: hover, agus A: gnìomhach (ma tha thu ag iarraidh iad). Airson na ceanglaichean, is toil leam na ceanglaichean a dhèanamh na eileamaid bloic (an àite na bunaiteach ann an loidhne). Tha seo a 'feuchainn riutha a bhith a' gabhail a-steach farsaingeachd iomlan an LI - agus bidh iad ag obair nas motha mar pharagraf, a tha gan dèanamh nas fhasa stoidhle mar putanan clàr-taice. Is e an rud eile a tha mi a 'dèanamh an-còmhnaidh a' toirt air falbh an loidhne-loidhne (sgeadachadh teacsa: gin; oir tha seo a 'ciallachadh gu bheil na putanan a' coimhead nas fheàrr mar putanan dhomh.
Ach gu dearbh, is dòcha gum bi do dhealbhadh eadar-dhealaichte.
ul # navigation li {
taisbeanaidh: bloc;
teacs-sgeadachadh: gin;
padadh: .25em;
crìch a 'chrìch: cruaidh 1px # 39f;
deas-dheas: cruth 1px # 39f;
}
Thoir fa-near, leis an taisbeanadh: bloc; air a chur air na ceanglaichean, tha bogsa iomlan na h-earrainn air a chlò-bhualadh, chan e dìreach na litrichean. Tha seo cuideachd math airson ar cleachdadh. Dèan cinnteach gun cuir thu na dathan ceangail (ceangal, tadhail, toll agus gnìomhach) ma tha thu ag iarraidh gum bi iad eadar-dhealaichte bhon ghorm, dearg agus purpaidh.
a: link, a: visited {dath: #fff; }
a: hover, a: active {color: # 000; }
Is toigh leam cuideachd barrachd aire a thoirt don stàit le bhith ag atharrachadh dath an cùl-taic.
a: hover {background-color: #fff; }
Ma tha thu ag iarraidh barrachd eisimpleirean de bhogsaichean dìreach, co-dhùin an liosta gu h-ìosal.
- Clàr-taice Styled Vertical
- Teamplaid Clàr-taice Dìreach bunasach
- Clàr-taice Styled Vertical leis a bheil thu an seo
- Teamplaid clàr-taice bunaiteach bunaiteach leis a bheil thu an seo
Clàr-taice seòladh còmhnard
Tha a bhith a 'cruthachadh clàran-làimhe slighean còmhnard beagan nas duilghe na clàran-làimhseachaidh dìreach dìreach oir feumaidh tu a bhith a' cur an cèill an fhìrinn gu bheil e nas fheàrr le liostaichean HTML a thaisbeanadh. Coltach ris a 'chlàr-taice còmhnard, cruthaich an liosta clàr-taice agad an toiseach:
Gus clàr-taice còmhnard a chruthachadh, obraich mar a rinn thu leis a 'chlàr-taice dìreach. Tòisich leis an taobh a-muigh agus obraich a-steach. Bho tha mi ag iarraidh gun tòisich mo shoidhnigeadh anns an oisean chlì, chuir mi 0 margar chlì agus pladachadh air, agus bidh mi ga ruith air an làimh chlì. Bu chòir dhut cuideachd faighinn a-steach a thaobh a bhith a 'suidheachadh an leud gus nach bi an clàr-taice agad a' toirt suas barrachd no nas lugha de rùm na tha thu an dùil. Airson clàran-còmhnard còmhnard, mar as trice is e seo an leudachd iomlan den dealbhadh. Chuir mi dath cùl-taic ris an liosta gu lèir cuideachd airson a dhèanamh nas fhasa a leughadh.
ul # navigation {
flùraichean: clì;
iomall: 0;
gleabadh: 0;
leud: 100%;
cùl-dath: # 039;
}
Ach tha an dìomhair don chlàr-taice seòladh còmhnard anns na h-àireamhan liosta. Mar as trice, mar as trice, bidh nithean clàraichte a 'bacadh eileamaidean, a tha a' ciallachadh gum bi loidhne ùr aca mus cuir iad gach aon dhiubh. Le bhith a 'gluasad an taisbeanaidh bho bhloc gu in-loidhne, tha thu a' toirt air na h-eileamaidean liosta a bhith a 'ruith ri taobh a chèile gu fradharcach.
ul # navigation li {taisbeanadh: inline; }
Bha mi a 'dèiligeadh ris na ceanglaichean dìreach mar a bha mi gan làimhseachadh anns a' chlàr-taice seòladh dìreach, leis na h-aon dathan agus sgeadachadh teacsa. Chuir mi crìoch air a 'bhàrr gus na putanan a shònrachadh nuair a tha iad air an toirt seachad. Is e an aon rud a chuir mi air falbh an taisbeanadh: bloc; oir cuiridh sin na sreathan ùra air ais a-steach agus a 'sgrios a' chlàr-taice còmhnard.
ul # navigation li {
teacs-sgeadachadh: gin;
padadh: .25m 1em;
crìch a 'chrìch: cruaidh 1px # 39f;
border-top: solid 1px # 39f;
deas-dheas: cruth 1px # 39f;
}
a: link, a: visited {dath: #fff; }
ul # navigation li a: hover {
cùl-dath: #fff;
dath: # 000;
}
Tha thu an seo Fiosrachadh mun àite
Is e taobh eile de HTML an dearbh-aithne agad. Ma tha thu ag iarraidh am bogsa agad atharrachadh gu bhith a 'comharrachadh suidheachadh làithreach do luchd-cleachdaidh, cleachd an ID seo gus dath cùl-raon no stoidhle eile a mhìneachadh. Gluais an gnè ID gu an clàr-taice ceart air duilleagan eile gus am bi an duilleag làithreach an-còmhnaidh air a chomharrachadh.
ul # navigation li # youarehere a {background-color: # 09f; }
Ma chuireas tu na stoidhlichean seo còmhla air do dhuilleag, faodaidh tu clàr-taice cothromach no dìreach a chruthachadh a bhios ag obair le do làrach ach gu luath gus a luchdachadh sìos agus gu math furasta ùrachadh gus an àm ri teachd. Le bhith a 'cleachdadh XHTML + CSS, cuiridh na liostaichean agad gu inneal cumhachdach airson dealbhadh.
Ma tha thu ag iarraidh barrachd eisimpleirean de chlàr-taice còmhnard, co-dhùin na leanas.
- Clàr-taice Styled Horizontal
- Teamplaid Clàr-taice Bunasach
- Clàr-taice Styled Horizontal leis a bheil thu an seo
- Teamplaid Clàr-taice Bunasach còmhnard leis a bheil thu an seo