如何让 header 和导航栏在顶部？

Question

我正在学习 HTML + CSS，我正在学习如何编码。我只想让我的 header 和导航栏位于页面顶部。我已经研究了几天，似乎没有任何效果。

这是我的 HTML 代码

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="aboutmecss.css" rel="stylesheet" type="text/css">
</head>




<body>
<header>
<h2>My website</h2>
    <ul>
        <li class="activemenutab"> <a href="aboutme.html">About Me </a></li>
        <li> <a href="accomplishments.html">Accomplishments </a></li>
        <li> <a href="certs.html">Certifications and Skills </a></li>
        <li> <a href="extra.html">Extracirriculars </a></li>
        <li> <a href="portfolio.html">Portfolio </a></li>
        <li> <a href="contact.html">Contact </a></li>
    </ul>
</header>



    <footer>
          &copy; 2015
    </footer>


</body>
</html>

这是我的 CSS:

@charset "UTF-8";



html {
    background-color:#B5B5B5
}

header {
    position:absolute;
    left:0;
    right:0;
    top:0; 
    margin:0;
}

h2 {
    background-color:#000000;
    color:#d9d9d9;
    text-align:center;
    font-size: 2.8em;
}

ul {
    list-style-type:none; /* takes symbols away from unordered list */
    margin:0; /* shifts ul up against h2, and shifts it up in the header box */
    background-color:#d9d9d9;
    font-family:Baskerville, serif;
    text-transform:uppercase;
    position:absolute; /*drags bar over for the left and right commands below */
    left:0;
    right:0;
    text-align:center; /* centers nav bar */
    font-size:0; /* this takes away the default white spaces at the end of the <li>...have to resize font in li */
}

li {
    display:inline-block; /* makes nav go horizontal */
    font-size:14px; /* size of navbar text ... !important has to be in px because ul has font size = 0*/

}

li:hover {
    background:#000000; /* changes tab to black */
    color:#E09635; /* changes text to color */
    transition-duration: 0.3s; /* response time on navbar icon hover */
    transition-timing-function: ease;
    transition-delay: 0; /* zero delay to have transtion occur */
}

a {
    text-decoration:none; /*removes underline from a links */
    color:inherit; /* takes color from parent, in this case, li */
    display:block; /* makes the a box relatable to li */
    padding: 10px;  /* creates padding around a box for navbar and adds to clickable region because of anchor */
}

.activemenutab { /* this is the class used to make the one you are on highlighted ... needs to be swithched in html */
    background-color:#EDEDED;
    color:#E09635;
}

/* ---------- body below */

/* ---------- footer below */

footer {
    text-align:center;
    background-color:#000000;
    color:#EDEDED;
    left:0;
    right:0;
    bottom:0;
    position:absolute;
    padding:.2em;
}

我只想让 Header 位于浏览器的完整顶部，而我的导航栏位于其下方。我已经尝试了一大堆东西，我能得到的另一种正确格式是当我在 CSS

中使用它时

* {
padding:0;
margin:0;
}

有什么想法吗？

Answer 1

尝试将 margin: 0; 添加到 h2。

h2 {
    background-color:#000000;
    color:#d9d9d9;
    text-align:center;
    font-size: 2.8em;
    margin: 0;
}

Example in JSFiddle

Answer 2

尝试做这样的事情而不是 head 元素：

<div class="header"> ... </div>

然后按照您的风格 sheet，只需将 header 重命名为 .header

像这样：

.header {
    position:absolute;
    left:0;
    right:0;
    top:0; 
    margin:0;
}

Answer 3

我想你想要 fiddle example

.header {
position:relative;
width:100%;
}

Answer 4

老实说，我不知道为什么会有差距。不应该有。但我确实采用了你的代码并对其进行了编辑，并提出了一个有效的 cheaphax。

只是做了一点修改并添加了

margin-top:-42px;

在您的 css 中，在您的 header 和 ul 属性中。测试了它并且它有效。

Answer 5

您的标签必须有一个 ID 或 class。将其更改为：

<div class="header">

在您的 css 中引用它时，您会输入：

.header {
*your code*
}

如何让 header 和导航栏在顶部？

How to get the header and navbar on top?

html

css

navbar