課程信息展示頁面設計與實現
我將設計一個美觀且實用的課程信息展示頁面，重點展示計算機網絡應用課程的相關信息。
設計思路
使用卡片式布局清晰展示課程各模塊信息
采用科技感配色方案，符合計算機網絡課程主題
添加動畫效果增強用戶體驗
響應式設計確保在各種設備上的良好顯示
下面是完整的實現代碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>計算機網絡應用課程信息</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;}body {background: linear-gradient(135deg, #1a2a6c, #2c3e50, #1a2a6c);color: #fff;min-height: 100vh;padding: 20px;line-height: 1.6;}.container {max-width: 1200px;margin: 0 auto;padding: 20px;}header {text-align: center;padding: 30px 0;margin-bottom: 30px;animation: fadeInDown 1s ease-out;}.header-content {background: rgba(255, 255, 255, 0.08);backdrop-filter: blur(10px);border-radius: 15px;padding: 25px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);border: 1px solid rgba(255, 255, 255, 0.1);position: relative;overflow: hidden;}.header-content::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 5px;background: linear-gradient(90deg, #3498db, #2ecc71, #3498db);}h1 {font-size: 2.8rem;font-weight: 700;margin-bottom: 15px;background: linear-gradient(90deg, #3498db, #2ecc71);-webkit-background-clip: text;-webkit-text-fill-color: transparent;position: relative;}.course-info {display: flex;flex-wrap: wrap;justify-content: center;gap: 25px;margin: 20px 0;}.info-item {background: rgba(255, 255, 255, 0.1);border-radius: 10px;padding: 15px 20px;min-width: 200px;text-align: center;}.info-label {font-size: 0.9rem;opacity: 0.8;margin-bottom: 5px;}.info-value {font-size: 1.3rem;font-weight: 600;color: #2ecc71;}.card-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));gap: 30px;margin-bottom: 40px;}.card {background: rgba(255, 255, 255, 0.08);backdrop-filter: blur(12px);border-radius: 15px;padding: 30px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);transition: all 0.4s ease;border: 1px solid rgba(255, 255, 255, 0.1);opacity: 0;transform: translateY(30px);}.card.visible {opacity: 1;transform: translateY(0);}.card:hover {transform: translateY(-10px);box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);background: rgba(255, 255, 255, 0.12);}.card h2 {font-size: 1.8rem;margin-bottom: 25px;color: #3498db;display: flex;align-items: center;padding-bottom: 15px;border-bottom: 2px solid rgba(52, 152, 219, 0.3);}.card h2 i {margin-right: 12px;font-size: 1.5rem;}.card-content {font-size: 1.1rem;margin-bottom: 20px;font-weight: 300;line-height: 1.8;}.target-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 25px;margin-top: 30px;}.target-card {background: rgba(255, 255, 255, 0.08);border-radius: 12px;padding: 25px;position: relative;overflow: hidden;transition: all 0.3s ease;}.target-card:hover {transform: translateY(-5px);background: rgba(255, 255, 255, 0.12);}.target-card h3 {font-size: 1.4rem;margin-bottom: 15px;color: #2ecc71;display: flex;align-items: center;}.target-card h3 i {margin-right: 10px;}.target-card ul {padding-left: 25px;}.target-card li {margin-bottom: 10px;position: relative;}.target-card li::before {content: '?';color: #3498db;font-weight: bold;position: absolute;left: -20px;}.assessment {background: rgba(255, 255, 255, 0.08);backdrop-filter: blur(12px);border-radius: 15px;padding: 30px;margin-top: 40px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);border: 1px solid rgba(255, 255, 255, 0.1);position: relative;overflow: hidden;}.assessment::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 5px;background: linear-gradient(90deg, #e74c3c, #f39c12, #e74c3c);}.assessment h2 {font-size: 1.8rem;margin-bottom: 25px;color: #f39c12;display: flex;align-items: center;}.assessment h2 i {margin-right: 12px;}.assessment-content {font-size: 1.1rem;line-height: 1.8;padding: 0 10px;}footer {text-align: center;padding: 40px 0 20px;margin-top: 50px;border-top: 1px solid rgba(255, 255, 255, 0.1);font-weight: 300;opacity: 0.8;}@keyframes fadeIn {from { opacity: 0; }to { opacity: 1; }}@keyframes fadeInDown {from {opacity: 0;transform: translateY(-30px);}to {opacity: 1;transform: translateY(0);}}@media (max-width: 768px) {h1 { font-size: 2.2rem; }.course-info {flex-direction: column;align-items: center;}.info-item {width: 100%;}.card {padding: 25px;}}</style>
</head>
<body><div id="app"><div class="container"><header><div class="header-content"><h1>計算機網絡應用課程信息</h1><div class="course-info"><div class="info-item"><div class="info-label">班級</div><div class="info-value">應電五貫21-1班</div></div><div class="info-item"><div class="info-label">課程周數</div><div class="info-value">1-8周</div></div><div class="info-item"><div class="info-label">學期學時</div><div class="info-value">32.0</div></div><div class="info-item"><div class="info-label">周學時</div><div class="info-value">4.0/周</div></div></div><div class="info-item" style="width:100%;margin-top:15px;"><div class="info-label">學期</div><div class="info-value">2025-2026(1)</div></div></div></header><div class="card-grid"><div class="card" :class="{visible: card1Visible}" ref="card1"><h2><i class="fas fa-book"></i> 必備知識與技能</h2><div class="card-content"><p>學習本課程需要具備以下基礎知識和技能：</p><ul><li>計算機基礎操作能力</li><li>基本的數學邏輯思維</li><li>操作系統基礎概念</li><li>互聯網基本應用能力</li><li>問題分析與解決能力</li></ul></div></div><div class="card" :class="{visible: card2Visible}" ref="card2"><h2><i class="fas fa-graduation-cap"></i> 為后續課程提供</h2><div class="card-content"><h3>知識體系：</h3><p>本課程的學習為后續課程提供計算機技術的基本知識體系，掌握計算機網絡基礎，讓學生更好理解計算機技術的相關課程。</p><h3 style="margin-top:25px;">技能培養：</h3><ul><li>網絡配置與管理能力</li><li>網絡故障診斷技能</li><li>網絡安全基礎防護</li><li>網絡協議分析能力</li><li>網絡應用開發基礎</li></ul></div></div><div class="card" :class="{visible: card3Visible}" ref="card3"><h2><i class="fas fa-file-alt"></i> 課程標準</h2><div class="card-content"><p>本課程采用最新版《計算機網絡應用》課程標準，結合行業最新發展動態，注重理論與實踐相結合。</p><ul><li>版本：2025修訂版</li><li>主編：教育部計算機專業教指委</li><li>出版社：高等教育出版社</li><li>ISBN：978-7-04-058888-8</li></ul></div></div></div><div class="target-grid"><div class="target-card" :class="{visible: target1Visible}" ref="target1"><h3><i class="fas fa-brain"></i> 知識目標</h3><ul><li>掌握計算機網絡的基本概念和體系結構</li><li>理解TCP/IP協議棧及各層功能</li><li>熟悉常見網絡設備的工作原理</li><li>了解網絡安全的基本原理和技術</li><li>掌握網絡服務配置與管理方法</li><li>了解云計算和物聯網網絡基礎</li></ul></div><div class="target-card" :class="{visible: target2Visible}" ref="target2"><h3><i class="fas fa-laptop-code"></i> 能力目標</h3><ul><li>能夠配置和管理中小型企業網絡</li><li>能夠診斷和解決常見網絡故障</li><li>能夠使用網絡監控和分析工具</li><li>能夠配置基本網絡安全防護措施</li><li>能夠部署常見網絡服務與應用</li><li>具備網絡方案設計初步能力</li></ul></div><div class="target-card" :class="{visible: target3Visible}" ref="target3"><h3><i class="fas fa-users"></i> 素質目標</h3><ul><li>培養網絡安全意識和責任感</li><li>提升團隊協作與溝通能力</li><li>養成嚴謹細致的工程素養</li><li>增強創新思維和問題解決能力</li><li>培養職業道德和行業規范意識</li><li>樹立科技報國的理想信念</li></ul></div></div><div class="assessment" :class="{visible: assessmentVisible}" ref="assessment"><h2><i class="fas fa-clipboard-check"></i> 課程考核辦法</h2><div class="assessment-content"><p>本課程采用多元化考核方式，全面評價學生學習成效：</p><ul><li><strong>平時成績 (30%)</strong>：出勤、課堂參與、平時作業</li><li><strong>實驗實踐 (30%)</strong>：網絡配置實驗、故障排查任務、項目實踐</li><li><strong>期末考試 (40%)</strong>：理論知識考核與應用能力測試</li></ul><p style="margin-top:20px;background:rgba(231,76,60,0.2);padding:15px;border-radius:8px;"><i class="fas fa-lightbulb"></i> <strong>補全知識要求</strong>：學生需通過補充學習材料、課后實踐和小組討論等方式，完善課程知識體系，特別是對網絡協議、安全防護等核心概念的深入理解。</p></div></div><footer><p>應電五貫21-1班 | 計算機網絡應用課程 | 2025-2026學年第一學期</p><p>? 2025 電子信息工程學院 - 保留所有權利</p></footer></div></div><script>const { createApp, ref, onMounted } = Vue;createApp({setup() {// 創建可見性引用const card1Visible = ref(false);const card2Visible = ref(false);const card3Visible = ref(false);const target1Visible = ref(false);const target2Visible = ref(false);const target3Visible = ref(false);const assessmentVisible = ref(false);// 元素引用const card1 = ref(null);const card2 = ref(null);const card3 = ref(null);const target1 = ref(null);const target2 = ref(null);const target3 = ref(null);const assessment = ref(null);// 檢查元素是否可見const checkVisibility = (element, visibilityRef) => {if (!element || visibilityRef.value) return;const rect = element.getBoundingClientRect();const isVisible = (rect.top <= (window.innerHeight * 0.85) && rect.bottom >= (window.innerHeight * 0.15));if (isVisible) {visibilityRef.value = true;}};// 滾動監聽const handleScroll = () => {checkVisibility(card1.value, card1Visible);checkVisibility(card2.value, card2Visible);checkVisibility(card3.value, card3Visible);checkVisibility(target1.value, target1Visible);checkVisibility(target2.value, target2Visible);checkVisibility(target3.value, target3Visible);checkVisibility(assessment.value, assessmentVisible);};onMounted(() => {// 添加滾動監聽window.addEventListener('scroll', handleScroll);// 初始檢查handleScroll();});return {card1Visible,card2Visible,card3Visible,target1Visible,target2Visible,target3Visible,assessmentVisible,card1,card2,card3,target1,target2,target3,assessment};}}).mount('#app');</script>
</body>
</html>頁面功能與特點
現代化UI設計
科技感漸變背景（深藍色系）
玻璃擬態效果卡片設計
清晰的信息層次結構
響應式布局適配各種設備
動態效果
滾動觸發的卡片漸入動畫
卡片懸停上浮效果
平滑的過渡動畫
內容組織
頂部課程基本信息展示區
三個核心卡片（必備知識、后續課程提供、課程標準）
三個目標卡片（知識目標、能力目標、素質目標）
底部考核辦法區域
特色設計
每個卡片頂部的彩色標識條
使用圖標增強可讀性
重點信息高亮顯示
"補全知識"要求特殊樣式突出
響應式設計
在移動設備上自動調整布局
小屏幕設備優化顯示效果
字體大小自適應
這個頁面清晰地展示了計算機網絡應用課程的所有關鍵信息，包括課程基本信息、教學目標、考核方式等，并通過現代化的UI設計增強了可讀性和視覺吸引力。
)
