Membuat menu horizontal untuk situs sendiri

menu horizontal hampir situs apapun - itu adalah bagian penting, karena dapat dengan penampilan dan kegunaan untuk menarik atau, sebaliknya, menakut-nakuti pengunjung. Mari kita belajar cara membuat menu horizontal SD: membuat "kerangka" untuk HTML, untuk menguasai keterampilan dasar menciptakan. Anda pasti dapat menemukan menu siap, tapi jauh lebih baik untuk belajar bagaimana mengembangkan sendiri. Ini cukup menyenangkan.

Belajar membuat menu

Kami mencoba untuk tidak menyimpang dari semantik, yang mematuhi tokoh terkemuka tata letak. Pertama Anda harus membuat "kerangka" untuk menu kami untuk HTML, belajar keterampilan dasar untuk membuat menu horisontal mereka sendiri. Dan kemudian akan menghias, menggunakan style sheet. Biarkan menu horizontal kami berisi 5 item. Item pertama akan diarahkan ke homepage. Kedua titik - "Tentang kami". Yang ketiga - "kami penghargaan". Keempat - "Ini menyenangkan." Kelima - "Hubungi kami".

HTML-kode terlihat seperti ini:

Siapa yang tidak tahu: tag ul digunakan untuk peluru, unsur-unsurnya dimulai dengan li. tag li mewarisi gaya yang diterapkan ul tersebut.

Ul - elemen blok dari daftar, maka akan membentang untuk lebar. Li juga blok.

Jadi, buat index.html a. Kami mengumpulkan kode kita. Pada titik ini, browser menampilkan vertikal daripada menu horizontal. Tapi kami dengan tujuan Anda - untuk membuat menu horizontal untuk situs. Untuk ini kita perlu CSS.

Apa itu CSS?

Jika Anda belum menguasai pengembangan situs, perlu untuk berkenalan dengan konsep Cascading Style Sheets. Bahkan, ini adalah aturan untuk format, pengolahan, yang diterapkan untuk unsur-unsur yang berbeda pada halaman web-situs. Jika kita menggambarkan sifat dari unsur-unsur di HTML standar, Anda akan harus mengulangi ini beberapa kali, Anda mendapatkan duplikasi potongan kode yang sama. Halaman beban waktu pada komputer pengguna akan tumbuh. Untuk menghindari hal ini, ada CSS. Itu sudah cukup untuk menggambarkan hanya sekali elemen tertentu, dan kemudian hanya menunjukkan di mana untuk menggunakan properti dari gaya tertentu. Hal ini dimungkinkan untuk membuat deskripsi tidak hanya teks dari halaman itu sendiri, tetapi juga dalam file lain. Hal ini akan memungkinkan untuk menerapkan deskripsi dari gaya yang berbeda pada semua halaman situs. Hal ini juga mudah untuk memodifikasi beberapa halaman, memodifikasi CSS-file. style sheet memungkinkan Anda untuk bekerja dengan font pada tingkat yang lebih baik dari HTML, membantu untuk menghindari memburuknya halaman grafis dari situs.

Menggunakan Style Sheets untuk pengembangan menu

CSS-kode untuk menu:

1. # My_1menu {list-style: none; padding: 6; width: 800px; margin: auto;}
2. # My_1menu li {float: left; Font: italic 18px Arial;}
3. # My_1menu a {color: # 756; display: block; height: 55px; line-height: 55px; padding: 0px 15px 0px 15px; background: #dfc; text-decoration: none;}
4. # My_1menu a: hover {color: #foa; background: # 788;}

Sekarang mari kita lihat menu CSS horisontal yang dihasilkan.

# My_1menu - sehingga ada tugas gaya untuk elemen UL- dengan id = my_1menu, list-style: none - perintah ini untuk menghapus tanda yang ditinggalkan oleh item yang dijadwalkan.

width: 800px - lebar menu kami adalah 800 piksel.

padding: 0 - ini menghilangkan padding dalam.

margin: auto - vyravnivnie menu horizontal di tengah halaman kami.

# My_1menu li - menugaskan gaya li-elemen.

height: 55px - ketinggian menu.

# My_1menu a: hover - menugaskan gaya untuk elemen dan mouse ketika diinduksi.

Kami tidak akan menjelaskan secara rinci setiap baris, karena setiap pengembang dapat menentukan parameter di sini. dasar ini untuk penggunaan gaya dalam menu di website. Anda dapat memberikan penampilan yang lebih selesai dan indah, menggunakan gambar. Menetapkan elemen tetapi, misalnya, background: url (img1.png) mengulang-x. Biarlah ada background: url (img2.png) mengulang-x untuk: hover.

Gunakan imajinasi, preferensi kreatif Anda. Kemudian berdasarkan pengetahuan tentang cara membuat menu sederhana di website, Anda dapat mengembangkan halaman dengan desain yang unik.