简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Kod navbar tetap tidak begitu baik, ia menyebabkan masalah dengan pautan rosak, saya tidak tahu mengapa
P粉004287665
P粉004287665 2024-04-04 09:09:20
0
1
340

Saya tidak begitu pasti bagaimana untuk menerangkan masalah ini, tetapi pada asasnya, navbar tetap saya sama ada tidak tatal tetapi hiperpautan berfungsi, atau tatal navbar tetapi hiperpautan tidak berfungsi. Gelung ini terus berlaku apabila saya cuba membetulkannya dalam html dan css. Saya amat menghargai bantuan mengenai perkara ini.

Ini ialah html bar navigasi: 

<body>
    <nav class="navbar navbar-expand-lg fixed-top navbarScroll">
        <div class="container">
          <!  <a class="navbar-brand" href="#">insertgenericnamehere</a> -->
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#home">Home</a></li>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#About">About</a></li>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#services">UX/UI</a></li>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#Portfolio">Portfolio</a></li>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">Contact</a></li>
                    </li>
                </ul>

            </div>
        </div>
    </nav>

Saya bersumpah ia tidak kelihatan begitu kemas dalam atom

Ini ialah CSS untuk bar navigasi:

Saya tahu saya mempunyai terlalu banyak "jenis gaya senarai", saya masih perlu memadamkan yang berlebihan. 

ul {
  list-style-type: none;
}

 {
  position: fixed;
}

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  list-style-type: none;
}

.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

li {
  float: left;
}

li a {
  display: block;
  color: #666;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  list-style-type: none;
}

li a:hover:not(.active) {
  background-color: #ddd;
}

li a.active {
  color: white;
  background-color: #04AA6D;
}

Saya agak baru dalam html&css jadi jangan ragu untuk memalukan saya untuk perkara bodoh, tetapi secara jujur ​​saya sedih.

P粉004287665
P粉004287665

membalas semua(1)
P粉709307865
P粉7093078652024-04-05 00:58:51 Tingkat 1

Oh, perkara pertama yang saya perhatikan ialah setiap elemen li diikuti oleh </li> dua kali :) Mungkin beberapa autolengkap. Saya tidak pasti apa yang anda maksudkan dengan "navbar tetap tidak menatal, tetapi hiperpautan berfungsi" ?

Tetapi apabila saya mencuba dalam jsFiddle dan menambah 


portfolio

Ia sangat berkesan untuk saya (abaikan <br/>s Saya hanya malas :D) https://jsfiddle.net/kz1fxcpe/#&togetherjs=CecrBwKjSj

EDIT: Saya tahu anda menulis anda akan mengalih keluarnya, tetapi hanya untuk memastikan - hanya <ul> 需要 list-style-type: none; :) Saya bermain-main dengan css anda dan saya akan mengesyorkan menggunakan flex daripada float, ia lebih selamat, tetapi itu mungkin saya Keutamaan, harap anda tidak keberatan. 

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

.navbar-nav {
  display: flex;
  gap: 10px;
}

ul {
  list-style-type: none;
  margin: 0;
}

li a {
  display: inline-block;
  color: #666;
  text-decoration: none;
  padding: 14px;
}

li a:hover:not(.active) {
  background-color: #ddd;
}

li a.active {
  color: white;
  background-color: #04AA6D;
}
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！