Déan roghchlár cothrománach don suíomh féin

roghchlár Cothrománach tá beagnach aon suíomh - tá sé mar chuid thábhachtach, agus is féidir é lena chuma agus inúsáidteacht a mhealladh nó, os a choinne sin, scanradh ar shiúl cuairteoirí. A ligean ar a fháil amach conas a chruthú roghchlár cothrománach bunrang: a dhéanamh "cnámharlach" go HTML, chun máistreacht na scileanna bunúsacha a chruthú. Is féidir leat teacht cinnte roghchlár réidh, ach tá i bhfad níos deise a fháil amach conas a fhorbairt féin. Tá sé go leor spraoi.

Foghlaim roghchlár a dhéanamh

Déanaimid iarracht gan a chlaonann ó na semantics, a cloí leis na figiúirí na príomhchúiseanna leis an leagan amach. An Chéad bhfuil tú a dhéanamh "creatlach" le haghaidh ár biachláir go HTML, scileanna bunúsacha a fhoghlaim chun a gcuid biachláir cothrománacha féin. Agus ansin beidh sé a mhaisiú, ag baint úsáide as stílbhileoga. Lig Tá ár roghchlár cothrománach 5 míreanna. Beidh an chéad mhír a atreorú chuig an leathanach baile. An dara pointe - "Maidir Linne". An tríú - "Ár dámhachtainí". Ceathrú - "Tá sé an spraoi." Cúigiú - "Déan teagmháil linn".

Breathnaíonn HTML-cód mar seo:

Nach bhfuil a fhios: Tá tag ul úsáidtear le haghaidh an piléar, tús a eilimintí leis an li. clibeanna Li hoidhreacht na stíleanna a chuirtear i bhfeidhm ar an ul.

Ul - eilimint bloc an liosta, beidh sé a shíneadh go dtí an leithead. Is Li freisin bloc.

Mar sin, a chruthú index.html. Bailímid ár cód. Ag an bpointe seo, léiríonn an brabhsálaí a ingearach seachas roghchlár cothrománach. Ach táimid in éineacht leat sprioc - a dhéanamh roghchlár cothrománach don suíomh. Mar sin ní mór dúinn CSS.

Cad é CSS?

Má tá tú fós chun máistreacht an forbairt láithreán, tá sé riachtanach a fháil acquainted leis an gcoincheap Stílbhileoga Cascáideacha. Go deimhin, is iad seo na rialacha maidir le formáidiú, a phróiseáil, a chuirtear i bhfeidhm eilimintí éagsúla ar na leathanaigh gréasáin. Má táimid ag cur síos ar na hairíonna de na heilimintí i HTML caighdeánach, beidh ort a dhéanamh arís arís agus arís eile, tú a fháil ar dúbailt na píosaí céanna de chód. Beidh an leathanach ama ualach ar an úsáideora ríomhaire ag fás. Chun seo a sheachaint, tá CSS. Suffices sé chun cur síos ach uair amháin sa gné áirithe, agus ansin in iúl go simplí nuair a úsáid a bhaint as na hairíonna de stíl ar leith. Is féidir a dhéanamh ar an cur síos ar ní amháin ar an téacs an leathanach é féin, ach freisin i gcomhad eile. Tabharfaidh sé seo deis a chur i bhfeidhm an cur síos ar na stíleanna éagsúla ar gach leathanach ar an suíomh. Tá sé áisiúil freisin chun roinnt leathanaigh a mhodhnú, lena modhnaítear an CSS-comhad. ligfidh do stílbhileoga cascáideacha duit a bheith ag obair le clónna ar leibhéal níos fearr ná an HTML, ag cabhrú a sheachaint ag dul chun donais na leathanaigh grafaicí an tsuímh.

Ag baint úsáide as Stílbhileoga d'fhorbairt roghchlár

CSS-cód le haghaidh an roghchlár:

1. # My_1menu {liosta-stíl: none; stuála: 6; width: 800px; corrlach: uathoibríoch;}
2. # My_1menu li {snámhphointe: chlé; font: Arial 18px iodálach;}
3. # My_1menu a {dath: # 756; Taispeáint: bloc; airde: 55px; líne-airde: 55px; stuáil: 0px 15px 0px 15px; Cúlra: #dfc; Téacs-mhaisiú: none;}
4. # My_1menu a: hover {Dath: #foa; Cúlra: # 788;}

Anois, a ligean ar breathnú ar mar thoradh ar an roghchlár CSS cothrománach.

# My_1menu - mar sin tá sannadh stíl eilimint I ndeireadh na le id = my_1menu, liosta-stíl: none - ordú seo a bhaint na marcanna a fágadh ag na nithe sceidealta.

Is é an leithead ár roghchlár 800 pixel - 800px: leithead.

stuáil: 0 - mbainfidh an an stuáil taobh istigh.

corrlach: auto - vyravnivnie roghchlár cothrománach ag croílár ár leathanach.

# My_1menu li - shannadh stíleanna li-eilimintí.

airde: 55px - airde roghchlár.

# My_1menu a: hover - stíleanna le eilimint shannadh agus an luch nuair a bheidh sé tharlódh.

Ní bheidh muid cur síos go mion ngach líne, mar is féidir gach forbróir a shonrú a paraiméadair anseo. Seo dlí maidir le húsáid na n stíleanna sa roghchlár ar an láithreán gréasáin. Is féidir leat a thabhairt dó cuma níos críochnaithe agus álainn, ag baint úsáide as pictiúir. Sann eilimint ach, mar shampla, cúlra: url (img1.png) arís-x. Bíodh cúlra: url (img2.png) arís-x ar: hover.

Bain úsáid as do shamhlaíocht, sainroghanna cruthaitheach. Ansin bunaithe ar an eolas maidir le conas a chruthú roghchlár simplí ar an suíomh gréasáin, is féidir leat a fhorbairt leathanach lena dearadh ar leith féin.