CSS3学习教程，从入门到精通， 学院网站完整项目 - HTML5 + CSS3 实现（25）

知识分享小能手2025-04-01 8:53

学院网站完整项目 - 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 设计步骤

  1. 确定色彩方案
  2. 设计布局框架
  3. 设计各个页面模块
  4. 设计交互元素

3. HTML5 实现

3.1 主页 (index.html)

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> 邮箱：[email protected]</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)

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)

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)

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)

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)

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 复制代码 
/**
 * 学院网站主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 知识点：

  1. 语义化标签：<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>
  2. 视频嵌入：<video> 标签
  3. 响应式设计：<meta name="viewport">
  4. 表单增强：新的输入类型和属性
  5. 本地存储：localStorage/sessionStorage
  6. Canvas/SVG 图形

CSS3 知识点：

  1. 弹性布局：Flexbox
  2. 网格布局：Grid
  3. 媒体查询：响应式设计
  4. 过渡和动画：transition, animation
  5. 变形：transform
  6. 渐变：linear-gradient
  7. 阴影：box-shadow, text-shadow
  8. 自定义字体：@font-face
  9. 多列布局：column-count
  10. 滤镜效果：filter

JavaScript 知识点：

  1. DOM 操作
  2. 事件处理
  3. 定时器
  4. 视频API控制
  5. 全屏API
  6. 响应式设计实现

这个项目完整实现了学院网站的主要功能页面，包括主页、新闻列表页、新闻详情页和视频宣传页，具有良好的响应式设计和用户体验。

相关推荐
Aphasia31119 分钟前
react必备JavaScript知识点(二)——类
前端·javascript
玖玖passion21 分钟前
数组转树：数据结构中的经典问题
前端
呼Lu噜27 分钟前
WPF-遵循MVVM框架创建图表的显示【保姆级】
前端·后端·wpf
珠峰下的沙砾30 分钟前
Vue3 里 CSS 深度作用选择器 :global
前端·javascript·css
航Hang*33 分钟前
WEBSTORM前端 —— 第2章：CSS —— 第3节：背景属性与显示模式
前端·css·css3·html5·webstorm
wuhen_n34 分钟前
CSS元素动画篇：基于当前位置的变换动画（一）
前端·css·html·css3·html5
前端_学习之路37 分钟前
javaScript--数据结构和算法
javascript·数据结构·算法
拉不动的猪1 小时前
# 移动端与PC端全屏的处理
前端·javascript·面试
局外人LZ1 小时前
WXT+Vue3+sass+antd+vite搭建项目开发chrome插件
前端·chrome·vue·sass
热门推荐
01西电B测-计算机网络综合实验(含验收问题)02KGG转MP3工具|非KGM文件|解密音频03从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑04Coze扣子平台完整体验和实践（附国内和国际版对比）05yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记06我决定放弃搞 Java 了07DeepSeek各版本说明与优缺点分析08YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】09苍穹外卖面试总结10YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU