Question

我正在尝试为我的网站复制标题/导航（来自www.mineplex.com），但我需要一些帮助。我正在尝试，但它不起作用。非常感谢你们的帮助。这是我到目前为止的代码。

body {
  font-family: Helvetica;
  margin: auto;
  width: 100%;
}

#header {
  background: #383838;
  position: fixed;
  top: 0;
  width: 100%;
}

#container {
  margin: 0 auto;
}

#logo {
  color: white;
  font-size: 15;
  text-align: center;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Website</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
  </head>
	
  <body>
    <!-- IGNORE THIS! THIS IS FOR LiveReload -->
    <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
    <!-- IGNORE THIS! THIS IS FOR LiveReload -->
		
    <div id="header">
      <div id="container">
        <div id="logo">
          <h1>WEBSITE</h1>
        </div>
      </div>
    </div>
  </body>
</html>

Answer 1

以下是如何在标题中添加较暗的条形图。 DEMO

HTML：

<div id="header">
<div id="container">
    <div id="logo">
            <h1>WEBSITE</h1>

    </div>
</div>
<div class="header-bottom"></div>
</div>

CSS：

body {
font-family: Helvetica;
margin: auto;
width: 100%;
}
#header {
background: #383838;
position: fixed;
top: 0;
width: 100%;
}
#container {
margin: 0 auto;
}
#logo {
color: white;
font-size: 15;
text-align: center;
}
.header-bottom {
width:100%;
height:25px;
background:#1E2224;
box-shadow: 0px 5px 5px #888888;
}

调整高度和居中

1 个答案: