Dewislen CSS Fertigol: gwneud y gwaith eich hun

Nid yw rhai webmasters ddim eisiau treulio amser yn datblygu o'r dechrau elfennau syml sydd eisoes yn bodoli. Maent yn credu nad oes unrhyw bwynt mewn gwastraffu eich amser ar rywbeth sydd wedi bod yn hir yno. Yn wir, ar gyfer y rhai nad ydynt ond yn meistroli HTML a CSS, mae'n bwysig i wneud eich hun llawer o bethau i gael dealltwriaeth dda o'u gwaith. Mae hyn yn berthnasol i'r ddewislen. Creu fertigol bwydlenni CSS. Bydd yn seiliedig yn unig ar HTML a CSS, heb y defnydd o Javascript a jQuery. Mae pob bwydlen yn rhestr o ddolenni sy'n arwain at dudalennau o'r safle.

camau sylfaenol

I greu syml bwydlen fertigol CSS, bydd angen y camau canlynol:

1. Yn gyntaf, penderfynu ar restr o gysylltiadau (gan ddefnyddio cod HTML), a bydd y fwydlen fod. Rhowch enw iddynt, er enghraifft, fel a ganlyn:

1. Cartref.
2. Mae ein hanes.
3. Canllaw.
4. Gwasanaethau.
5. Cysylltiadau.

2. Yna Steilio cysylltiadau ag y dymunwch gyda chymorth CSS.

Rydym yn ysgrifennu y cod HTML, cadw mewn ffeil my_Vmenu.html a gweld sut y bydd yn edrych yn y porwr:

Mae hyn yn y sylfaen (sgerbwd) o'n bwydlen. # 1, # 2, ac yn y blaen Dylid cael ei ddisodli gan gyfeirio. Dewch i weld sut mae'n edrych mewn porwr. Mae'r darlun ni fyddwch yn ei hoffi. Nawr mae'n rhaid i ni dechrau disgrifio elfennau o arddull, i wneud cyflawn bwydlenni CSS fertigol.

Disgrifiad arddulliau

Creu my_Vmenu.css ffeil, a oedd yn gosod popeth rydych am ei wella golwg elfen mor bwysig o'r safle. Dyma yw'r cod, bydd cyflwyno sy'n adfywio'r bwydlenni CSS fertigol. Mae'n ac ysgrifennu'r ffeil newydd, ac yna byddwn yn cymryd yn nes edrych ystyr y prif linellau a roddir.

DISGRIFIAD MANWL arddull a ddefnyddiwyd

Nawr yn ystyried y manylion ein CSS dewislen fertigol:

rhestr--fath arddull yn caniatáu i chi gael gwared ar y rhestr o farcwyr. Drwy osod "0" i'r ymyl a padin gwared ar y padin ychwanegol yn y rhestr. Fel y gwelir oddi wrth y cod HTML, ein bwydlen yn rhestr, ac mae'r arddull yn cael eu diffinio gan ddefnyddio CSS.

ul # my_Vmenu - arddull cyffredinol y rhestr gyfan.

ul # my_Vmenu li a - cysylltiadau arddull rhwng y li tag.

ul # my_Vmenu li a: hofran - disgrifiad o'r math sy'n cael ei ystyried o eitemau ar y fwydlen ar adeg pan un hofran dros bobl.

ul # my_Vmenu li rhychwant - disgrifiad testun (dewislen teitl).

Cofiwch fod ffeiliau my_Vmenu.css my_Vmenu.html a rhaid eu cadw yn yr un cyfeiriadur. Fodd bynnag, efallai y byddant yn cael eu lleoli mewn gwahanol ffolderi, ond yna mae'n bwysig cofrestru mewn llwybr ffeil my_Vmenu.html i my_Vmenu.css. Byddwch yn ofalus, oherwydd bod y newydd-ddyfodiaid i'r broblem hon yn aml.

Rhaid Arddull ei gysylltu rhwng y pennaeth tagiau mewn html-ffeil. menu_1.png a menu_2.png - mae hyn yn y darlun ar gyfer yr eitem dewislen llun yn y cyflwr arferol ac hofran.

Mae'n well i achub y delweddau mewn ffolder ar wahân ar gyfer delweddau, ei enw my_images, ond wedyn Addaswch y cod CSS. Ysgrifennwch ble y delweddau hyn yn cael eu dangos, maent yn y cyfeirlyfr hwn: url (my_images / menu_1.png) a'r url (my_images / menu_2.png).

Yng ngweddill yr eiddo a ddisgrifir yn y cod CSS, er mwyn deall yn hawdd. Maent yn diffinio ymddangosiad ein bwydlen. Mae'n hawdd sylwi bod y lled ac uchder o eitemau a nodir ar gyfer yr un eitemau yn y cyflwr arferol, a phan fyddwch yn hofran y llygoden dros arnynt. Maint y Ffont 18px, padding yn nodi'r mewnoliad o ochrau gwahanol o'r enwau lleoedd. arddangos gadael i chi osod yr uned arddangos i osod y lled a padin.

Mae ein bwydlen fertigol

Fel y gwelwch, mae'r bwydlenni CSS fertigol er mwyn creu yn hawdd. Ar sail y data o wybodaeth byddwch yn gallu i'w gwneud yn hardd a deniadol i ymwelwyr i'ch gwefan! Defnyddiwch eich dychymyg, ac yna fwydlen stylish i gyd-fynd eich safle.