Buat menu mendatar untuk laman web ini sendiri

menu mendatar mempunyai hampir mana-mana laman - ia adalah satu bahagian penting, kerana ia boleh dengan penampilan dan kebolehgunaan untuk menarik atau sebaliknya, menakutkan pengunjung. Mari kita belajar cara membuat menu mendatar rendah: membuat ia "rangka" kepada HTML, untuk menguasai kemahiran asas mewujudkan. Anda pasti boleh mencari menu bersedia, tetapi jauh lebih bagus untuk belajar bagaimana untuk membangunkan sendiri. Ia cukup menyeronokkan.

Belajar untuk membuat menu

Kami cuba untuk tidak menyimpang dari semantik, yang berpegang kepada tokoh-tokoh susun atur. Pertama anda perlu membuat "rangka" untuk menu kami kepada HTML, belajar kemahiran asas untuk membuat menu mendatar mereka sendiri. Dan kemudian ia akan menghiasi, menggunakan lembaran gaya. Biarkan menu mendatar kami mengandungi 5 item. Item pertama akan diarahkan ke laman utama. Perkara kedua - "Mengenai kami". Ketiga - "Anugerah kami". Keempat - "Ia menyeronokkan." Kelima - "Hubungi kami".

HTML-kod kelihatan seperti ini:

Siapa yang tidak tahu: tag ul digunakan untuk peluru, unsur-unsur yang bermula dengan li. tag li mewarisi gaya yang digunakan untuk ul.

Ul - unsur blok senarai, ia akan menghulurkan kepada lebar. Li juga blok.

Jadi, buat index.html a. Kami mengumpul kod kami. Pada ketika ini, pelayar memaparkan menegak dan bukannya menu mendatar. Tetapi kita dengan anda matlamat - untuk membuat menu mendatar untuk laman web ini. Untuk ini kita perlu CSS.

Apa yang CSS?

Jika anda masih belum menguasai pembangunan laman web, ia adalah perlu untuk mengetahui dengan konsep Cascading Style Sheets. Malah, ini adalah kaedah-kaedah bagi pemformatan, pemprosesan, yang digunakan untuk elemen yang berbeza pada halaman yang laman web. Jika kita menerangkan sifat-sifat unsur-unsur dalam HTML standard, anda akan mempunyai untuk mengulangi ini beberapa kali, anda akan mendapat pertindihan keping yang sama kod. halaman masa beban pada komputer pengguna akan berkembang. Untuk mengelakkan ini, terdapat CSS a. Ia mencukupi untuk menggambarkan hanya sekali elemen tertentu, dan kemudian hanya menunjukkan di mana untuk menggunakan ciri-ciri gaya tertentu. Ia adalah mungkin untuk membuat penerangan bukan sahaja teks halaman itu sendiri, tetapi juga dalam fail lain. Ini akan membolehkan untuk memohon perihal gaya yang berbeza pada semua halaman di laman web ini. Ia juga mudah untuk mengubah suai beberapa laman, mengubah CSS-fail. lembaran gaya membolehkan anda untuk bekerja dengan fon pada tahap yang lebih baik daripada HTML, membantu untuk mengelakkan semakin teruk halaman grafik laman web ini.

Menggunakan Helaian Gaya untuk pembangunan menu

CSS-kod untuk menu:

1. # My_1menu {-gaya senarai: none; padding: 6; lebar: 800px; margin: auto;}
2. # My_1menu li {float: kiri; fon: italic 18px Arial;}
3. # My_1menu a {color: # 756; paparan: block; height: 55px; line-height: 55px; padding: 0px 15px 15px 0px; latar belakang: #dfc; text-decoration: none;}
4. # My_1menu a: hover {color: #foa; background: # 788;}

Sekarang mari kita lihat menu CSS mendatar yang terhasil.

# My_1menu - jadi ada tugasan gaya untuk elemen ul dengan id = my_1menu, gaya senarai: none - arahan ini untuk menghapuskan markah yang ditinggalkan oleh barangan yang dijadualkan.

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

padding: 0 - ini membuang padding di dalam.

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

# My_1menu li - memberikan gaya li-unsur.

height: 55px - ketinggian menu.

# My_1menu a: hover - memberikan gaya untuk elemen dan tetikus apabila ia adalah disebabkan.

Kami tidak akan menerangkan secara terperinci setiap baris, kerana setiap pemaju boleh menentukan parameter di sini. Ini asas bagi penggunaan gaya dalam menu di laman web. Anda boleh memberikan penampilan yang lebih siap dan cantik, dengan menggunakan gambar. Berikan elemen tetapi, sebagai contoh, latar belakang: url (img1.png) mengulangi-x. Jadilah background: url (img2.png) mengulangi-x untuk a: hover.

Gunakan imaginasi, keutamaan kreatif anda. Maka berdasarkan ilmu yang mengenai cara membuat menu yang mudah di laman web, anda boleh membangunkan halaman dengan reka bentuk yang tersendiri.