为什么我的标题和导航在不同的页面上表现不同?我正在尝试制作另一个与主页具有相同导航和标题的页面,但由于某种原因,即使它使用相同的 CSS 文件,它在第二页上的行为也不同。
第1页
<div class="header">
<div class="container">
<div class="row d_flex">
<div class=" col-md-2 col-sm-3 col logo_section">
<div class="full">
<div class="center-desk">
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt="#" /></a>
</div>
</div>
</div>
</div>
<div class="col-md-8 col-sm-12">
<nav class="navigation navbar navbar-expand-md navbar-dark ">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample04">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Nike.html">Nike</a>
</li>
<li class="nav-item">
<a class="nav-link" href="domain.html">adidas</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact Us</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="col-md-2 d_none">
<ul class="email text_align_right">
<li><a href="Javascript:void(0)"> <i class="fa fa-shopping-bag" aria-hidden="true"> <span>0</span></i>
</a>
</li>
<li><a href="Javascript:void(0)">Sign In
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
第2页
<div class="header">
<div class="container">
<div class="row d_flex">
<div class=" col-md-2 col-sm-3 col logo_section">
<div class="full">
<div class="center-desk">
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt="#" /></a>
</div>
</div>
</div>
</div>
<div class="col-md-8 col-sm-12">
<nav class="navigation navbar navbar-expand-md navbar-dark ">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample04">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Nike.html">Nike</a>
</li>
<li class="nav-item">
<a class="nav-link" href="domain.html">adidas</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact Us</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="col-md-2 d_none">
<ul class="email text_align_right">
<li><a href="Javascript:void(0)"> <i class="fa fa-shopping-bag" aria-hidden="true"> <span>0</span></i>
</a>
</li>
<li><a href="Javascript:void(0)">Sign In
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
CSS
.header {
background: transparent;
width: 100%;
z-index: 999;
height: 102px;
padding: 25px 0;
position: fixed;
background-color: #1f2f67;
}
.navigation.navbar {
float: right;
padding: 0;
}
.navigation.navbar-dark .navbar-nav .nav-link{
padding: 0px 25px;
color: #fff;
font-size: 17px;
line-height: 20px;
font-weight: 400;
text-transform: uppercase;
}
.navigation.navbar-dark .navbar-nav .nav-link:focus,
.navigation.navbar-dark .navbar-nav .nav-link:hover {
color: #43eee4;
}
.navigation.navbar-dark .navbar-nav .active>.nav-link,
.navigation.navbar-dark .navbar-nav .nav-link.active,
.navigation.navbar-dark .navbar-nav .nav-link.show,
.navigation.navbar-dark .navbar-nav .show>.nav-link {
color: #43eee4;
}
我的标题颜色不同,第二页标题不固定