CSS3學習教程，從入門到精通，學院網站完整項目

學院網站完整項目 - HTML5 + CSS3 實現

下面是一個完整的學院網站項目，包含主頁、新聞列表頁、新聞詳情頁和視頻宣傳頁的實現。我將按照您的要求提供詳細的代碼和注釋。

項目結構

college-website/
├── index.html            # 主頁
├── news-list.html        # 新聞列表頁
├── news-detail.html      # 新聞詳情頁
├── video.html            # 視頻宣傳頁
├── css/
│   ├── style.css         # 主樣式文件
│   ├── responsive.css    # 響應式樣式
├── js/
│   ├── main.js           # 主JavaScript文件
├── images/               # 圖片資源
└── videos/               # 視頻資源

1. 網站規劃

1.1 網站結構

主頁：展示學院概況、最新動態、通知公告等
新聞列表頁：展示所有新聞條目
新聞詳情頁：展示單條新聞的詳細內容
視頻宣傳頁：展示學院宣傳視頻

1.2 功能模塊

導航菜單
輪播圖
新聞板塊
頁腳信息
響應式布局

2. 效果圖設計

2.1 設計原則

簡潔明了，突出學院特色
藍色為主色調，體現學術氛圍
合理的視覺層次結構
良好的用戶體驗

2.2 設計步驟

確定色彩方案
設計布局框架
設計各個頁面模塊
設計交互元素

3. HTML5 實現

3.1 主頁 (index.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>某某學院 - 首頁</title><!-- 引入字體圖標 --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"><!-- 引入主樣式 --><link rel="stylesheet" href="css/style.css"><!-- 引入響應式樣式 --><link rel="stylesheet" href="css/responsive.css">
</head>
<body><!-- 頂部導航欄 --><header class="main-header"><div class="container"><div class="logo"><a href="index.html"><img src="images/logo.png" alt="學院Logo"><h1>某某學院</h1></a></div><nav class="main-nav"><ul><li class="active"><a href="index.html">首頁</a></li><li><a href="news-list.html">新聞中心</a></li><li><a href="video.html">視頻宣傳</a></li><li><a href="#">學院概況</a></li><li><a href="#">教育教學</a></li><li><a href="#">招生就業</a></li><li><a href="#">聯系我們</a></li></ul></nav><div class="mobile-menu-btn"><i class="fas fa-bars"></i></div></div></header><!-- 輪播圖 --><section class="banner"><div class="slider"><div class="slide active"><img src="images/banner1.jpg" alt="校園風光"><div class="slide-content"><h2>歡迎來到某某學院</h2><p>培養高素質人才，服務社會發展</p><a href="#" class="btn">了解更多</a></div></div><div class="slide"><img src="images/banner2.jpg" alt="學術活動"><div class="slide-content"><h2>學術研究</h2><p>探索前沿科技，推動學術進步</p><a href="#" class="btn">了解更多</a></div></div><div class="slide"><img src="images/banner3.jpg" alt="校園生活"><div class="slide-content"><h2>校園生活</h2><p>豐富多彩的校園文化活動</p><a href="#" class="btn">了解更多</a></div></div></div><div class="slider-controls"><span class="prev"><i class="fas fa-chevron-left"></i></span><span class="next"><i class="fas fa-chevron-right"></i></span></div><div class="slider-dots"><span class="dot active"></span><span class="dot"></span><span class="dot"></span></div></section><!-- 主要內容區 --><main class="container"><!-- 通知公告 --><section class="notice-section"><h2 class="section-title"><span>通知公告</span></h2><div class="notice-list"><div class="notice-item"><div class="notice-date"><span class="day">15</span><span class="month">6月</span></div><div class="notice-content"><h3><a href="news-detail.html">關于2023年暑假放假安排的通知</a></h3><p>根據校歷安排，結合學院實際情況，現將2023年暑假放假安排通知如下...</p></div></div><div class="notice-item"><div class="notice-date"><span class="day">10</span><span class="month">6月</span></div><div class="notice-content"><h3><a href="news-detail.html">2023屆畢業生離校工作安排</a></h3><p>為確保2023屆畢業生離校工作順利進行，現將有關事項通知如下...</p></div></div><div class="notice-item"><div class="notice-date"><span class="day">05</span><span class="month">6月</span></div><div class="notice-content"><h3><a href="news-detail.html">關于開展2023年教學成果獎評選工作的通知</a></h3><p>為進一步深化教育教學改革，提高人才培養質量，學院決定開展2023年教學成果獎評選工作...</p></div></div></div><div class="more-link"><a href="news-list.html">更多公告 <i class="fas fa-angle-right"></i></a></div></section><!-- 學院新聞 --><section class="news-section"><h2 class="section-title"><span>學院新聞</span></h2><div class="news-grid"><article class="news-card"><div class="news-image"><img src="images/news1.jpg" alt="新聞圖片"><div class="news-date">2023-06-12</div></div><div class="news-content"><h3><a href="news-detail.html">我院學生在2023年全國大學生程序設計競賽中獲佳績</a></h3><p>在剛剛結束的2023年全國大學生程序設計競賽中，我院代表隊榮獲一等獎1項、二等獎2項...</p><a href="news-detail.html" class="read-more"></a></div></article><article class="news-card"><div class="news-image"><img src="images/news2.jpg" alt="新聞圖片"><div class="news-date">2023-06-08</div></div><div class="news-content"><h3><a href="news-detail.html">學院舉辦2023年青年教師教學競賽</a></h3><p>為加強青年教師隊伍建設，提高青年教師教學水平，6月8日，學院舉辦了2023年青年教師教學競賽...</p><a href="news-detail.html" class="read-more"></a></div></article><article class="news-card"><div class="news-image"><img src="images/news3.jpg" alt="新聞圖片"><div class="news-date">2023-06-05</div></div><div class="news-content"><h3><a href="news-detail.html">知名學者李教授來我院作學術報告</a></h3><p>6月5日下午，知名學者李教授應邀來我院作了題為"人工智能前沿技術與發展趨勢"的學術報告...</p><a href="news-detail.html" class="read-more"></a></div></article></div><div class="more-link"><a href="news-list.html">更多新聞 <i class="fas fa-angle-right"></i></a></div></section><!-- 快速鏈接 --><section class="quick-links"><div class="quick-link-item"><a href="#"><i class="fas fa-user-graduate"></i><span>招生信息</span></a></div><div class="quick-link-item"><a href="#"><i class="fas fa-book"></i><span>教學資源</span></a></div><div class="quick-link-item"><a href="#"><i class="fas fa-flask"></i><span>科研平臺</span></a></div><div class="quick-link-item"><a href="#"><i class="fas fa-briefcase"></i><span>就業服務</span></a></div></section></main><!-- 頁腳 --><footer class="main-footer"><div class="container"><div class="footer-row"><div class="footer-col about-col"><h3>關于學院</h3><p>某某學院成立于2000年，是一所以工為主，理、工、管、文等多學科協調發展的教學研究型學院...</p><div class="social-links"><a href="#"><i class="fab fa-weixin"></i></a><a href="#"><i class="fab fa-weibo"></i></a><a href="#"><i class="fab fa-qq"></i></a></div></div><div class="footer-col links-col"><h3>快速鏈接</h3><ul><li><a href="#">學院首頁</a></li><li><a href="#">機構設置</a></li><li><a href="#">師資隊伍</a></li><li><a href="#">人才培養</a></li><li><a href="#">科學研究</a></li><li><a href="#">國際交流</a></li></ul></div><div class="footer-col contact-col"><h3>聯系我們</h3><ul><li><i class="fas fa-map-marker-alt"></i> 地址：某某省某某市某某區某某路123號</li><li><i class="fas fa-phone"></i> 電話：0123-4567890</li><li><i class="fas fa-envelope"></i> 郵箱：contact@college.edu</li><li><i class="fas fa-clock"></i> 工作時間：周一至周五 8:00-17:30</li></ul></div></div><div class="copyright"><p>&copy; 2023 某某學院 版權所有 | 設計制作：學院網絡中心</p></div></div></footer><!-- JavaScript 文件 --><script src="js/main.js"></script>
</body>
</html>

3.2 新聞列表頁 (news-list.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>某某學院 - 新聞中心</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="css/responsive.css">
</head>
<body><!-- 頂部導航欄 (與主頁相同) --><header class="main-header"><!-- 同主頁的導航欄代碼 --></header><!-- 頁面標題 --><section class="page-header"><div class="container"><h1>新聞中心</h1><nav class="breadcrumb"><a href="index.html">首頁</a><span>新聞中心</span></nav></div></section><!-- 主要內容區 --><main class="container"><div class="news-list-container"><!-- 新聞列表 --><div class="news-list"><article class="news-item"><div class="news-image"><img src="images/news1.jpg" alt="新聞圖片"></div><div class="news-content"><h2><a href="news-detail.html">我院學生在2023年全國大學生程序設計競賽中獲佳績</a></h2><div class="news-meta"><span><i class="far fa-calendar-alt"></i> 2023-06-12</span><span><i class="far fa-eye"></i> 256</span><span><i class="far fa-user"></i> 宣傳部</span></div><p>在剛剛結束的2023年全國大學生程序設計競賽中，我院代表隊榮獲一等獎1項、二等獎2項，這是我院在該項賽事中取得的歷史最好成績...</p><a href="news-detail.html" class="read-more">閱讀全文 <i class="fas fa-angle-right"></i></a></div></article><article class="news-item"><div class="news-image"><img src="images/news2.jpg" alt="新聞圖片"></div><div class="news-content"><h2><a href="news-detail.html">學院舉辦2023年青年教師教學競賽</a></h2><div class="news-meta"><span><i class="far fa-calendar-alt"></i> 2023-06-08</span><span><i class="far fa-eye"></i> 189</span><span><i class="far fa-user"></i> 教務處</span></div><p>為加強青年教師隊伍建設，提高青年教師教學水平，6月8日，學院舉辦了2023年青年教師教學競賽。來自各系的15名青年教師參加了比賽...</p><a href="news-detail.html" class="read-more">閱讀全文 <i class="fas fa-angle-right"></i></a></div></article><article class="news-item"><div class="news-image"><img src="images/news3.jpg" alt="新聞圖片"></div><div class="news-content"><h2><a href="news-detail.html">知名學者李教授來我院作學術報告</a></h2><div class="news-meta"><span><i class="far fa-calendar-alt"></i> 2023-06-05</span><span><i class="far fa-eye"></i> 312</span><span><i class="far fa-user"></i> 科研處</span></div><p>6月5日下午，知名學者李教授應邀來我院作了題為"人工智能前沿技術與發展趨勢"的學術報告。報告會由學院院長主持，全院200余名師生聆聽了報告...</p><a href="news-detail.html" class="read-more">閱讀全文 <i class="fas fa-angle-right"></i></a></div></article><article class="news-item"><div class="news-image"><img src="images/news4.jpg" alt="新聞圖片"></div><div class="news-content"><h2><a href="news-detail.html">我院與某科技公司簽署校企合作協議</a></h2><div class="news-meta"><span><i class="far fa-calendar-alt"></i> 2023-05-28</span><span><i class="far fa-eye"></i> 178</span><span><i class="far fa-user"></i> 就業辦</span></div><p>5月28日上午，我院與某科技公司校企合作協議簽署儀式在學院會議室舉行。根據協議，雙方將在人才培養、科研合作、實習就業等方面開展深度合作...</p><a href="news-detail.html" class="read-more">閱讀全文 <i class="fas fa-angle-right"></i></a></div></article><article class="news-item"><div class="news-image"><img src="images/news5.jpg" alt="新聞圖片"></div><div class="news-content"><h2><a href="news-detail.html">學院召開2023年教學工作會議</a></h2><div class="news-meta"><span><i class="far fa-calendar-alt"></i> 2023-05-20</span><span><i class="far fa-eye"></i> 145</span><span><i class="far fa-user"></i> 教務處</span></div><p>5月20日下午，學院在學術報告廳召開2023年教學工作會議。會議總結了2022年教學工作，部署了2023年教學重點工作，表彰了2022年度教學優秀教師...</p><a href="news-detail.html" class="read-more">閱讀全文 <i class="fas fa-angle-right"></i></a></div></article></div><!-- 分頁導航 --><div class="pagination"><a href="#" class="prev"><i class="fas fa-angle-left"></i> 上一頁</a><a href="#" class="active">1</a><a href="#">2</a><a href="#">3</a><span>...</span><a href="#">5</a><a href="#" class="next">下一頁 <i class="fas fa-angle-right"></i></a></div></div><!-- 側邊欄 --><aside class="sidebar"><div class="sidebar-widget"><h3 class="widget-title">通知公告</h3><ul class="notice-sidebar"><li><a href="news-detail.html">關于2023年暑假放假安排的通知</a><span>2023-06-15</span></li><li><a href="news-detail.html">2023屆畢業生離校工作安排</a><span>2023-06-10</span></li><li><a href="news-detail.html">關于開展2023年教學成果獎評選工作的通知</a><span>2023-06-05</span></li><li><a href="news-detail.html">關于舉辦2023年青年教師講課比賽的通知</a><span>2023-05-28</span></li><li><a href="news-detail.html">關于2023年端午節放假的通知</a><span>2023-05-20</span></li></ul></div><div class="sidebar-widget"><h3 class="widget-title">熱點新聞</h3><ul class="hot-news"><li><a href="news-detail.html">我院學生在2023年全國大學生程序設計競賽中獲佳績</a><span>256</span></li><li><a href="news-detail.html">知名學者李教授來我院作學術報告</a><span>312</span></li><li><a href="news-detail.html">學院舉辦2023年青年教師教學競賽</a><span>189</span></li><li><a href="news-detail.html">我院與某科技公司簽署校企合作協議</a><span>178</span></li></ul></div></aside></main><!-- 頁腳 (與主頁相同) --><footer class="main-footer"><!-- 同主頁的頁腳代碼 --></footer><script src="js/main.js"></script>
</body>
</html>

3.3 新聞詳情頁 (news-detail.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>新聞詳情 - 某某學院</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="css/responsive.css">
</head>
<body><!-- 頂部導航欄 (與主頁相同) --><header class="main-header"><!-- 同主頁的導航欄代碼 --></header><!-- 頁面標題 --><section class="page-header"><div class="container"><h1>新聞詳情</h1><nav class="breadcrumb"><a href="index.html">首頁</a><a href="news-list.html">新聞中心</a><span>新聞詳情</span></nav></div></section><!-- 主要內容區 --><main class="container"><div class="news-detail-container"><!-- 新聞詳情 --><article class="news-detail"><h1 class="news-title">我院學生在2023年全國大學生程序設計競賽中獲佳績</h1><div class="news-meta"><span><i class="far fa-calendar-alt"></i> 發布時間：2023-06-12</span><span><i class="far fa-eye"></i> 閱讀：256</span><span><i class="far fa-user"></i> 來源：宣傳部</span></div><div class="news-content"><p>在剛剛結束的2023年全國大學生程序設計競賽中，我院代表隊榮獲一等獎1項、二等獎2項，這是我院在該項賽事中取得的歷史最好成績。</p><img src="images/news-detail1.jpg" alt="競賽現場"><p>本次比賽于6月10日至11日在某大學舉行，來自全國200多所高校的500余支隊伍參加了比賽。我院派出3支隊伍參賽，由計算機系張老師帶隊。</p><p>經過激烈角逐，由王某某、李某某、張某某組成的"創新之星"隊憑借出色的表現獲得一等獎；由趙某某、劉某某、陳某某組成的"夢想之隊"和由孫某某、周某某、吳某某組成的"未來之光"隊獲得二等獎。</p><blockquote><p>"這次比賽成績的取得，是學院多年來重視學生創新能力培養的結果，也是師生共同努力的成果。"帶隊老師張老師表示。</p></blockquote><p>全國大學生程序設計競賽是由教育部高等學校計算機類專業教學指導委員會主辦的面向全國高校大學生的年度性學科競賽，旨在激發學生學習計算機領域專業知識與技能的興趣，培養其創新能力、團隊合作精神以及在壓力下編寫程序、分析和解決問題的能力。</p><p>近年來，學院高度重視學生創新能力和實踐能力的培養，通過開設創新實驗室、組織各類學科競賽培訓等方式，為學生提供良好的學習和實踐平臺。此次比賽成績的取得，充分展示了我院在人才培養方面的成效。</p><div class="news-tags"><span>標簽：</span><a href="#">學科競賽</a><a href="#">學生榮譽</a><a href="#">計算機系</a></div></div><div class="news-share"><span>分享到：</span><a href="#"><i class="fab fa-weixin"></i></a><a href="#"><i class="fab fa-weibo"></i></a><a href="#"><i class="fab fa-qq"></i></a></div></article><!-- 上一篇下一篇 --><div class="news-navigation"><div class="prev-news"><span>上一篇：</span><a href="news-detail.html">學院舉辦2023年青年教師教學競賽</a></div><div class="next-news"><span>下一篇：</span><a href="news-detail.html">知名學者李教授來我院作學術報告</a></div></div><!-- 相關新聞 --><div class="related-news"><h3>相關新聞</h3><div class="related-list"><div class="related-item"><a href="news-detail.html"><img src="images/news2.jpg" alt="相關新聞"><h4>學院舉辦2023年青年教師教學競賽</h4></a></div><div class="related-item"><a href="news-detail.html"><img src="images/news3.jpg" alt="相關新聞"><h4>知名學者李教授來我院作學術報告</h4></a></div><div class="related-item"><a href="news-detail.html"><img src="images/news4.jpg" alt="相關新聞"><h4>我院與某科技公司簽署校企合作協議</h4></a></div></div></div></div><!-- 側邊欄 (與新聞列表頁相同) --><aside class="sidebar"><!-- 同新聞列表頁的側邊欄代碼 --></aside></main><!-- 頁腳 (與主頁相同) --><footer class="main-footer"><!-- 同主頁的頁腳代碼 --></footer><script src="js/main.js"></script>
</body>
</html>

3.4 視頻宣傳頁 (video.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>視頻宣傳 - 某某學院</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="css/responsive.css">
</head>
<body><!-- 頂部導航欄 (與主頁相同) --><header class="main-header"><!-- 同主頁的導航欄代碼 --></header><!-- 頁面標題 --><section class="page-header"><div class="container"><h1>視頻宣傳</h1><nav class="breadcrumb"><a href="index.html">首頁</a><span>視頻宣傳</span></nav></div></section><!-- 主要內容區 --><main class="container"><div class="video-container"><!-- 主視頻 --><div class="main-video"><h2 class="section-title"><span>學院宣傳片</span></h2><div class="video-wrapper"><video id="college-video" poster="images/video-poster.jpg" controls><source src="videos/college-promo.mp4" type="video/mp4">您的瀏覽器不支持 HTML5 視頻。</video><div class="video-controls"><button class="play-btn"><i class="fas fa-play"></i></button><div class="progress-bar"><div class="progress"></div></div><div class="time"><span class="current-time">00:00</span> / <span class="duration">03:45</span></div><button class="fullscreen-btn"><i class="fas fa-expand"></i></button><button class="volume-btn"><i class="fas fa-volume-up"></i></button></div></div><div class="video-info"><h3>某某學院2023年宣傳片</h3><p>本視頻全面展示了某某學院的辦學歷史、學科特色、師資力量、教學科研成果、校園文化和學生風采等內容...</p><div class="video-meta"><span><i class="far fa-calendar-alt"></i> 發布時間：2023-05-15</span><span><i class="far fa-eye"></i> 播放：1,256</span></div></div></div><!-- 視頻列表 --><div class="video-list-section"><h2 class="section-title"><span>更多視頻</span></h2><div class="video-list"><div class="video-item"><div class="video-thumbnail"><img src="images/video1.jpg" alt="視頻縮略圖"><div class="play-overlay"><i class="fas fa-play"></i></div><span class="duration">05:32</span></div><div class="video-desc"><h3><a href="#">2023年畢業典禮精彩回顧</a></h3><p>記錄了2023屆畢業生畢業典禮的精彩瞬間...</p><div class="video-meta"><span><i class="far fa-eye"></i> 856</span><span><i class="far fa-calendar-alt"></i> 2023-06-20</span></div></div></div><div class="video-item"><div class="video-thumbnail"><img src="images/video2.jpg" alt="視頻縮略圖"><div class="play-overlay"><i class="fas fa-play"></i></div><span class="duration">08:15</span></div><div class="video-desc"><h3><a href="#">學院實驗室設備展示</a></h3><p>展示學院先進的實驗設備和教學環境...</p><div class="video-meta"><span><i class="far fa-eye"></i> 723</span><span><i class="far fa-calendar-alt"></i> 2023-05-10</span></div></div></div><div class="video-item"><div class="video-thumbnail"><img src="images/video3.jpg" alt="視頻縮略圖"><div class="play-overlay"><i class="fas fa-play"></i></div><span class="duration">12:45</span></div><div class="video-desc"><h3><a href="#">校園開放日活動紀實</a></h3><p>記錄2023年校園開放日的各項活動...</p><div class="video-meta"><span><i class="far fa-eye"></i> 1,024</span><span><i class="far fa-calendar-alt"></i> 2023-04-28</span></div></div></div><div class="video-item"><div class="video-thumbnail"><img src="images/video4.jpg" alt="視頻縮略圖"><div class="play-overlay"><i class="fas fa-play"></i></div><span class="duration">06:18</span></div><div class="video-desc"><h3><a href="#">學院運動會精彩瞬間</a></h3><p>2023年春季運動會精彩畫面集錦...</p><div class="video-meta"><span><i class="far fa-eye"></i> 932</span><span><i class="far fa-calendar-alt"></i> 2023-04-15</span></div></div></div></div><div class="more-link"><a href="#">更多視頻 <i class="fas fa-angle-right"></i></a></div></div></div></main><!-- 頁腳 (與主頁相同) --><footer class="main-footer"><!-- 同主頁的頁腳代碼 --></footer><script src="js/main.js"></script>
</body>
</html>

4. CSS3 實現

4.1 主樣式文件 (css/style.css)

/* 基礎樣式重置 */
* {margin: 0;padding: 0;box-sizing: border-box;
}body {font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;line-height: 1.6;color: #333;background-color: #f5f5f5;
}a {text-decoration: none;color: #0066cc;transition: color 0.3s;
}a:hover {color: #004499;
}img {max-width: 100%;height: auto;
}ul {list-style: none;
}.container {width: 1200px;margin: 0 auto;padding: 0 15px;
}.btn {display: inline-block;padding: 8px 20px;background-color: #0066cc;color: white;border-radius: 4px;transition: background-color 0.3s;
}.btn:hover {background-color: #004499;color: white;
}/* 頭部樣式 */
.main-header {background-color: white;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);position: sticky;top: 0;z-index: 1000;
}.main-header .container {display: flex;justify-content: space-between;align-items: center;height: 80px;
}.logo a {display: flex;align-items: center;
}.logo img {height: 50px;margin-right: 10px;
}.logo h1 {font-size: 24px;color: #0066cc;
}.main-nav ul {display: flex;
}.main-nav li {margin-left: 30px;
}.main-nav a {color: #333;font-weight: 500;padding: 5px 0;position: relative;
}.main-nav a:after {content: '';position: absolute;bottom: 0;left: 0;width: 0;height: 2px;background-color: #0066cc;transition: width 0.3s;
}.main-nav a:hover:after,
.main-nav .active a:after {width: 100%;
}.main-nav .active a {color: #0066cc;
}.mobile-menu-btn {display: none;font-size: 24px;cursor: pointer;
}/* 輪播圖樣式 */
.banner {position: relative;height: 500px;overflow: hidden;
}.slider {height: 100%;position: relative;
}.slide {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;transition: opacity 1s ease-in-out;
}.slide.active {opacity: 1;
}.slide img {width: 100%;height: 100%;object-fit: cover;
}.slide-content {position: absolute;top: 50%;left: 15%;transform: translateY(-50%);color: white;max-width: 600px;text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}.slide-content h2 {font-size: 42px;margin-bottom: 20px;
}.slide-content p {font-size: 18px;margin-bottom: 30px;
}.slider-controls {position: absolute;top: 50%;width: 100%;display: flex;justify-content: space-between;transform: translateY(-50%);padding: 0 20px;
}.slider-controls span {color: white;font-size: 30px;cursor: pointer;text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);transition: transform 0.3s;
}.slider-controls span:hover {transform: scale(1.2);
}.slider-dots {position: absolute;bottom: 30px;left: 50%;transform: translateX(-50%);display: flex;
}.slider-dots .dot {width: 12px;height: 12px;border-radius: 50%;background-color: rgba(255, 255, 255, 0.5);margin: 0 5px;cursor: pointer;transition: background-color 0.3s;
}.slider-dots .dot.active {background-color: white;
}/* 主要內容區樣式 */
.section-title {text-align: center;margin: 50px 0 30px;position: relative;
}.section-title span {display: inline-block;padding: 0 20px;background-color: #f5f5f5;position: relative;z-index: 1;font-size: 28px;color: #0066cc;
}.section-title:after {content: '';position: absolute;top: 50%;left: 0;width: 100%;height: 1px;background-color: #ddd;z-index: 0;
}/* 通知公告樣式 */
.notice-section {margin-bottom: 50px;
}.notice-list {background-color: white;border-radius: 5px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);padding: 20px;
}.notice-item {display: flex;padding: 15px 0;border-bottom: 1px dashed #eee;
}.notice-item:last-child {border-bottom: none;
}.notice-date {width: 70px;text-align: center;margin-right: 20px;flex-shrink: 0;
}.notice-date .day {display: block;font-size: 28px;color: #0066cc;line-height: 1;
}.notice-date .month {display: block;font-size: 14px;color: #999;
}.notice-content h3 {margin-bottom: 10px;font-size: 18px;
}.notice-content p {color: #666;font-size: 14px;
}.more-link {text-align: right;margin-top: 20px;
}/* 新聞網格樣式 */
.news-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 30px;margin-bottom: 30px;
}.news-card {background-color: white;border-radius: 5px;overflow: hidden;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);transition: transform 0.3s, box-shadow 0.3s;
}.news-card:hover {transform: translateY(-5px);box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}.news-image {position: relative;height: 200px;overflow: hidden;
}.news-image img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.5s;
}.news-card:hover .news-image img {transform: scale(1.05);
}.news-date {position: absolute;top: 10px;right: 10px;background-color: rgba(0, 102, 204, 0.8);color: white;padding: 5px 10px;border-radius: 3px;font-size: 14px;
}.news-content {padding: 20px;
}.news-content h3 {margin-bottom: 10px;font-size: 18px;line-height: 1.4;
}.news-content p {color: #666;margin-bottom: 15px;font-size: 14px;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;
}.read-more {color: #0066cc;font-size: 14px;display: inline-flex;align-items: center;
}.read-more i {margin-left: 5px;transition: transform 0.3s;
}.read-more:hover i {transform: translateX(3px);
}/* 快速鏈接樣式 */
.quick-links {display: grid;grid-template-columns: repeat(4, 1fr);gap: 20px;margin: 50px 0;
}.quick-link-item a {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 120px;background-color: white;border-radius: 5px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);transition: transform 0.3s, box-shadow 0.3s;
}.quick-link-item a:hover {transform: translateY(-5px);box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);color: #0066cc;
}.quick-link-item i {font-size: 36px;margin-bottom: 10px;color: #0066cc;
}.quick-link-item span {font-size: 16px;font-weight: 500;
}/* 頁腳樣式 */
.main-footer {background-color: #2c3e50;color: #ecf0f1;padding: 50px 0 20px;
}.footer-row {display: grid;grid-template-columns: repeat(3, 1fr);gap: 40px;margin-bottom: 30px;
}.footer-col h3 {font-size: 20px;margin-bottom: 20px;position: relative;padding-bottom: 10px;
}.footer-col h3:after {content: '';position: absolute;bottom: 0;left: 0;width: 50px;height: 2px;background-color: #0066cc;
}.about-col p {margin-bottom: 20px;font-size: 14px;color: #bdc3c7;
}.social-links a {display: inline-block;width: 40px;height: 40px;background-color: rgba(255, 255, 255, 0.1);color: white;border-radius: 50%;text-align: center;line-height: 40px;margin-right: 10px;transition: background-color 0.3s;
}.social-links a:hover {background-color: #0066cc;
}.links-col ul li {margin-bottom: 10px;
}.links-col a {color: #bdc3c7;font-size: 14px;transition: color 0.3s, padding-left 0.3s;
}.links-col a:hover {color: white;padding-left: 5px;
}.contact-col ul li {margin-bottom: 15px;font-size: 14px;color: #bdc3c7;display: flex;align-items: center;
}.contact-col i {margin-right: 10px;color: #0066cc;width: 20px;text-align: center;
}.copyright {text-align: center;padding-top: 20px;border-top: 1px solid rgba(255, 255, 255, 0.1);font-size: 14px;color: #bdc3c7;
}/* 頁面標題樣式 */
.page-header {background-color: #0066cc;color: white;padding: 60px 0;text-align: center;
}.page-header h1 {font-size: 36px;margin-bottom: 15px;
}.breadcrumb {display: flex;justify-content: center;font-size: 14px;
}.breadcrumb a {color: rgba(255, 255, 255, 0.8);margin: 0 5px;
}.breadcrumb a:hover {color: white;
}.breadcrumb span {color: white;margin-left: 5px;
}/* 新聞列表頁樣式 */
.news-list-container {display: grid;grid-template-columns: 1fr 300px;gap: 30px;
}.news-list {margin-bottom: 40px;
}.news-item {display: flex;margin-bottom: 30px;background-color: white;border-radius: 5px;overflow: hidden;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}.news-image {width: 250px;flex-shrink: 0;
}.news-image img {width: 100%;height: 100%;object-fit: cover;
}.news-content {padding: 20px;flex-grow: 1;
}.news-content h2 {font-size: 20px;margin-bottom: 10px;
}.news-meta {display: flex;margin-bottom: 15px;font-size: 13px;color: #999;
}.news-meta span {margin-right: 15px;
}.news-meta i {margin-right: 5px;
}.news-content p {margin-bottom: 15px;color: #666;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;
}.read-more {color: #0066cc;font-size: 14px;display: inline-flex;align-items: center;
}.read-more i {margin-left: 5px;transition: transform 0.3s;
}.read-more:hover i {transform: translateX(3px);
}/* 分頁樣式 */
.pagination {display: flex;justify-content: center;align-items: center;margin-top: 40px;
}.pagination a, .pagination span {display: inline-block;padding: 8px 15px;margin: 0 5px;border: 1px solid #ddd;color: #666;border-radius: 3px;transition: all 0.3s;
}.pagination a:hover {background-color: #f5f5f5;color: #0066cc;
}.pagination .active {background-color: #0066cc;color: white;border-color: #0066cc;
}.pagination .prev, .pagination .next {padding: 8px 12px;
}.pagination i {font-size: 12px;
}/* 側邊欄樣式 */
.sidebar-widget {background-color: white;border-radius: 5px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);padding: 20px;margin-bottom: 30px;
}.widget-title {font-size: 18px;margin-bottom: 20px;padding-bottom: 10px;border-bottom: 1px solid #eee;color: #0066cc;
}.notice-sidebar li {padding: 10px 0;border-bottom: 1px dashed #eee;
}.notice-sidebar li:last-child {border-bottom: none;
}.notice-sidebar a {display: block;color: #333;margin-bottom: 5px;font-size: 14px;transition: color 0.3s;
}.notice-sidebar a:hover {color: #0066cc;
}.notice-sidebar span {display: block;font-size: 12px;color: #999;
}.hot-news li {padding: 10px 0;border-bottom: 1px dashed #eee;
}.hot-news li:last-child {border-bottom: none;
}.hot-news a {display: block;color: #333;margin-bottom: 5px;font-size: 14px;transition: color 0.3s;
}.hot-news a:hover {color: #0066cc;
}.hot-news span {display: block;font-size: 12px;color: #999;
}/* 新聞詳情頁樣式 */
.news-detail-container {display: grid;grid-template-columns: 1fr 300px;gap: 30px;
}.news-detail {background-color: white;border-radius: 5px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);padding: 30px;
}.news-title {font-size: 28px;margin-bottom: 20px;color: #333;line-height: 1.4;
}.news-meta {display: flex;margin-bottom: 30px;padding-bottom: 20px;border-bottom: 1px solid #eee;font-size: 14px;color: #999;
}.news-meta span {margin-right: 20px;
}.news-meta i {margin-right: 5px;
}.news-content {font-size: 16px;line-height: 1.8;color: #444;
}.news-content p {margin-bottom: 20px;text-align: justify;
}.news-content img {max-width: 100%;height: auto;display: block;margin: 20px auto;border-radius: 5px;
}blockquote {border-left: 4px solid #0066cc;padding: 15px 20px;background-color: #f9f9f9;margin: 20px 0;font-style: italic;color: #555;
}.news-tags {margin: 30px 0;padding-top: 20px;border-top: 1px solid #eee;
}.news-tags span {margin-right: 10px;color: #666;
}.news-tags a {display: inline-block;padding: 3px 10px;background-color: #f5f5f5;color: #666;border-radius: 3px;font-size: 14px;margin-right: 8px;transition: all 0.3s;
}.news-tags a:hover {background-color: #0066cc;color: white;
}.news-share {margin: 30px 0;padding: 20px 0;border-top: 1px solid #eee;border-bottom: 1px solid #eee;
}.news-share span {margin-right: 15px;color: #666;
}.news-share a {display: inline-block;width: 36px;height: 36px;line-height: 36px;text-align: center;background-color: #f5f5f5;color: #666;border-radius: 50%;margin-right: 10px;transition: all 0.3s;
}.news-share a:hover {color: white;
}.news-share a:nth-child(2):hover {background-color: #09bb07; /* 微信綠色 */
}.news-share a:nth-child(3):hover {background-color: #e6162d; /* 微博紅色 */
}.news-share a:nth-child(4):hover {background-color: #12b7f5; /* QQ藍色 */
}.news-navigation {display: flex;justify-content: space-between;margin: 30px 0;padding: 20px;background-color: #f9f9f9;border-radius: 5px;
}.prev-news, .next-news {max-width: 45%;
}.prev-news span, .next-news span {display: block;color: #999;font-size: 14px;margin-bottom: 5px;
}.prev-news a, .next-news a {color: #333;font-size: 16px;transition: color 0.3s;
}.prev-news a:hover, .next-news a:hover {color: #0066cc;
}.related-news {margin: 50px 0 30px;
}.related-news h3 {font-size: 22px;margin-bottom: 20px;padding-bottom: 10px;border-bottom: 1px solid #eee;color: #0066cc;
}.related-list {display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px;
}.related-item {background-color: white;border-radius: 5px;overflow: hidden;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);transition: transform 0.3s, box-shadow 0.3s;
}.related-item:hover {transform: translateY(-5px);box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}.related-item img {width: 100%;height: 150px;object-fit: cover;
}.related-item h4 {padding: 15px;font-size: 16px;line-height: 1.4;
}/* 視頻宣傳頁樣式 */
.video-container {display: grid;grid-template-columns: 1fr 300px;gap: 30px;
}.main-video {margin-bottom: 50px;
}.video-wrapper {position: relative;margin-bottom: 20px;border-radius: 5px;overflow: hidden;
}.video-wrapper video {width: 100%;display: block;
}.video-controls {position: absolute;bottom: 0;left: 0;width: 100%;background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);padding: 10px;display: flex;align-items: center;
}.play-btn {background: none;border: none;color: white;font-size: 20px;margin-right: 15px;cursor: pointer;
}.progress-bar {flex-grow: 1;height: 5px;background-color: rgba(255, 255, 255, 0.3);border-radius: 3px;margin-right: 15px;cursor: pointer;
}.progress {height: 100%;width: 0;background-color: #0066cc;border-radius: 3px;
}.time {color: white;font-size: 14px;margin-right: 15px;
}.fullscreen-btn, .volume-btn {background: none;border: none;color: white;font-size: 16px;margin-left: 10px;cursor: pointer;
}.video-info h3 {font-size: 22px;margin-bottom: 15px;
}.video-info p {margin-bottom: 15px;color: #666;
}.video-meta {display: flex;color: #999;font-size: 14px;
}.video-meta span {margin-right: 20px;
}.video-meta i {margin-right: 5px;
}.video-list-section {margin-bottom: 50px;
}.video-list {display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;
}.video-item {background-color: white;border-radius: 5px;overflow: hidden;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);transition: transform 0.3s, box-shadow 0.3s;
}.video-item:hover {transform: translateY(-5px);box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}.video-thumbnail {position: relative;height: 150px;overflow: hidden;
}.video-thumbnail img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.5s;
}.video-item:hover .video-thumbnail img {transform: scale(1.05);
}.play-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background-color: rgba(0, 102, 204, 0.3);opacity: 0;transition: opacity 0.3s;
}.video-item:hover .play-overlay {opacity: 1;
}.play-overlay i {color: white;font-size: 40px;text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}.duration {position: absolute;bottom: 10px;right: 10px;background-color: rgba(0, 0, 0, 0.7);color: white;padding: 3px 8px;border-radius: 3px;font-size: 12px;
}.video-desc {padding: 15px;
}.video-desc h3 {font-size: 16px;margin-bottom: 10px;line-height: 1.4;
}.video-desc p {color: #666;font-size: 14px;margin-bottom: 10px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;
}.video-meta {display: flex;justify-content: space-between;color: #999;font-size: 12px;
}.video-meta span {display: flex;align-items: center;
}.video-meta i {margin-right: 5px;font-size: 12px;
}

4.2 響應式樣式 (css/responsive.css)

/* 響應式設計 - 適配不同屏幕尺寸 *//* 中等屏幕 (992px - 1199px) */
@media (max-width: 1199px) {.container {width: 970px;}.news-grid {grid-template-columns: repeat(2, 1fr);}.quick-links {grid-template-columns: repeat(2, 1fr);}
}/* 小屏幕 (768px - 991px) */
@media (max-width: 991px) {.container {width: 750px;}.main-header .container {height: 60px;}.logo img {height: 40px;}.logo h1 {font-size: 20px;}.main-nav {position: fixed;top: 60px;left: 0;width: 100%;background-color: white;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);max-height: 0;overflow: hidden;transition: max-height 0.3s;}.main-nav.active {max-height: 500px;}.main-nav ul {flex-direction: column;padding: 20px;}.main-nav li {margin: 0;border-bottom: 1px solid #eee;}.main-nav a {display: block;padding: 12px 0;}.mobile-menu-btn {display: block;}.banner {height: 400px;}.slide-content h2 {font-size: 32px;}.news-list-container, .news-detail-container,.video-container {grid-template-columns: 1fr;}.sidebar {margin-top: 50px;}.footer-row {grid-template-columns: repeat(2, 1fr);}.news-item {flex-direction: column;}.news-image {width: 100%;height: 200px;}.related-list {grid-template-columns: repeat(2, 1fr);}.video-list {grid-template-columns: 1fr;}
}/* 超小屏幕 (小于768px) */
@media (max-width: 767px) {.container {width: 100%;padding: 0 10px;}.banner {height: 300px;}.slide-content {left: 10%;}.slide-content h2 {font-size: 24px;margin-bottom: 10px;}.slide-content p {font-size: 16px;margin-bottom: 15px;}.section-title span {font-size: 24px;}.news-grid {grid-template-columns: 1fr;}.quick-links {grid-template-columns: 1fr;}.footer-row {grid-template-columns: 1fr;}.related-list {grid-template-columns: 1fr;}.page-header h1 {font-size: 28px;}.news-title {font-size: 24px;}.news-meta {flex-direction: column;}.news-meta span {margin-bottom: 5px;}.news-navigation {flex-direction: column;}.prev-news, .next-news {max-width: 100%;margin-bottom: 15px;}
}/* 超小屏幕 (小于480px) */
@media (max-width: 479px) {.banner {height: 250px;}.slide-content h2 {font-size: 20px;}.slide-content p {font-size: 14px;}.section-title span {font-size: 20px;}.notice-item {flex-direction: column;}.notice-date {margin-right: 0;margin-bottom: 10px;display: flex;align-items: center;}.notice-date .day {font-size: 24px;margin-right: 10px;}.notice-date .month {display: inline;}
}

4.3 JavaScript 文件 (js/main.js)

/*** 學院網站主JavaScript文件* 包含網站交互功能實現*/// 文檔加載完成后執行
document.addEventListener('DOMContentLoaded', function() {// 移動端菜單切換const mobileMenuBtn = document.querySelector('.mobile-menu-btn');const mainNav = document.querySelector('.main-nav');if (mobileMenuBtn && mainNav) {mobileMenuBtn.addEventListener('click', function() {mainNav.classList.toggle('active');});}// 輪播圖功能const slider = document.querySelector('.slider');if (slider) {const slides = document.querySelectorAll('.slide');const dots = document.querySelectorAll('.dot');const prevBtn = document.querySelector('.prev');const nextBtn = document.querySelector('.next');let currentSlide = 0;const slideCount = slides.length;// 顯示指定幻燈片function showSlide(index) {// 確保索引在有效范圍內if (index >= slideCount) {currentSlide = 0;} else if (index < 0) {currentSlide = slideCount - 1;} else {currentSlide = index;}// 更新幻燈片顯示slides.forEach((slide, i) => {slide.classList.toggle('active', i === currentSlide);});// 更新指示點dots.forEach((dot, i) => {dot.classList.toggle('active', i === currentSlide);});}// 下一張幻燈片function nextSlide() {showSlide(currentSlide + 1);}// 上一張幻燈片function prevSlide() {showSlide(currentSlide - 1);}// 自動輪播let slideInterval = setInterval(nextSlide, 5000);// 鼠標懸停時暫停輪播slider.addEventListener('mouseenter', () => {clearInterval(slideInterval);});// 鼠標離開時恢復輪播slider.addEventListener('mouseleave', () => {slideInterval = setInterval(nextSlide, 5000);});// 添加按鈕事件if (nextBtn) {nextBtn.addEventListener('click', nextSlide);}if (prevBtn) {prevBtn.addEventListener('click', prevSlide);}// 添加指示點事件dots.forEach((dot, index) => {dot.addEventListener('click', () => {showSlide(index);});});}// 視頻播放器控制const videoPlayer = document.getElementById('college-video');if (videoPlayer) {const playBtn = document.querySelector('.play-btn');const progressBar = document.querySelector('.progress-bar');const progress = document.querySelector('.progress');const timeDisplay = document.querySelector('.time');const fullscreenBtn = document.querySelector('.fullscreen-btn');const volumeBtn = document.querySelector('.volume-btn');// 播放/暫停切換function togglePlay() {if (videoPlayer.paused) {videoPlayer.play();playBtn.innerHTML = '<i class="fas fa-pause"></i>';} else {videoPlayer.pause();playBtn.innerHTML = '<i class="fas fa-play"></i>';}}// 更新進度條function updateProgress() {const percent = (videoPlayer.currentTime / videoPlayer.duration) * 100;progress.style.width = `${percent}%`;// 更新時間顯示const currentMinutes = Math.floor(videoPlayer.currentTime / 60);const currentSeconds = Math.floor(videoPlayer.currentTime % 60);const durationMinutes = Math.floor(videoPlayer.duration / 60);const durationSeconds = Math.floor(videoPlayer.duration % 60);timeDisplay.innerHTML = `<span class="current-time">${currentMinutes}:${currentSeconds < 10 ? '0' : ''}${currentSeconds}</span> / <span class="duration">${durationMinutes}:${durationSeconds < 10 ? '0' : ''}${durationSeconds}</span>`;}// 設置進度function setProgress(e) {const newTime = (e.offsetX / progressBar.offsetWidth) * videoPlayer.duration;videoPlayer.currentTime = newTime;}// 全屏切換function toggleFullscreen() {if (!document.fullscreenElement) {videoPlayer.requestFullscreen().catch(err => {console.error(`全屏錯誤: ${err.message}`);});} else {document.exitFullscreen();}}// 音量切換function toggleVolume() {if (videoPlayer.muted) {videoPlayer.muted = false;volumeBtn.innerHTML = '<i class="fas fa-volume-up"></i>';} else {videoPlayer.muted = true;volumeBtn.innerHTML = '<i class="fas fa-volume-mute"></i>';}}// 添加事件監聽videoPlayer.addEventListener('click', togglePlay);playBtn.addEventListener('click', togglePlay);videoPlayer.addEventListener('timeupdate', updateProgress);progressBar.addEventListener('click', setProgress);fullscreenBtn.addEventListener('click', toggleFullscreen);volumeBtn.addEventListener('click', toggleVolume);// 初始化時間顯示videoPlayer.addEventListener('loadedmetadata', updateProgress);}// 視頻列表項點擊事件const videoItems = document.querySelectorAll('.video-item');videoItems.forEach(item => {item.addEventListener('click', function(e) {// 防止點擊鏈接時觸發if (e.target.tagName === 'A' || e.target.tagName === 'I') {return;}const link = this.querySelector('a');if (link) {window.location.href = link.href;}});});
});

5. 項目總結

這個學院網站項目使用了以下HTML5和CSS3的主要技術：

HTML5 知識點：

語義化標簽：<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>
視頻嵌入：<video> 標簽
響應式設計：<meta name="viewport">
表單增強：新的輸入類型和屬性
本地存儲：localStorage/sessionStorage
Canvas/SVG 圖形