Der Aufbau einer Website von Grund auf neu Teil V:. Hinzufügen Navigation.
Was wir tun werden
In diesem Kapitel werden wir:
- Fügen Sie ein Navigationsmenü
Fügen Sie ein Navigationsmenü
Im demoweb Ordner, bearbeiten Sie die Datei script.js JavaScript.
Fügen Sie den folgenden, um das Skript:
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>";
Bearbeiten Sie das Stylesheet
Im demoweb Ordner, bearbeiten Sie Ihre Stylesheet site.css
Fügen Sie den folgenden auf den Dateiinhalt:
Neben 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;
}
Bearbeiten Sie die Homepage
Im demoweb Ordner, bearbeiten Sie Ihre Startseite 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>
Versuch es selber "Die Seite oben, ist eine Kopie der Seite aus den vorangegangenen Kapiteln, mit einem zusätzlichen Navigationselement.
Bearbeiten Alle Seiten
Im demoweb Ordner, fügen Sie das Navigationselement zu den anderen Seiten (customers.html und about.html).
Weiterlesen
Lesen Sie mehr über HTML - Listen in unserem HTML - Tutorial .