Question

我实际上有两个相关问题。当我向下滚动时，我希望在页面顶部显示橙色导航。它适用于除主页之外的所有其他页面。我对头寸和z-index方面有点困惑。其次，我希望用户所在页面的活动文本为＃000000。

/ ****************顶部导航******************** /

#nav {
width:  100%;
position:  relative;
text-align:  center;
z-index:  999;  
height:  63px;
background:  #ED8A39; }

#nav.affix {
position: fixed;
top: 0;
width: 100%;
min-height: 50px;
z-index:10;
} 


#nav ul li:hover > ul {
display: block;  }

#nav ul {
padding: 0;
margin:  0 auto;
list-style: none;
position: relative;
display: inline-table;  }

#nav ul:after {
content: ""; clear: both; display: block;  }

#nav ul li {
float: left; }

#nav ul li:hover {
background: #ffffff;  }

#nav ul li:hover a {
color: #ED8A39;  }

#nav ul li a {
display: block; 
padding: 22px 8px;
color: #ffffff; 
margin:  0;
text-decoration: none;    }

#nav ul li active {
    color: black;  }

.nav-container  {
width:  100%;
font-size:  13px;
font-weight: normal;
margin: 0 auto;  }

   <div class="nav-container">
    <ul>          
    <li><a href="index.html">HOME</a></li>
    <li><a href="family_planning_clinics.html">FAMILY PLANNING 
       CLINICS</a></li>
    <li><a href="healtheducation.html">HEALTH EDUCATION</a></li>    
    <li><a href="breast_cervical_clinics.html">BREAST &amp; 
       CERVICAL CANCER</a></li>
    <li><a href="primary_health_care.html">PRIMARY HEALTH CARE</a></li>
    <li><a href="natural_fam_planning.html">NATURAL FAMILY PLANNING</a></li>
    <li><a href="immunizations.html">IMMUNIZATIONS</a></li>
      </ul>
          </div>

     </div><!-- close nav-->
     </div>

     <div class="cycle-slideshow" style="position: relative; z-index:  -1;">
       <img src="assets/img/slide-family-planning.jpg" 
         width="100%" alt="family planning clinic" />
       <img src="assets/img/slide-health-education.jpg" 
         width="100%" alt="health education clinic" />
       <img src="assets/img/slide-breast-cervical-cancer.jpg" 
         width="100%" alt="breast cervical cancer" />
       <img src="assets/img/slide-primary-health-care.jpg" 
         width="100%" alt="primary health care" />
       <img src="assets/img/slide-natural-family-planning.jpg" 
         width="100%" alt="natural family planning" />
       <img src="assets/img/slide-immunizations.jpg" 
         width="100%" alt="immunizations" />
    </div>

Answer 1

在您的家中找到以下行：

<div id="nav" class="navbar" style="margin-bottom:  0; padding-bottom:  0;   border-radius:  0;">

将其更改为：

<div id="nav" class="affix">

这将激活粘贴标题。

关于您想要的颜色更改，请使用a:active {color:#000000}，但请在CSS文件中保留此顺序：

首先：a:link

第二名：a:visited

第三名：a:hover

第四名：a:active

除主页外，为什么导航不能保留所有页面？

1 个答案: