css中的背景颜色问题

编写此代码时遇到问题。css中的背景颜色问题

<body> 
    <header> 
     <div class="menu"> 
     <div class="sayfa_ismi"><h1>PAGE TİTLE</h1></div> 
      <nav class="menues"> 
       <ul> 
        <li><a href="index.html" class="home"><p>Home Page</p></a></li> 
        <li><a href="galery.html" class="galery"><p>Galery</p></a></li> 
        <li><a href="stry.html" class="stry"><p>Story</p></a></li> 
        <li><a href="herkes_nerede.html"class="where"><p>Where are the people</p></a></li> 
        <li><a href="iletisim.html" class="iletisim"><p>Contact</p></a></li> 
       </ul> 
      </nav> 
     </div> 
    </header> 



    </div> 
    </body>

在CSS

header{ 
    position: fixed; 
    width: 100%; 
    height: 20%; 
} 

/*************************** title position ************************************/ 
.sayfa_ismi{ 
    text-align: center; 
} 
/*************************** menue position************************************/ 
nav li{ 
    display: inline-block; 
     margin: 0 8% 0 0; 
    } 

nav{ 
    margin: 0 0 0 15%; 
} 

/*************************** menu links************************************/ 
.menues a:link{ 
    color:rgb(255,255,255); 
    text-decoration: none; 
} 
.menues a:hover{ 
    color:blue; 
    background-color:white; 
} 

.menues a:visited{ 
    color: blue; 
    background-color:#FFFFFF; 
    text-decoration: none; 

} 
/***** header font type and background color *****************************/ 
header{ 
    background-color: rgb(59, 113, 255); 
    font-family: 'Andada', serif; 
    font-size: 110%; 
}

我想标题的背景颜色为RGB（59，113，255），我想要的背景色为白色，当我们来到链接，但没有。我该如何解决这个问题？

来源

2017-04-16 Emrah

你有没有检查日志元素，看的CSS被覆盖？您是否尝试过使用！important重要的css声明内嵌或本地重写您的backgounrd-color中的级联样式：css？ –

您应该删除标记a内的p标记。

这里是一个更新的小提琴：fiddle link

希望这有助于！

来源

2017-04-16 11:07:03

谢谢它的工作 – Emrah

该代码会做

<body> 
 
<header id="header"> 
 
    <div class="menu"> 
 
    <div class="sayfa_ismi"> 
 
     <h1>PAGE TITLE</h1> 
 
    </div> 
 
    <nav class="menues"> 
 
     <ul> 
 
     <li> 
 
      <a onmouseover="linkHover()" onmouseout="linkmouseout()" href="index.html" class="home"> 
 
      <p>Home Page</p> 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <a onmouseover="linkHover()" onmouseout="linkmouseout()" href="galery.html" class="galery"> 
 
      <p>Galery</p> 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <a onmouseover="linkHover()" onmouseout="linkmouseout()" href="stry.html" class="stry"> 
 
      <p>Story</p> 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <a onmouseover="linkHover()" onmouseout="linkmouseout()" href="herkes_nerede.html" class="where"> 
 
      <p>Where are the people</p> 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <a onmouseover="linkHover()" onmouseout="linkmouseout()" href="iletisim.html" class="iletisim"> 
 
      <p>Contact</p> 
 
      </a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</header> 
 
<script> 
 
    var header = document.getElementById("header"); 
 
    function linkHover() { 
 
    header.style.backgroundColor = "#fff"; 
 
    } 
 
    function linkmouseout() { 
 
    header.style.backgroundColor = "rgb(59, 113, 255)"; 
 
    } 
 

 
</script> 
 

 

 
</div> 
 
</body>

来源

2017-04-16 11:17:34 ayush

试试这个

header { 
 
    position: fixed; 
 
    width: 100%; 
 
} 
 

 
.menues ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    display: block; 
 
} 
 

 
.menues { 
 
    display: block; 
 
    margin: 0 auto; 
 
    width: 60%; 
 
    padding-bottom: 50px; 
 
} 
 

 
.menues li { 
 
    list-style: none; 
 
    float: left; 
 
    display: inline-block; 
 
} 
 

 
.menues a { 
 
    text-decoration: none; 
 
    padding: 5px 15px; 
 
} 
 

 
.menues a:hover { 
 
    text-decoration: none; 
 
    background: #ffffff; 
 
    border-radius: 4px; 
 
} 
 

 

 
/*************************** title position ************************************/ 
 

 
.sayfa_ismi { 
 
    text-align: center; 
 
} 
 

 

 
/*************************** menue position************************************/ 
 

 
nav li { 
 
    display: inline-block; 
 
    margin: 0 8% 0 0; 
 
} 
 

 

 
/***** header font type and background color *****************************/ 
 

 
header { 
 
    background-color: rgb(59, 113, 255); 
 
    font-family: 'Andada', serif; 
 
    font-size: 110%; 
 
}

<body> 
 
    <header> 
 
    <div class="menu"> 
 
     <div class="sayfa_ismi"> 
 
     <h1>PAGE TİTLE</h1> 
 
     </div> 
 
     <nav class="menues"> 
 
     <ul> 
 
      <li><a href="index.html" class="home">Home Page</a></li> 
 
      <li><a href="galery.html" class="galery">Galery</a></li> 
 
      <li><a href="stry.html" class="stry">Story</a></li> 
 
      <li><a href="herkes_nerede.html" class="where">Where are the people</a></li> 
 
      <li><a href="iletisim.html" class="iletisim">Contact</a></li> 
 
     </ul> 
 
     </nav> 
 
    </div> 
 
    </header> 
 
    </div> 
 
</body>

来源

2017-04-16 11:38:12 Momin

谢谢，我明白一些好点。我有另一个问题如何保持背景白色时，它访问？ – Emrah

使用此属性'a：visited {background} color：white; }'此外，你可以按照此链接https://css-tricks.com/almanac/selectors/v/visited/ – Momin

css中的背景颜色问题

回答

相关问题