Itọsọna igbesẹ-ni-igbesẹ
Boya akojọ aṣayan lilọ kiri rẹ jẹ ọna ti o wa ni ipo ti o wa ni apa oke tabi oke ila ni isalẹ, o tun jẹ akojọ kan nikan. Nigbati o ba n ṣawari lilọ kiri wẹẹbu, o rọrun lati gbagbe pe akojọ lilọ kiri jẹ ẹgbẹ ẹgbẹ ti o logo. Ṣugbọn ti o ba ṣe eto lilọ kiri rẹ nipa lilo XHTML + CSS, o le ṣẹda akojọ aṣayan ti o kere lati gba lati ayelujara (XHTML) ati rọrun lati ṣe akanṣe (CSS).
Bibẹrẹ
Lati bẹrẹ siseto akojọ fun lilọ kiri, o nilo lati lo akojọ kan.
O le jẹ akojọ ti a ko ni aifọwọyi ti a ti mọ bi lilọ kiri:
Ti o ba wo ni pẹkipẹki ni HTML, iwọ yoo ṣe akiyesi pe asopọ "Ile" tun ni ID ti youarehere. Eyi yoo gba ọ laye lati ṣẹda akojọ aṣayan kan ti o ṣayẹwo ipo ti isiyi fun awọn onkawe rẹ. Paapa ti o ko ba ṣe ipinnu lori nini iru iru aworan wiwo lori aaye rẹ ni bayi, o le ni alaye naa. Ti o ba pinnu lati fi kun nkan naa nigbamii, iwọ yoo ni kodẹku si isalẹ lati pese aaye rẹ.
Laisi eyikeyi iṣiro CSS , akojọ aṣayan XHTML kan dabi akojọ ti a ko ni aifọwọyi. Awọn awako ati awọn ohun kikọ wa ni idẹsi diẹ. Nitori pe emi nlo awọn ọna asopọ ibiti o wa , awọn aṣàwákiri pupọ kii yoo ṣe afihan awọn ìjápọ bi clickable (ti o ṣe apẹrẹ ati ni buluu). Ti o ba lẹẹmọ sinu HTML ti o wa loke sinu oju-iwe ayelujara, lilọ kiri rẹ yoo dabi eleyii:
- Ile
- Awọn ọja
- Awọn iṣẹ
- Pe wa
Eyi jẹ lẹwa alaidun ati ko dabi pupọ bi akojọ aṣayan kan. Ṣugbọn pẹlu diẹ diẹ CSS aza kun si akojọ, o le ṣẹda akojọ kan ti o mu ki o gberaga.
Lilọ kiri Lilọ kiri
Aṣayan lilọ kiri iṣọsi jẹ gidigidi rọrun lati kọ nitori pe o han ni ọna kanna gẹgẹbi akojọ deede: si oke ati isalẹ.
Awọn ohun akojọ naa han ni ita gbangba si oju iwe naa.
Nigbati mo jẹ awọn akojọ aṣayan ti aṣa, Mo fẹ lati bẹrẹ ni ita ati ṣiṣẹ ni. Nipa eyi, Mo tumọ si pe mo kọkọ ni ori-kiri ati lẹhinna gbe si awọn ohun-ini ero ati lẹhinna awọn asopọ, ati be be lo bẹbẹ lọ. Fun akojọ aṣayan yii, akọkọ o setumo awọn iwọn ti akojọ. Eyi yoo rii daju pe paapaa ti awọn ohun akojọ ba wa ni pipẹ, wọn kii yoo ko awọn iyokù ti ifilelẹ naa han tabi fa fifun ni irọrun.
ul # lilọ kiri {iwọn: 12em; }
Ni kete ti Mo ti ni iwọn ti a ṣeto, Mo le mu pẹlu awọn ohun akojọ. Eyi gba mi laaye lati ṣeto awọn nkan bi (lati yọ awọn awako), awọn awọ ti o wa lẹhin, awọn aala, titọ ọrọ, ati awọn agbegbe.
ul # navigation in {
akojọ-ara: kò;
lẹhin-awọ: # 039;
aala-oke: lagbara 1px # 039;
ọrọ-align: osi;
ala: 0;
}
Lọgan ti o ti ṣeto awọn ipilẹ fun awọn ohun akojọ ti o le bẹrẹ dun pẹlu bi akojọ aṣayan ṣe n wo ni agbegbe ìjápọ. Akọkọ ara awọn UL # lilọ LI A ati lẹhinna A: asopọ, A: ṣàbẹwò, A: hover, ati A: lọwọ (ti o ba fẹ wọn). Fun awọn ìjápọ, Mo fẹ lati ṣe awọn ìsopọ kan iṣiro idaṣe (kuku ju aiyipada ni ila). Eyi yoo fun wọn ni agbara lati gba gbogbo aaye ti LI-ati pe wọn ṣe diẹ bi paragirafi kan, eyi ti o mu ki wọn rọrun si ara bi awọn bọtini akojọ. Ohun miiran ti mo ṣe nigbagbogbo ni yọ akọle (ohun-ọṣọ: kò si);, bi eleyi ṣe ki awọn bọtini wo awọn bọtini ti o pọju si mi.
Ṣugbọn dajudaju, apẹrẹ rẹ le yatọ.
ul # lilọ kiri ni a {
àfihàn: dènà;
ohun-ọṣọ: kò;
padding: .25em;
aala-isalẹ: lagbara 1px # 39f;
iha-aala-ọtun: lagbara 1px # 39f;
}
Ṣe akiyesi pe pẹlu ifihan: Àkọsílẹ; ṣeto lori awọn ìjápọ, gbogbo apoti ti ohun akojọ aṣayan jẹ clickable, kii ṣe awọn lẹta nikan. Eyi tun dara fun lilo. Rii daju lati ṣeto ọna asopọ awọn awọ (asopọ, ṣàbẹwò, hover ati lọwọ) ti o ba fẹ ki wọn yatọ si buluu, awọ pupa ati eleyi.
a: asopọ, a: ṣàbẹwò {awọ: #fff; }
a: hover, a: lọwọ {awọ: # 000; }
Mo tun fẹ lati fi aaye ti o dara julọ jẹ diẹ sii nipa akiyipada awọ-lẹhin.
a: hover {isale-awọ: #fff; }
Ti o ba fẹ awọn apejuwe diẹ sii ti awọn akojọ ašayan iduro, ṣe atokọ awọn akojọ ni isalẹ.
- Aṣayan Aṣayan Iwọn
- Aṣiṣe Akojọ Aṣayan Ibẹrẹ Akọkọ
- Aṣayan Iboju Ti a Fiwe Pẹlu O Ni Nibi
- Aṣiṣe Aṣayan Ibẹrẹ Ipilẹ Afihan pẹlu Iwọ Ni Nibi
Lilọ kiri Lilọ kiri
Ṣiṣẹda awọn akojọ aṣayan lilọ kiri ni petele jẹ diẹ sii nira diẹ sii ju awọn akojọ aṣayan lilọ kiri ni titari nitori o ni lati ṣe idaṣe otitọ pe awọn akojọ HTML fẹ lati fi han gbangba. Gẹgẹbi akojọ aṣayan petele, ṣeda akọkọ akojọ akojọ aṣayan lilọ kiri rẹ :
Lati ṣẹda akojọ ipinnu, ṣiṣẹ kanna bi o ti ṣe pẹlu akojọ aṣayan ina. Bẹrẹ pẹlu ita ati ṣiṣẹ ni. Niwon Mo fẹ ki lilọ kiri lati bẹrẹ ni igun osi, Mo ṣeto pẹlu 0 osi osi ati padding, ati Mo ṣafo si osi. O yẹ ki o tun wọle ninu iṣaṣe ti ṣeto iwọn yii ki akojọ rẹ ko gba diẹ sii tabi sẹhin aaye ju ti o pinnu lọ. Fun awọn akojọ aṣayan aifọwọyi, eyi ni igbagbogbo iwọn ti oniru. Mo tun fi awọ awọ lẹhin kun akojọ gbogbo lati jẹ ki o rọrun lati ka.
ul # lilọ kiri {
float: osi;
ala: 0;
padding: 0;
iwọn: 100%;
lẹhin-awọ: # 039;
}
Ṣugbọn ikoko si akojọ aṣayan lilọ kiri ni awọn ohun akojọ. Awọn ohun ti a ṣe akojọ awọn ohun-elo ni o maa n ṣatunṣe awọn eroja, eyi ti o tumọ si pe wọn yoo ni ila tuntun gbe ṣaaju ati lẹhin ẹni kọọkan. Nipa yiyi ifihan kuro lati dènà si inline, o ṣe okunfa awọn eroja akojọ lati fi ila si ẹgbẹ si okeere.
ul # lilọ kiri ni {ifihan: opopo; }
Mo tọju awọn asopọ gangan bi Mo ṣe mu wọn ni akojọ aṣayan lilọ kiri, pẹlu awọn awọ kanna ati ohun ọṣọ ọrọ. Mo ti fi kun aala oke kan lati fi awọn bọtini ti o tan nigba ti wọn ba ti kọja. Ohun kan ti mo yọ kuro ni ifihan: Àkọsílẹ; bi eyi yoo fi awọn ọja tuntun pada si ki o si pa akojọ aṣayan pete.
ul # lilọ kiri ni a {
ohun-ọṣọ: kò;
padding: .25m 1em;
aala-isalẹ: lagbara 1px # 39f;
aala-oke: lagbara 1px # 39f;
iha-aala-ọtun: lagbara 1px # 39f;
}
a: asopọ, a: ṣàbẹwò {awọ: #fff; }
ul # lilọ kiri ni a: hover {
lẹhin-awọ: #fff;
awọ: # 000;
}
O wa Nibi Alaye agbegbe
Apa miran ti HTML jẹ idasile youarehere. Ti o ba fẹ ṣe atunṣe akojọ rẹ lati tọka ipo ti o wa lọwọlọwọ ti awọn olumulo rẹ, lo ọrọ ID yii nikan lati ṣafihan awọ miiran ti o yatọ tabi awọ miiran. Gbe ẹda ID naa si ohun ti o tọ ni awọn oju-ewe miiran ki oju ila ti o wa lọwọlọwọ ni afihan nigbagbogbo.
ul # lilọ kiri ni # youarehere a {isale-awọ: # 09f; }
Ti o ba fi awọn apejuwe wọnyi kun pọ ni oju-iwe rẹ, o le ṣẹda ibi-isokuro ti o wa titi tabi inaro ti o nṣiṣẹ pẹlu aaye rẹ ṣugbọn o yara lati gba lati ayelujara ati rọrun lati ṣe imudojuiwọn ni ojo iwaju. Lilo XHTML + CSS ṣe awọn akojọ rẹ sinu ohun elo ti o lagbara julọ fun apẹrẹ.
Ti o ba fẹ diẹ apeere ti awọn akojọ aṣayan sisọ, ṣawari awọn wọnyi.
- Aṣayan Aṣayan Atọka
- Afihan Aṣa Ifilelẹ Akọkọ
- Aṣayan Aṣayan Atọka pẹlu O Wa Nibi
- Awoṣe Aṣayan Atilẹyin Ibẹrẹ pẹlu Iwọ Ni Nibi