HTML5前端畢業項目是每個前端工程師的重要里程碑。這個項目需要展示你掌握的前端技能，包括HTML、CSS、JavaScript等。這篇文章將介紹HTML5前端畢業項目的源代碼，包括HTML、CSS和JavaScript的實現。
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5前端畢業項目</title> </head> <body> <header> <h1>歡迎來到我的頁面</h1> <p>這是一個HTML5前端畢業項目</p> </header> <nav> <ul> <li><a href="#">首頁</a></li> <li><a href="#">關于我們</a></li> <li><a href="#">產品</a></li> <li><a href="#">聯系我們</a></li> </ul> </nav> <section> <h2>產品展示</h2> <ul> <li> <img src="product1.jpg" alt="產品1"> <p>產品1</p> </li> <li> <img src="product2.jpg" alt="產品2"> <p>產品2</p> </li> <li> <img src="product3.jpg" alt="產品3"> <p>產品3</p> </li> </ul> </section> <footer> <p>版權所有 ? 2021 HTML5前端畢業項目</p> </footer> </body> </html>
CSS
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #666;
color: #fff;
padding: 10px;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
display: inline-block;
margin-right: 10px;
}
nav a {
color: #fff;
text-decoration: none;
}
section {
padding: 20px;
}
section h2 {
font-size: 24px;
}
section ul {
margin: 0;
padding: 0;
list-style-type: none;
}
section li {
display: inline-block;
margin-right: 20px;
vertical-align: top;
}
section img {
max-width: 100%;
}
section p {
margin-top: 10px;
}JavaScript
// 點擊導航欄滾動到錨點
var navLinks = document.querySelectorAll('nav a[href^="#"]');
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].addEventListener('click', function(e) {
e.preventDefault();
var targetElem = document.querySelector(this.getAttribute('href'));
targetElem.scrollIntoView({ behavior: 'smooth' });
});
}
// 圖片懶加載
var lazyImages = document.querySelectorAll('img[data-src]');
function lazyLoad() {
for (var i = 0; i < lazyImages.length; i++) {
if (lazyImages[i].getBoundingClientRect().top <=
window.innerHeight &&
lazyImages[i].getBoundingClientRect().bottom >=
0 && window.getComputedStyle(lazyImages[i]).display !== 'none') {
lazyImages[i].src = lazyImages[i].getAttribute('data-src');
lazyImages[i].removeAttribute('data-src');
}
}
if (lazyImages.length === 0) {
document.removeEventListener('scroll', lazyLoad);
window.removeEventListener('resize', lazyLoad);
window.removeEventListener('orientationchange', lazyLoad);
}
}
document.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad);
window.addEventListener('orientationchange', lazyLoad);
lazyLoad();上一篇不加粗css