Ingearach roghchlár CSS: a dhéanamh leat féin

nach bhfuil roinnt stiúrthóirí gréasáin ag iarraidh am a chaitheamh ag forbairt ó heilimintí scratch simplí atá ann cheana féin. Creideann siad go bhfuil aon phointe i wasting do chuid ama ar rud éigin a bhí le fada ann. Go deimhin, dóibh siúd atá ag máistriú ach HTML agus CSS, tá sé tábhachtach a dhéanamh duit féin ar a lán de na rudaí a bhfuil tuiscint mhaith ar a gcuid oibre. Baineann sé seo leis an roghchlár. Cruthaigh biachláir CSS ingearach. Beidh sé bunaithe ach amháin ar HTML agus CSS, gan úsáid a bhaint Javascript agus JQuery. Tá gach roghchlár liosta de naisc go dtiocfadh le leathanaigh ar an suíomh.

céimeanna bunúsacha

Chun a chruthú simplí ingearach roghchlár CSS, ní mór duit na céimeanna seo a leanas:

1. Gcéad dul síos, a chinneadh liosta de naisc (ag baint úsáide as cód HTML), ar a mbeidh an roghchlár a. Tabhair dóibh ainm, mar shampla, iad seo a leanas:

1. Baile.
2. Ár stair.
3. Treoir.
4. Seirbhísí.
5. Teagmhálacha.

2. Ansin, naisc Styling mar is mian leat le cabhair ó CSS.

Scríobh againn an cód HTML, a choinneáil i gcomhad my_Vmenu.html agus a fheiceáil conas a rachaidh sé cuma sa bhrabhsálaí:

Is ar an mbonn (creatlach) ar ár roghchlár. # 1, # 2, etc. Ba cheart a chur in ionad thagairt. Féach ar conas tá sé i bhrabhsálaí. An pictiúr ní bheidh tú mhaith. Anois, ní mór dúinn tús a chun cur síos ar na gnéithe de stíl, a dhéanamh sainchomhad iomlán biachláir CSS ingearach.

Tuairisc stíleanna

Cruthaigh my_Vmenu.css comhad, a leagtar gach rud is mian leat chun feabhas a chur ar an chuma den sórt sin gné thábhachtach den láithreán. Seo an cód, beidh an tabhairt isteach a athbheochan na biachláir CSS ingearach. Tá sé agus scríobh an comhad nua, agus ansin beidh orainn a ghlacadh breathnú níos dlúithe ar an bhrí an príomh línte atá tugtha.

CUR SÍOS MIONSONRAITHE úsáidtear stílbhileog

Anois, a mheas na sonraí ar ár roghchlár CSS ingearach:

Ceadaíonn an liosta-stíl de chineál tú a bhaint as an liosta de na marcóirí. Trí chur ar "0" chun an corrlach agus stuála bhaint as an stuáil breise sa liosta. Mar is léir ón gcód HTML, is é ár n-roghchlár liosta, agus na stíleanna atá sainithe ag baint úsáide as CSS.

ul # my_Vmenu - an stíl foriomlán an liosta iomlán.

ul # my_Vmenu li a - Naisc stíl idir an chlib li.

ul # my_Vmenu li a: hover - cur síos ar an gcineál faoi bhreithniú na n-ítimí roghchlár ag am nuair a hovers duine thar daoine.

ul # my_Vmenu li réise - cur síos téacs (roghchlár teideal).

Cuimhnigh go comhaid my_Vmenu.css my_Vmenu.html agus ní mór iad a chaomhnú sa chomhadlann chéanna. Mar sin féin, d'fhéadfadh siad a bheith suite i fillteáin éagsúla, ach ansin tá sé tábhachtach a chlárú i cosán comhad my_Vmenu.html go my_Vmenu.css. Bí cúramach, mar gheall ar na daoine nua chun an fhadhb seo go minic.

Ní mór Stíl bheith ag baint idir na clibeanna ceann i html-comhad. menu_1.png agus menu_2.png - tá sé seo an pictiúr le haghaidh na hítime roghchlár pictiúr sa stát gnáth agus hover.

Tá sé níos fearr a shábháil ar na híomhánna i bhfillteán ar leith le haghaidh íomhánna, ainm my_images sé, ach ansin Coigeartaigh an cód CSS. Scríobh i gcás ina bhfuil na híomhánna a thaispeántar, tá siad san eolaire: url (my_images / menu_1.png) agus url (my_images / menu_2.png).

Sa chuid eile de na maoine a thuairiscítear sa chód CSS, a thuiscint go héasca. Sainíonn siad an chuma ar ár roghchlár. Tá sé éasca a thabhairt faoi deara go an leithead agus airde na n-ítimí atá sonraithe maidir leis na pointí céanna sa stát gnáth, agus nuair a hover tú an luch os a gcionn. Clómhéid 18px, sonraíonn stuáil an eangú ó thaobh éagsúla den logainmneacha. ligeann taispeáint leat a leagtar an t-aonad taispeána a shocrú ar an leithead agus stuála.

Ár roghchlár ingearach

Mar a fheiceann tú, na biachláir CSS ingearach a chruthú go héasca. Ar bhonn na sonraí a eolais a bheidh tú in ann é a dhéanamh go hálainn agus tarraingteach do chuairteoirí ar do láithreán gréasáin! Bain úsáid as do shamhlaíocht, agus ansin roghchlár stylish a chomhlánú do shuíomh.