Question

我想将导航栏区域更改为浅蓝色，然后设置我认为可以执行此操作的css，而是将颜色仅放置在我的导航项目后面，而不是整个导航栏区域。如何在整个导航栏区域下获得颜色？

HTML

div.container{
    width:100%;
    border:1px solid gray;
    }


header, footer{
    padding:1em;    
    color:white;
    background-color:black;
    clear:left;
    text-align:center
    }


nav {
    float:left;
    max-width:160px;
    margin:0;
    padding:1em;
    background-color:lightblue; //this did not work
}


nav ul {
    list-style-type: none;
    padding:0;
    }


nav ul a {
    text-decoration: none;
    }


article{
    margin-left:170px;
    border-left:1px solid gray;
    padding:1em;
    overflow:hidden;
}

CSS

{{1}}

Answer 1

我会在flex上使用.container，将其设置为wrap，将header设置为flex: 0 0 100%，以便它flex-basis: 100%并将占据整排。然后将article设置为flex: 1 0 0;（这样flex-grow将填充nav留下的空间

＆＃13;

div.container {
  width: 100%;
  border: 1px solid gray;
  display: flex;
  flex-wrap: wrap;
}

header,
footer {
  padding: 1em;
  color: white;
  background-color: black;
  clear: left;
  text-align: center
}

nav {
  max-width: 160px;
  margin: 0;
  padding: 1em;
  background-color: lightblue; //this did not work
}

nav ul {
  list-style-type: none;
  padding: 0;
}

nav ul a {
  text-decoration: none;
}

article {
  border-left: 1px solid gray;
  padding: 1em;
  overflow: hidden;
  flex: 1 0 0;
}

header {
  flex: 0 0 100%;
}

＆＃13;

<!doctype html>
<html>

<head>
  <title>Cities Gallery</title>
  <link rel="stylesheet" type="text/css" href="css/myStyles.css">
</head>

<body>
  <div class="container">

    <header>
      <h1>City Gallery</h1>
    </header>

    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="london.html">London</a></li>
        <li><a href="paris.html">Paris</a></li>
        <li><a href="tokio.html">Tokyo</a></li>
      </ul>
    </nav>


    <article>
      <div class="intro_text">
        <h1>City Navigator</h1>
        <p>Welcome to my cities website. Click on a link on a left to view City information</p>
      </div>

      <img src="images/cities.jpg" alt="Cities" style="width:352px;height:211px;">


    </article>
  </div>
</body>

＆＃13;

如何用css设置导航区域颜色？

1 个答案: