01 dari 06
Bagaimana Membuat Navigasi Tab dengan CSS dan Tiada Imej
Navigasi di laman web adalah satu senarai, dan navigasi tab seperti senarai mendatar. Ia agak mudah untuk membuat navigasi tab mendatar dengan CSS, tetapi CSS 3 memberi kita beberapa alat untuk menjadikannya kelihatan lebih baik.
Tutorial ini akan membawa anda melalui HTML dan CSS yang diperlukan untuk membuat menu tab CSS. Klik pada pautan itu untuk melihat bagaimana ia akan kelihatan.
Menu tab ini tidak menggunakan imej , hanya HTML dan CSS 2 dan CSS 3. Ia boleh dengan mudah diedit untuk menambah lebih banyak tab atau menukar teks di dalamnya.
Sokongan Penyemak Imbas
Menu tab ini akan berfungsi di semua pelayar utama . Penjelajahan internet tidak akan menunjukkan sudut yang bulat, tetapi jika tidak, ia akan menunjukkan tab seperti Firefox, Safari, Opera, dan Chrome.
02 dari 06
Tulis Senarai Menu Anda
Semua menu dan tab navigasi benar-benar hanya senarai tidak teratur. Jadi perkara pertama yang anda ingin lakukan adalah menulis senarai pautan yang tidak disusun ke tempat yang anda mahu navigasi tab anda pergi.
Tutorial ini mengandaikan bahawa anda menulis HTML anda dalam editor teks dan anda tahu di mana untuk meletakkan HTML untuk menu anda pada halaman web anda.
Tulis senarai tidak teratur anda seperti ini:
- class = "tablist">
- CSS 3
- id = "semasa"> Tab
- Untuk
- Menu
Anda akan melihat bahawa kod itu memanggil dua perkara: class = "tablist" dan id = "current". Yang pertama diperlukan . Jika anda tidak memasukkan kelas senarai tab pada senarai tidak disusun anda, tab tidak akan berfungsi. Yang kedua ialah pilihan. Letakkan id = "semasa" pada mana-mana tab yang anda ingin diserlahkan pada halaman itu. Saya biasanya menggunakannya untuk menyerlahkan halaman yang saya gunakan, tetapi anda boleh menggunakannya untuk menyerlahkan tab yang paling penting. Atau anda boleh mengeluarkannya sepenuhnya.
03 dari 06
Mula Mengedit Lembaran Gaya Anda
Anda boleh menggunakan sama ada hela gaya luaran atau helaian gaya dalaman . Halaman menu sampel menggunakan helaian gaya dalaman dalam
dokumen.Pertama Kami akan Gaya UL itu sendiri
Di sinilah kita menggunakan tablist kelas. Dalam HTML. Daripada menggayakan tag UL, yang akan menyusun semua senarai yang tidak disusun pada halaman anda, anda hanya perlu menaip kelas UL. tablist Jadi kemasukan pertama dalam CSS anda hendaklah:
.tablist {}Saya suka meletakkan di penjepit kerinting akhir (}) lebih awal dari masa, jadi saya tidak lupa kemudian.
Walaupun kami menggunakan tag senarai yang tidak disusun untuk senarai menu tab, tetapi kami tidak mahu sebarang peluru atau angka merayap. Jadi gaya pertama yang perlu anda tambah adalah. senarai gaya: tiada; Ini memberitahu penyemak imbas bahawa walaupun senarai itu, ia adalah senarai tanpa gaya yang telah ditentukan (seperti peluru atau nombor).
Kemudian, anda boleh menetapkan ketinggian senarai anda untuk memadankan ruang yang anda mahu mengisi. Saya memilih 2em untuk ketinggian saya, kerana itu dua kali ganda saiz fon standard, dan memberikan kira-kira setengah em di atas dan di bawah teks tab. ketinggian: 2em; Tetapi anda boleh menetapkan lebar anda dengan apa jua saiz yang anda inginkan. Tag UL akan secara automatik mengambil 100% dari lebar, jadi melainkan jika anda mahu ia menjadi lebih kecil daripada bekas semasa, anda boleh meninggalkan lebarnya.
Akhirnya, jika helaian gaya induk anda tidak mempunyai pratetap untuk tag UL dan OL, anda akan mahu memasukkannya. Ini bermakna anda perlu mematikan sempadan, margin, dan padding pada UL anda. padding: 0; margin: 0; sempadan: tiada; Sekiranya anda telah menetapkan semula tag UL, anda boleh menukar margin, padding, atau sempadan kepada sesuatu yang sesuai dengan reka bentuk anda.
Kelas akhir .tablist anda sepatutnya kelihatan seperti ini:
.tablist {list-style: none; ketinggian: 2em; padding: 0; margin: 0; sempadan: tiada; }04 dari 06
Mengedit Item Senarai LI
Sebaik sahaja anda telah menyusun senarai tidak teratur anda, anda perlu menyusun tag LI di dalamnya. Jika tidak, mereka akan bertindak seperti senarai standard dan setiap langkah ke baris seterusnya tanpa meletakkan tab anda dengan betul.
Pertama, sediakan harta gaya anda:
.tablist li {}Kemudian anda mahu mengapungkan tab anda supaya mereka bersatu di pesawat mendatar. terapung: kiri;
Dan jangan lupa untuk menambah beberapa margin antara tab, supaya mereka tidak bergabung bersama. margin-right: 0.13em;
Gaya li anda harus kelihatan seperti ini:
.tablist li {float: left; margin-right: 0.13em; }05 dari 06
Membuat Tab kelihatan seperti Tab dengan CSS 3
Untuk melakukan kebanyakan mengangkat berat dalam helaian gaya ini, saya menargetkan pautan dalam senarai yang tidak disusun. Pelayar mengakui bahawa pautan lebih banyak dilakukan pada halaman web daripada tag lain, jadi lebih mudah untuk mendapatkan penyemak imbas yang lebih lama untuk mematuhi perkara-perkara seperti keadaan hover jika anda melampirkannya ke tag anchor (pautan). Jadi mula-mula menulis sifat gaya anda:
.tablist li a {} .tablist li a: hover {}Kerana tab ini harus bertindak seperti tab dalam aplikasi, anda mahu seluruh kawasan tab dapat diklik, bukan hanya teks yang dipautkan. Untuk melakukan ini, anda perlu menukarkan teg A daripada keadaan " inline " biasa ke dalam elemen blok . paparan: blok; (Jika anda berminat untuk mengetahui lebih lanjut mengenai perbezaannya, baca Elemen Blok Tahap vs. Inline .)
Kemudian, cara mudah untuk memaksa tab anda menjadi simetri antara satu sama lain, tetapi masih flex untuk muat lebar teks adalah untuk membuat padding kanan dan kiri yang sama. Saya menggunakan harta padat padding untuk menetapkan bahagian atas dan bawah ke 0 dan kanan dan kiri ke 1em. padding: 0 1em;
Saya juga memilih untuk membuang pautan yang menggariskan, supaya tab kelihatan kurang seperti pautan. Tetapi jika penonton anda mungkin keliru dengan itu, biarkan baris ini. pautan-hiasan: tiada;
Dengan meletakkan sempadan nipis di sekeliling tab, ia menjadikannya kelihatan seperti tab. Saya menggunakan sempadan sempadan harta untuk meletakkan sempadan di sekeliling empat sempadan: 0.06em pepejal # 000; Dan kemudian menggunakan harta sempadan bawah untuk mengeluarkannya dari bahagian bawah. sempadan bawah: 0;
Kemudian saya membuat beberapa pelarasan pada font, warna, dan warna latar belakang tab. Tetapkan ini kepada gaya yang sepadan dengan tapak anda. fon: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; warna: # 000; warna latar belakang: #ccc;
Semua gaya di atas harus masuk dalam pemilih .tablist li a, peraturan supaya mereka menjejaskan tag utama secara umum. Kemudian untuk membuat tab kelihatan lebih banyak boleh diklik, anda perlu menambah beberapa peraturan negeri .tablist li a: hover.
Saya suka menukar warna teks dan latar belakang untuk membuat tab pop apabila anda mengetepikannya. latar belakang: # 3cf; warna: #fff;
Dan saya memasukkan peringatan lain kepada penyemak imbas yang saya mahu pautan itu tetap tidak digariskan. teks-hiasan: tiada; Kaedah lain yang biasa adalah untuk menghidupkan garis bawah ketika anda mengetikkan tab. Sekiranya anda mahu melakukan itu, ubahlah ia ke hiasan teks: garis bawah;
Tetapi di manakah CSS 3?
Jika anda telah memberi perhatian, anda mungkin perasan bahawa tidak terdapat sebarang gaya CSS 3 yang digunakan dalam helaian gaya. Ini mempunyai kelebihan bekerja dalam mana-mana penyemak imbas moden, termasuk Internet Explorer. Tetapi ia tidak membuat tab kelihatan seperti apa-apa lebih daripada kotak persegi. Dengan menambahkan julat peralihan gaya CSS 3 (dan panggilan berkaitan pelayar yang berkaitan), anda boleh membuat tepi bulat, kelihatan seperti tab di folder manila.
Gaya yang harus anda tambahkan ke .tablist li peraturan adalah: -webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; border-top-right-radius: 0.50em; border-top-left-radius: 0.50em;
Ini adalah peraturan gaya akhir yang saya tulis:
.tablist li a {display: block; padding: 0 1em; teks-hiasan: tiada; sempadan: 0.06em pepejal # 000; sempadan bawah: 0; fon: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; warna: # 000; warna latar belakang: #ccc; / * CSS 3 elemen * / webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; border-top-right-radius: 0.50em; border-top-left-radius: 0.50em; } .tablist li a: hover {background: # 3cf; warna: #fff; teks-hiasan: tiada; }Dengan gaya ini, anda mempunyai menu tab yang berfungsi dalam semua pelayar utama dan kelihatan seperti tab cetak bagus dalam pelayar yang mematuhi CSS 3. Halaman seterusnya memberi anda satu lagi pilihan yang boleh anda gunakan untuk berpakaian lebih banyak lagi.
06 dari 06
Serlahkan Tab Semasa
Dalam HTML yang saya buat, UL mempunyai satu elemen senarai dengan ID. Ini membolehkan anda memberikan satu LI gaya yang berbeza dari yang lain. Keadaan yang paling biasa ialah membuat tab semasa menonjol dalam beberapa cara. Satu lagi cara untuk memikirkan ini adalah bahawa anda mahu kelabu keluar tab yang tidak hidup. Anda kemudian menukar tempat id berada pada halaman yang berbeza.
Saya gaya kedua #current A tag serta #current A: hover sta supaya kedua-duanya sedikit berbeza. Anda boleh menukar warna, warna latar belakang, walaupun ketinggian, lebar dan padding unsur itu. Buat perubahan apa pun dalam reka bentuk anda.
.tablist li # current a {background-color: # 777; warna: #fff; } .tablist li # current a: hover {background: # 39C; }Dan anda sudah selesai! Anda baru membuat menu tab untuk tapak web anda.