cari

Rumah  >  Artikel  >  hujung hadapan web  >  Cara untuk menyediakan struktur navigasi mendatar dalam Html_HTML/Xhtml_Web pengeluaran halaman

Cara untuk menyediakan struktur navigasi mendatar dalam Html_HTML/Xhtml_Web pengeluaran halaman

WBOY
WBOYasal
2016-05-16 16:36:032794semak imbas

Artikel ini akan berkongsi dengan anda dua kaedah untuk menyediakan struktur navigasi mendatar, terutamanya dengan bantuan struktur senarai.

Kaedah 1: Gabungan struktur blok dan struktur sebaris.

Di sini kami mula-mula memperkenalkan perbezaan antara elemen blok dan struktur sebaris.

(1) Struktur blok boleh menetapkan atribut seperti ketinggian garisan, lebar (lebar, tinggi), jidar (margin, padding) dan sempadan (sempadan). Elemen sebaris hanya boleh menetapkan ketinggian garisan, jidar kiri dan kanan, tetapi tidak mempunyai atribut seperti jidar luar, padding atas dan bawah serta jidar.

(2) Struktur blok lebih menonjol dan tidak berkongsi baris dengan elemen lain. Elemen sebaris boleh disarangkan dalam elemen lain.

Elemen blok biasa termasuk ul, ol, p, bentuk, dsb. Elemen sebaris biasa termasuk meta, img, span, h1-h6, label, dsb.

Tetapi kadangkala, untuk menjadikan struktur bongkah mempunyai ciri-ciri elemen sebaris, atau untuk menjadikan elemen sebaris mempunyai ciri-ciri elemen blok, kedua-duanya digabungkan. Untuk memberikan contoh membuat elemen sebaris mempunyai ciri-ciri elemen blok: teg ialah salah satu teg sebaris yang paling penting dan pengguna boleh mengakses halaman yang sepadan mengikut pautan yang ditentukannya. Untuk menjadikan elemen di bawah teg lebih cantik, kami ingin menetapkan beberapa atribut untuk pautan ini, termasuk sempadan, jidar, warna latar belakang, dsb. Kami tahu bahawa atribut ini hanya dimiliki oleh struktur blok, jadi pada masa ini kami bukan sahaja mahu terus menggunakan tag sebaris a untuk menampung kandungan pautan, tetapi juga berharap elemen sebaris ini juga boleh mempunyai atribut yang berkaitan dengan struktur blok.

Kami boleh menyelesaikan masalah ini melalui tetapan "a{display:block}".

Begitu juga, apabila kami ingin menggunakan senarai untuk mencapai tujuan menyediakan navigasi mendatar, kami mahu setiap baris senarai dipaparkan pada baris yang sama Pada masa ini, kami juga boleh mencapai matlamat ini melalui gabungan struktur blok dan struktur sebaris.

Kami hanya perlu menambah satu baris kod pada senarai: list{display:inline;}

Kaedah 2: Gunakan tetapan atribut apungan.

Apungan atribut boleh ditetapkan untuk terapung dalam dua arah, termasuk kiri dan kanan. Menetapkan navigasi mendatar adalah untuk mengapungkan senarai secara mendatar ke kiri. Terapung ke kiri adalah kerana kami berharap selepas menetapkan terapung, susunan navigasi akan mendatar dari kiri ke kanan, iaitu dari kiri ke kanan, navigasi satu. ke navigasi empat Ini Lebih selaras dengan tabiat lebih ramai pengguna.

Kod:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. >  
  2. <html>  
  3. <kepala lang="en" >  
  4.     <meta charset="UTF- 8">  
  5.     <tajuk>tajuk>  
  6.     <gaya taip="teks/ css">  
  7.         ul{   
  8.             float:right;   
  9.         }   
  10.         li{   
  11.             padding-kanan:30px;   
  12.             apung: kiri;   
  13.         }   
  14.         a{   
  15.             margin-kiri:20px;   
  16.             saiz fon:20px;   
  17.             berat fon: tebal;   
  18.             warna:putih;   
  19.             paparan:sekat;   
  20.             sempadan:1px pepejal hitam;   
  21.             lebar:100px;   
  22.             teks-hiasan:tiada;   
  23.             text-align:center;   
  24.             warna latar belakang:hijau laut gelap;   
  25.         }   
  26.         a:tuding{   
  27.             warna:merah;   
  28.         }  
  29.     Stil>  
  30. Kopf>  
  31. <Körper>  
  32. <ul>  
  33.     <li>导航一li>  
  34.     <li>导航二li>  
  35.     <li>导航三li>  
  36. ul>  
  37.   
  38. <a href="#" >百度a>  
  39. Körper>  
  40. html>  

以上就是本文的全部内容,希望对大家的学习有所帮助.

原文：http://www.cnblogs.com/xiaoqqmin/p/5317551.html

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Penjelasan terperinci tentang fungsi muat turun html_HTML/Xhtml_Penghasilan halaman webArtikel seterusnya：Penjelasan terperinci tentang fungsi muat turun html_HTML/Xhtml_Penghasilan halaman web

Artikel berkaitan

Lihat lagi