AmakhompyuthaIzinhlelo

Yenza imenyu ovundlile isayithi ngokwakho

imenyu ovundlile babe cishe kunoma iyiphi indawo - kuba ebalulekile okuyingxenye, njengoba can nge ukubukeka kwayo futhi Ukusebenziseka ukuheha noma, Ngakolunye uhlangothi, okwesabisa away izivakashi. Ake ufunde ukuthi ungadala imenyu aphansi ovundlile: ukwenza kube "skeleton" HTML, ukuze balukhulume kahle amakhono ayisisekelo yokudala. Ungakwazi Ngokuqinisekile ukuthola imenyu ngomumo, kodwa nicer okuningi ukuze ufunde indlela ukuthuthukisa ngokwakho. Akuve kumnandi kuhle.

Funda ukwenza imenyu

Sizama ukungasho zehluke engasho lutho, okuyinto zithobele izibalo eziholayo sakhiwo. Okokuqala kufanele wenze "skeleton" ngoba amamenyu ethu HTML, lokufunda amakhono ayisisekelo ukwenza siqu amamenyu zabo ovundlile. Futhi ke kuyoba ukuhlobisa, usebenzisa isitayela amashidi. Ake imenyu yethu ovundlile iqukethe izinto 5. Into yokuqala bazophinde baqondiswe lasekhaya. Eyesibili iphuzu - "Mayelana kithi". Eyesithathu - "imiklomelo yethu". Okwesine - "Akuve kumnandi." Okwesihlanu - "Thintana nathi".

-HTML ikhodi libukeka kanje:

Ngubani akazi: ithegi ul osetshenziselwa ichashazi, izakhi zawo aqala li. Li tags ifa nezitayela esetshenziswe ul.

Ul - block elementi ohlwini, kuyothiwa sinwebiswe ububanzi. Li futhi block.

Ngakho, dala index.html. Siqoqa ikhodi yethu. Kuleli qophelo, isiphequluli ubonisa mpo kunokuba imenyu ovundlile. Kodwa thina nge umgomo - ukwenza imenyu ovundlile isayithi. Ngenxa yalesi sidinga CSS.

Kuyini CSS?

Uma une kodwa ukuze balukhulume kahle ukuthuthukiswa sites, kubalulekile ukuba bajwayelane nomqondo Cascading Style Sheets. Eqinisweni, lezi imithetho ukufomatha, ukucubungula, ezisetshenziswa kuzo izakhi ezahlukene emakhasini web-site. Uma thina ukuchaza izakhiwo izici ku-HTML ejwayelekile, kuzodingeka ukuphinda lokhu izikhathi eziningana, uthola ukuphindaphindeka izingcezu efanayo ikhodi. ikhasi umthwalo isikhathi kwikhompyutha yomsebenzisi luyokhula. Ukuze ugweme lokhu, kukhona CSS. Ubufakazi obanelisayo ukuchaza kanye kuphela isici esithile, bese umane ubone ukuthi kukuphi lapho ukusebenzisa izakhiwo ukuba silandele isitayela esithile. Kungenzeka ukwenza incazelo hhayi kuphela embhalweni wekhasi ngokwayo, kodwa futhi elinye ifayela. Lokhu kuzovumela ukusebenzisa incazelo izitayela ezahlukene kuwo wonke amakhasi wesayithi. Libuye elula ukuthi iguqule Kwamanye amakhasi ukulungisa CSS-fayela. Isitayela amashidi akuvumela ukusebenza amafonti kuzinga ungcono-HTML, ekusizeni ukugwema eziya ziba zimbi emakhasini ihluzo isayithi.

Ukusebenzisa Style Sheets ekuthuthukiseni imenyu

CSS-code for imenyu:

  1. # My_1menu {uhlu-isitayela: none; ukupheda: 6; ububanzi: 800px; margin: auto;}
  2. # My_1menu li {iflothi: kwesokunxele; ifonti: i-ithalikhi 18px Arial;}
  3. # My_1menu a {umbala: # 756; isibonisi: block; ukuphakama: 55px; umugqa-ukuphakama: 55px; ukupheda: 0px 15px 0px 15px; ingemuva: #dfc; ukuhlotshiswa kombhalo: lutho;}
  4. # My_1menu a: lokuhambisa phezulu {umbala: #foa; ingemuva: # 788;}

Manje ake sibheke okuholela ovundlile CSS imenyu.

# My_1menu - ngakho kukhona isabelo yesitayela UL- isici nge id = my_1menu, uhlu-isitayela: none - lo myalo ukususa izimpawu kwesokunxele izinto ehleliwe.

ububanzi: 800px - ububanzi imenyu yethu 800 pixels.

ukupheda: 0 - lokhu kususa ukupheda ngaphakathi.

margin: auto - vyravnivnie imenyu ovundlile esikhungweni ekhasini lethu.

# My_1menu li - ukwabela izitayela li-izakhi.

ukuphakama: 55px - imenyu ukuphakama.

# My_1menu a: lokuhambisa phezulu - ukwabela izitayela ukuze isici negundane lapho eyenga.

Ngeke ukuchaza ngokuningiliziwe zonke line, njengoba zonke umthuthukisi ungacacisa imingcele yayo lapha. Lokhu isisekelo ukusetshenziswa izitayela kwimenyu kuwebhusayithi. Ungakwazi uyinike ukubukeka siphelile kakhudlwana futhi amahle, usebenzisa izithombe. Nikeza isici kodwa, isibonelo, ngemuva:-url (img1.png) phinda-x. Makube khona ngemuva:-url (img2.png) phinda-x ukuze: lokuhambisa phezulu.

Sebenzisa amehlo, izintandokazi zakho zokudala. Khona-ke olusekelwe olwazini sendlela ukwakha imenyu elula kuwebhusayithi, ungakwazi ukuthuthukisa ikhasi nge design yayo ehlukileko.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 zu.atomiyme.com. Theme powered by WordPress.