Question

到目前为止，我遇到的问题是关于我的网页样式化。

我已经构建了一个内嵌导航栏，但是当我要更改其背景颜色时它不会影响我想要着色的高度。我想知道我是否可以对但做些什么来影响导航栏的大小或样式

PICTURES（我使用background-color : green;）：

body{
  margin : 0;
  padding : 0;
  font-family : 'Arial',serif;
}

/*nav class  */
.nav {
  background-color : green;
  color: white;
  list-style : none;
  text-align : right;
  padding : 0px 0 0px 0;
}

/*A li tag in a .nav class*/
.nav > li {
  display : inline-block;
  padding-right: 50px;/*same as 0 25px 0 25px ( top left bottom right */
  font-size: 14px;
}

/*a tag inside a li tag inside a .nav class*/
.nav > li > a { 
  text-decoration : none;
  color: black;
}

/* a tag inside a li tag inside a .nav class while mouse hovering */
.nav > li > a:hover {
  color : #c1c1c1;
}

.logo {
  float : left;
  padding-left : 25px;
}

.logo > .logo-image {
  position: relative;
  bottom : 8px;
  width : 128px;
}

.banner {
  width : 100%;
  display : block;
}

.banner  > .banner-image{
  width : 100%;
  display : block ;
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>DeckArts Graphics</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

  <body>
    <ul class="nav">
      <div class="logo">
        <a class="logo-image" href="#home">
          <img  src="ZE.png" >
        </a>
      </div>

      <li><a href="#Home">Home</a></li>
      <li><a href="#Gallery">Gallery</a></li>
      <li><a href="#Projects">Projects</a></li>
      <li><a href="#About">About</a></li>
    </ul>

    <div class="banner">
      <img class="banner-image" src="banner.jpg" >
    </div>
  </body>
</html>

Answer 1

重置边距并将填充应用于导航功能。

具体来说，

将padding : 0px 0 0px 0;更改为padding : 10px 0 10px 0;
添加margin:0px。

下面的演示。

＆＃13;

body{
  margin : 0;
  padding : 0;
  font-family : 'Arial',serif;


}
/*nav class  */
.nav {
  background-color : green;
  color: white;
  list-style : none;
  text-align : right;
  padding : 10px 0 10px 0;
  margin:0px;
}
/*A li tag in a .nav class*/
.nav > li {
  display : inline-block;
  padding-right: 50px;/*same as 0 25px 0 25px ( top left bottom right */
  font-size: 14px;



}
/*a tag inside a li tag inside a .nav class*/
.nav > li > a { 
  text-decoration : none;
  color: black;
}
/* a tag inside a li tag inside a .nav class while mouse hovering */
.nav > li > a:hover {
  color : #c1c1c1;
}
.logo {

  float : left;
  padding-left : 25px;
}
.logo > .logo-image {

  position: relative;
  bottom : 8px;
  width : 128px;
}
.banner {
  width : 100%;
  display : block;
}
.banner  > .banner-image{
  width : 100%;
  display : block ;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>DeckArts Graphics</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

  <body>
    <ul class="nav">
      <div class="logo">
        <a class="logo-image" href="#home">
          <img  src="ZE.png" >
        </a>
      </div>

      <li><a href="#Home">Home</a></li>
      <li><a href="#Gallery">Gallery</a></li>
      <li><a href="#Projects">Projects</a></li>
      <li><a href="#About">About</a></li>
    </ul>

    <div class="banner">
      <img class="banner-image" src="banner.jpg" >
    </div>
  </body>
</html>

＆＃13;

HTML / CSS - 导航栏拉伸/填充背景颜色

1 个答案: