Rumah > hujung hadapan web > tutorial css > Bina bar navigasi mendatar menggunakan item senarai sebaris dalam CSS

Bina bar navigasi mendatar menggunakan item senarai sebaris dalam CSS

PHPz
Lepaskan: 2023-08-29 14:29:11
ke hadapan
651 orang telah melayarinya

使用 CSS 中的内联列表项构建水平导航栏

Bina bar navigasi mendatar menggunakan item senarai sebaris. Tetapkan elemen

  • sebaris.

    Contoh

    Anda boleh cuba jalankan kod berikut untuk membuat bar navigasi mendatar:

    Demo Langsung

    <!DOCTYPE html>
    <html>
       <head>
          <style>
             ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
             }
             .active {
                background-color: #4CAF50;
                color: white;
             }
             li {
                border-bottom: 1px solid #555;
                display: inline;
             }
          </style>
       </head>
       <body>
          <ul>
             <li><a href = "#home">Home</a></li>
             <li><a href = "#company" class="active">Company</a></li>
             <li><a href = "#product">Product</a></li>
             <li><a href = "#services">Services</a></li>
             <li><a href = "#contact">Contact</a></li>
          </ul>
       </body>
    </html>
    Salin selepas log masuk
  • Atas ialah kandungan terperinci Bina bar navigasi mendatar menggunakan item senarai sebaris dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

    Kenyataan Laman Web ini
    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
    Tutorial Popular
    Lagi>
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan