. 처음 파트 V에서 웹 사이트를 구축 : 둘러 추가.
우리는 무엇을 할 것 인
우리는 것이 장의 내용 :
- 네비게이션 메뉴 추가
네비게이션 메뉴 추가
demoweb 폴더에서 자바 스크립트 파일 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 자습서 .