Question

为什么section标签不会在导航标签下显示我的背景颜色和边框？任何人都可以帮助我。一直在努力解决这个问题。

nav{
    border:1px solid black;
    background-color:whitesmoke;
}

a:hover{
    color:black;
}

section{
    border:1px solid black;
    background-color:yellow;
}

<html>
  <head>
    <meta charset="UTF-8">
    <title>TheYomads</title>
    <!--Bootstrap-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="indexstyle.css">
  </head>
  <body class="container">
    <img src="images/yomadface.png" alt="yomadface.png" class="img-responsive">
    <nav>
      <a href="index.php">Home</a>
      <a href="blog.php">Blog</a>
      <a href="photography.php">Photography</a>
    </nav>
    <section>
     <h1>This is the place for your homepage.</h1>
    </section>          
    <footer>          
    </footer>    
  </body>    
</html>

Answer 1

当您指定border之类的速记属性时，您未指定的任何值都会获得默认值。

border: yellow

相当于：

border: 0 none yellow

设置border-color: yellow或border: 1px solid yellow。

Answer 2

我会对此进行一次尝试，并假设您希望background-color的{{1}}为黄色并带有您定义的边框。您似乎错过了CSS属性。

不是拥有两个section属性，而是将第二个设置为border

background-color

Answer 3

我找到了你的问题......

请创建一个div类标签 navbar navbar-default

在 li 标记内添加标记..

   <nav>
        <div class="navbar navbar-default">
        <li><a href="index.php">Home</a></li>
        <li><a href="blog.php">Blog</a></li>
        <li><a href="photography.php">Photography</a></li>
        </div>
    </nav>

然后你的CSS代码应该是..

.navbar-default{
border:1px solid black !important;
background-color:whitesmoke !impartant;
}

 .navbar-default li a:hover{
  color:black !impartant;
 }

请确保在bootstrap cdn link之后放置此css代码。

请参阅实时预览https://jsfiddle.net/w19fv5ds/

谢天谢地......

部分代码显示无效

3 个答案: