最新的Web開發教程
 

網站建設 - 添加導航


。從頭第五部分建立了一個網站:添加導航。


我們將要做什麼

在本章中,我們將:

  • 添加導航菜單

添加導航菜單

demoweb文件夾,編輯JavaScript文件的script.js。

添加下面的腳本:

document.getElementById("nav01").innerHTML =
"<ul id='menu'>" +
"<li><a href='index.html'>Home</a></li>" +
"<li><a href='customers.html'>Data</a></li>" +
"<li><a href='about.html'>About</a></li>" +
"</ul>";

編輯樣式表

demoweb文件夾中,編輯您的樣式表的site.css

以下內容添加到文件內容:

除了的site.css

ul#menu {
    padding: 0;
    margin-bottom: 11px;
}

ul#menu li {
    display: inline;
    margin-right: 3px;
}

ul#menu li a {
    background-color: #ffffff;
    padding: 10px 20px;
    text-decoration: none;
    color: #696969;
    border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
    color: white;
    background-color: black;
}

編輯主頁

demoweb文件夾中,編輯您的主頁的index.html。

的index.html

<!DOCTYPE html>

<html>
<head>
<title>Our Company</title>
<link href="site.css" rel="stylesheet">
</head>
<body>

<nav id="nav01"></nav>

<div id="main">
  <h1>Welcome to Our Company</h1>
  <h2>Web Site Main Ingredients:</h2>

  <p>Pages (HTML)</p>
  <p>Style Sheets (CSS)</p>
  <p>Computer Code (JavaScript)</p>
  <p>Live Data (Files and Databases)</p>

  <footer id="foot01"></footer>
</div>

<script src="script.js"></script>

</body>
</html>
試一試»

上面的頁面,是從前面的章節頁面的副本,其中一個額外的導航元素。


編輯所有頁面

demoweb文件夾,導航元素添加到其他頁面(customers.html客戶about.html)。


閱讀更多

了解更多關於我們的HTML列表HTML教程