Jieun hiji menu horizontal keur situs diri

menu horizontal geus ampir situs mana wae - nya éta hiji bagian penting, salaku mémang mibanda penampilan sarta usability pikeun narik atawa, Sabalikna, nyingsieunan jauh datang. Hayu urang diajar kumaha carana nyieun hiji menu horizontal dasar: nyieun "Rorongkong" pikeun HTML, ngawasaan kaahlian dasar nyieun. Anjeun pasti bisa manggihan menu siap, tapi teuing nicer pikeun neuleuman kumaha carana ngamekarkeun eta diri. Ieu geulis senang.

Diajar nyieun menu

Urang coba teu nyimpang tina semantik, anu taat kana angka ngarah tina perenah ti. Kahiji maneh kudu nyieun hiji "Rorongkong" kanggo ménu urang pikeun HTML, diajar kaahlian dasar nyieun ménu horizontal sorangan. Lajeng deui bakal ngahias, ngagunakeun gaya cadar. Hayu menu horizontal kami ngandung 5 item. Item kahiji bakal dialihkeun ka homepage anu. Kaduana titik - "Tentang kami". Katilu - "kami panghargaan". Kaopat - "Ieu senang." Kalima - "Contact us".

HTML-kode Sigana mah ieu:

Anu teu kenal: tag ul dipaké pikeun bullet, elemen na dimimitian ku li nu. tag Li inherit nu gaya nu dilarapkeun ka ul teh.

Ul - halang unsur daftar, éta bakal stretched mun lebar. Li oge blok a.

Ku kituna, nyieun index.html a. Urang kumpulkeun kode urang. Dina tahap ieu, browser mintonkeun hiji nangtung tinimbang hiji menu horizontal. Tapi kami ku gol Anjeun - sangkan hiji menu horizontal pikeun loka. Pikeun ieu kami kudu CSS.

Naon CSS?

Upami Anjeun gaduh acan ngawasaan ngembangkeun loka, perlu meunang acquainted jeung konsép Cascading Style cadar. Kanyataanna, ieu aturan keur pormat, pamrosésan, nu dilarapkeun kana elemen béda dina kaca ngeunaan hiji web-site. Mun urang nerangkeun sipat unsur dina HTML standar, Anjeun kudu ngulang ieu sababaraha kali, Anjeun meunangkeun duplikasi potongan sarua kode. Kaca beban waktos dina komputer pamaké baris tumuwuh. Ulah ieu, aya CSS a. Ieu suffices pikeun ngajelaskeun wungkul sakali unsur nu tangtu, lajeng saukur nunjukkeun tempat ngagunakeun sipat hiji gaya nu tangtu. Kasebut nyaéta dimungkinkeun pikeun sangkan pedaran moal ukur téks nu Kacana, tapi ogé dina berkas séjén. Ieu bakal ngidinan pikeun nerapkeun pedaran tina gaya béda dina sagala Kaca loka éta. Eta oge merenah pikeun ngaropéa sababaraha kaca, modifying nu CSS-file. cadar gaya ngidinan Anjeun pikeun digawekeun ku fon dina tingkat hadé ti HTML nu, nulungan ulah worsening kaca grafik loka éta.

Ngagunakeun Style cadar pikeun ngembangkeun menu

CSS-kode keur menu nu:

1. # My_1menu {Daptar-gaya: taya; padding: 6; lebar: 800px; margin: otomatis;}
2. # My_1menu li {ngambang: ditinggalkeun; font: italic 18px Arial;}
3. # My_1menu a {warna: # 756; tampilan: block; jangkungna: 55px; garis-jangkungna: 55px; padding: 0px 15px 0px 15px; latar: #dfc; téks-hiasan: taya;}
4. # My_1menu a: hover {warna: #foa; latar: # 788;}

Ayeuna hayu urang nempo menu CSS horizontal anu dihasilkeun.

# My_1menu - kitu aya ngerjakeun gaya pikeun unsur UL- kalawan id = my_1menu, daftar-gaya: taya - paréntah ieu ngaleupaskeun tanda ditinggalkeun ku barang dijadwalkeun.

lebar: 800px - lebar menu urang nyaeta 800 piksel.

padding: 0 - ieu ngaluarkeun padding anu jero.

margin: otomatis - vyravnivnie menu horizontal di puseur kaca urang.

# My_1menu li - assigning gaya li-elemen.

jangkungna: 55px - jangkungna menu.

# My_1menu a: hover - assigning gaya mun unsur jeung mouse keur ngainduksi.

Simkuring moal nerangkeun di jéntré unggal garis, sakumaha unggal pamekar bisa nangtukeun parameter na dieu. Dasar ieu pamakean gaya dina menu nu dina website. Anjeun tiasa masihan hiji penampilan leuwih rengse tur geulis, maké gambar. Napelkeun unsur tapi, contona, latar: url (img1.png) ngulang-x. Hayu aya jadi tukang: url (img2.png) ngulang-x pikeun: hover.

Paké imajinasi, preferensi kreatif Anjeun. Lajeng dumasar kana pangaweruh dina cara nyieun hiji menu basajan dina ramatloka, Anjeun bisa ngamekarkeun kaca sareng desain sorangan unik.