如何獲取頂部的標題和導航欄？

我正在學習HTML + CSS，我正在學習如何編寫代碼。我只想讓我的頁眉和導航欄在頁面的頂部。我已經研究了幾天，似乎沒有任何工作。如何獲取頂部的標題和導航欄？

這裏是我的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; 
}

所有我想要做的是在瀏覽器的完整頂部的標題，我在它之下導航欄。我已經嘗試了一大堆東西，而我能得到的其他正確格式是當我在CSS中使用它時

* { 
padding:0; 
margin:0; 
}

任何想法？

來源

2015-04-26 SameProblemGuy

要完全誠實的，我不知道爲什麼會出現有一個縫隙。不應該有。但是我確實拿走了你的代碼並編輯了它，並提出了一個便宜的工作方式。

只是做了稍微修改一下，並在雙方你的頭和UL性能你的CSS添加

margin-top:-42px;

。測試它，它的工作原理。

來源

2015-04-26 19:33:45 Chawbee

嘗試將margin: 0;添加到h2。

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

Example in JSFiddle

來源

2015-04-26 19:20:07 ThePavolC

幫我把UL（導航欄）+頭一起。上面還有一些空間。它可能是默認的瀏覽器設置？ – SameProblemGuy

簽入開發者工具，但它可能是默認的瀏覽器設置。 – ThePavolC

嘗試做這樣的事情，而不是head元素：

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

然後在你的樣式表，只需重命名header是.header

像這樣：

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

來源

2015-04-26 19:22:34 nomistic

'是html元素，它在例子 – ThePavolC

中工作得很好，我會的，它是！（我仍然住在HTML 4的土地上））。無論如何，這是值得嘗試的造型嘗試 – nomistic

我想你想要像fiddle example

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

來源

2015-04-26 19:26:15 locateganesh

你的標籤必須有一個id或class。將其更改爲：

<div class="header">

當你的CSS引用它，你就會把：

.header { 
*your code* 
}

來源

2015-04-26 19:43:00 chiphack

如何獲取頂部的標題和導航欄？

回答

相關問題