Question

 <!DOCTYPE HTML>
 <html lang ="en">
 <meta charset = "utf-8" />
 <head>
 <title>Example Page</title>
 <link rel="stylesheet" type="text/css" href="Web_Design_01_Stylesheet.css" />
 </head>

  <body>

  <div id = "container">
    <header>
   <div id = "static_nav">
    <nav>
     <a href="Home">Home</a>
     <a href="About Us">About Us</a>
     <a href="Contact Us">Contact US</a>
     <a href="Gallery">Gallery</a>
     <a href="Member Login">Member Log-in</a>
   </nav>
  </div>
   </header>

<div id = "block_two">
  <p></p>
</div>

<div id = "block_three">
  <p> Block Three </p>
</div>

<div id ="block_four">
  <p> Block Four </p>
</div>

</body>
 <div id = "end_block">
  <footer>
   <p> This is where the footer would go </p>
  </footer>
 </div>
</div>
</html>

这是CSS

body {

height: 100%;
width: 100%;
max-width: 100%;
overflow-x: hidden;
margin: 0;
}

这是#static_nav当我这样做时没有任何反应。我不太确定如何解决这个问题。我已经能够修改其他div了，但我不确定为什么我不能在这种情况下。

div#static_nav{

font-family: Verdana, sans-serif;
padding-top: 10px;
text-align: right;
width: 100%;
height: 5vh;
background-color: #000000;
position:fixed;
opacity: .75;
color:;

}


div#container {

margin-top: 10px
height: 10vh
width: 100%;
background-color: #16BA81;
color:;
}

此外，“text-align：right”将文本推送到右侧边框。如何在边框和文本之间添加一点空间，使其不直接在边框上。我尝试了填充和边距，但它没有移动它。

感谢您的帮助。

Answer 1

要color #static_navbar中的链接，您必须直接设置它们的样式。否则将使用浏览器默认链接颜色：

div#static_nav a {
  color: white;
}

要垂直对齐链接，一种可能是在顶部和底部使用#static_navbar的填充，例如：

padding: 10px 0;

还要确保您的标记有效。您的结束主体需要在关闭的html标记之前直接设置。

body {
  height: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
}
div#static_nav {
  font-family: Verdana, sans-serif;
  padding: 10px 0;
  text-align: right;
  width: 100%;
  background-color: #000000;
  position: fixed;
  opacity: .75;
}
div#static_nav a {
  color: white;
}
div#container {
  margin-top: 10px height: 10vh width: 100%;
  background-color: #16BA81;
}

<!DOCTYPE HTML>
<html lang="en">
<meta charset="utf-8" />

<head>
  <title>Example Page</title>
  <link rel="stylesheet" type="text/css" href="Web_Design_01_Stylesheet.css" />
</head>

<body>

  <div id="container">
    <header>
      <div id="static_nav">
        <nav>
          <a href="Home">Home</a>
          <a href="About Us">About Us</a>
          <a href="Contact Us">Contact US</a>
          <a href="Gallery">Gallery</a>
          <a href="Member Login">Member Log-in</a>
        </nav>
      </div>
    </header>

    <div id="block_two">
      <p></p>
    </div>

    <div id="block_three">
      <p>Block Three</p>
    </div>

    <div id="block_four">
      <p>Block Four</p>
    </div>


    <div id="end_block">
      <footer>
        <p>This is where the footer would go</p>
      </footer>
    </div>
  </div>
</body>

</html>

Answer 2

首先，为什么在关闭主要div和其他元素之前关闭body标签？其次，您必须将导航器放入自己的类中，然后为其添加边距。

＆＃13;

body {
height: 100%;
width: 100%;
max-width: 100%;
overflow-x: hidden;
margin: 0;
}

#static_nav{
font-family: Verdana, sans-serif;
padding-top: 10px;
text-align: right;
width: 100%;
height: 5vh;
background-color: #000000;
position:fixed;
opacity: .75;
}


#container {
margin-top: 10px;
height: 10vh;
width: 100%;
background-color: #16BA81;
color:;
}

.navbar {
  padding-right: 20px;
}

＆＃13;

<html lang="en">
<meta charset="utf-8" />

<head>
  <title>Example Page</title>
  <link rel="stylesheet" type="text/css" href="Web_Design_01_Stylesheet.css" />
</head>

<body>

  <div id="container">
    <header>
      <div id="static_nav">
        <nav class='navbar'>
          <a href="Home">Home</a>
          <a href="About Us">About Us</a>
          <a href="Contact Us">Contact US</a>
          <a href="Gallery">Gallery</a>
          <a href="Member Login">Member Log-in</a>
        </nav>
      </div>
    </header>

    <div id="block_two">
      <p></p>
    </div>

    <div id="block_three">
      <p> Block Three </p>
    </div>

    <div id="block_four">
      <p> Block Four </p>
    </div>


    <div id="end_block">
      <footer>
        <p> This is where the footer would go </p>
      </footer>
    </div>
  </div>

</body>

</html>

＆＃13;

我尝试在static_nav div中使用vertical-align和color但它没有用。这是因为它的标题内部？我该如何解决这个问题？

2 个答案: