静态网页大学生通用模版 | 前端三件套（html+css+js）

大熊计算机

发布于 2025-07-14 17:05:29

33200

代码可运行

文章被收录于专栏：C博文C博文

运行总次数：0

代码可运行

概要

本文介绍如何使用纯前端三件套（HTML + CSS + JavaScript）完成静态网页，包含：

无需打包工具，直接复制代码到html后缀的文件一键点击文件即可浏览器打开。

通过本模板，你可以几分钟内搭建一个包含轮播图、作品集、多媒体、地图与留言板的完整静态网页。适合简历展示、项目汇报、个人博客等多种场景。

效果图：

完整代码（`index.html`）

<!DOCTYPE html>
<html lang="zh" dir="ltr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>通用静态网页模板 V6</title>
  <style>
    :root {
      --clr-primary: #1e3a8a;
      --clr-secondary: #2563eb;
      --clr-accent: #60a5fa;
      --clr-bg: #f3f4f6;
      --clr-card: #ffffff;
      --clr-text: #111827;
      --font: 'Helvetica Neue', Arial, sans-serif;
      --transition: 0.3s ease;
    }
    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    body { background: var(--clr-bg); color: var(--clr-text); font-family: var(--font); line-height:1.6; }
    a { color: var(--clr-secondary); text-decoration:none; transition: var(--transition); }
    a:hover { color: var(--clr-primary); }

    /* 容器 */
    .container { width:90%; max-width:1200px; margin:0 auto; padding:40px 0; }

    /* 顶部导航 */
    header { background: var(--clr-primary); color:#fff; position: sticky; top:0; z-index:1000; }
    nav { display:flex; justify-content: space-between; align-items:center; padding:20px; }
    .logo { font-size:1.8rem; font-weight:bold; }
    .nav-links { display:flex; gap:20px; list-style:none; }
    .nav-links a { color:#fff; font-weight:500; }
    .nav-toggle { display:none; font-size:1.5rem; cursor:pointer; }

    /* 轮播图 */
    .carousel { position: relative; overflow: hidden; height: 60vh; background: #000; }
    .slides { display: flex; width: 300%; height:100%; transition: transform 0.5s ease; }
    .slide { flex:1; background-size:cover; background-position:center; }
    .carousel-nav { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:10px; }
    .carousel-dot { width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,0.5); cursor:pointer; }
    .carousel-dot.active { background:#fff; }

    /* 模块标题 */
    section h2 { font-size:2rem; margin-bottom:20px; border-bottom:3px solid var(--clr-primary); display:inline-block; padding-bottom:5px; }

    /* 卡片网格 */
    .grid { display:grid; gap:20px; }
    .grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
    .card { background: var(--clr-card); border-radius:8px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.1); transition: var(--transition); }
    .card:hover { transform: translateY(-5px); }
    .card img { width:100%; height:200px; object-fit:cover; }
    .card-content { padding:15px; }

    /* 多媒体展示 */
    .media { display:grid; gap:20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
    .media video { width:100%; height:auto; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.1); }

    /* 地图导航 */
    .map-container { width:100%; height:400px; border-radius:8px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.1); }

    /* 留言板 */
    .message-board { background: var(--clr-card); padding:20px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.1); }
    .message-board form { display:flex; flex-direction:column; gap:15px; }
    .message-board input, .message-board textarea { padding:10px; border:1px solid #ccc; border-radius:4px; font-size:1rem; }
    .message-board button { padding:10px; background: var(--clr-secondary); color:#fff; border:none; border-radius:4px; cursor:pointer; transition:var(--transition); }
    .message-board button:hover { background: var(--clr-primary); }
    .messages { margin-top:20px; }
    .message { padding:10px; border-bottom:1px solid #eee; }
    .message strong { color: var(--clr-primary); }

    /* 页脚 */
    footer { text-align:center; padding:20px 0; background: var(--clr-primary); color:#fff; }

    @media(max-width:768px) {
      .nav-links { display:none; flex-direction:column; background: var(--clr-primary); position:absolute; top:60px; right:20px; padding:10px; border-radius:8px; }
      .nav-links.active { display:flex; }
      .nav-toggle { display:block; color:#fff; }
      .carousel-nav { bottom:10px; }
    }
  </style>
</head>
<body>

  <!-- 头部导航 -->
  <header>
    <div class="container">
      <nav>
        <div class="logo">模板 V6</div>
        <ul class="nav-links">
          <li><a href="index.html">首页</a></li>
          <li><a href="about.html">关于</a></li>
          <li><a href="portfolio.html">作品</a></li>
          <li><a href="media.html">多媒体</a></li>
          <li><a href="map.html">地图</a></li>
          <li><a href="contact.html">联系</a></li>
        </ul>
        <div class="nav-toggle">☰</div>
      </nav>
    </div>
  </header>

  <!-- 轮播图 -->
  <div class="carousel" id="carousel">
    <div class="slides">
      <div class="slide" style="background-image:url('https://source.unsplash.com/1600x900/?nature')"></div>
      <div class="slide" style="background-image:url('https://source.unsplash.com/1600x900/?technology')"></div>
      <div class="slide" style="background-image:url('https://source.unsplash.com/1600x900/?city')"></div>
    </div>
    <div class="carousel-nav" id="dots"></div>
  </div>

  <main class="container">
    <!-- 作品展示 -->
    <section id="portfolio">
      <h2>作品展示</h2>
      <div class="grid grid-2">
        <div class="card">
          <img src="https://source.unsplash.com/400x300/?code" alt="作品1">
          <div class="card-content">
            <h3>项目 1</h3>
            <p>简介：响应式网页设计示例。</p>
          </div>
        </div>
        <div class="card">
          <img src="https://source.unsplash.com/400x300/?ui" alt="作品2">
          <div class="card-content">
            <h3>项目 2</h3>
            <p>简介：交互式用户界面示例。</p>
          </div>
        </div>
        <div class="card">
          <img src="https://source.unsplash.com/400x300/?app" alt="作品3">
          <div class="card-content">
            <h3>项目 3</h3>
            <p>简介：移动 App 界面示例。</p>
          </div>
        </div>
        <div class="card">
          <img src="https://source.unsplash.com/400x300/?design" alt="作品4">
          <div class="card-content">
            <h3>项目 4</h3>
            <p>简介：平面设计作品示例。</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 多媒体展示 -->
    <section id="media">
      <h2>多媒体展示</h2>
      <div class="media">
        <video controls src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
        <video controls src="https://www.w3schools.com/html/movie.mp4"></video>
      </div>
    </section>

    <!-- 地图导航 -->
    <section id="map">
      <h2>地图导航</h2>
      <div class="map-container">
        <iframe
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.999945711264!2d114.0578687156726!3d22.543096782719894!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3403f1587e071cdb%3A0x8c1f2ee0ae0e38d7!2z5Lit5Zu9IOWumuW4uueOsCwg5a6a5YWo5Lq6LCAxMzM!5e0!3m2!1szh-CN!2scn!4v168xxxxxxxxx"
          width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
      </div>
    </section>

    <!-- 留言板 -->
    <section id="board" class="message-board">
      <h2>留言板</h2>
      <form id="boardForm">
        <input type="text" id="userName" placeholder="你的名字" required>
        <textarea id="userMsg" rows="4" placeholder="留言内容" required></textarea>
        <button type="submit">发布留言</button>
      </form>
      <div class="messages" id="messages"></div>
    </section>
  </main>

  <footer>
    &copy; 2025 大学生通用模板 V6 版权所有
  </footer>

  <script>
    // 导航切换
    document.querySelector('.nav-toggle').addEventListener('click', ()=>{
      document.querySelector('.nav-links').classList.toggle('active');
    });

    // 留言板
    const form = document.getElementById('boardForm'),
          msgs = document.getElementById('messages');
    form.addEventListener('submit', e=>{
      e.preventDefault();
      const name = document.getElementById('userName').value.trim(),
            text = document.getElementById('userMsg').value.trim();
      if(name && text){
        const div = document.createElement('div');
        div.className = 'message';
        div.innerHTML = `<strong>${name}</strong> <em>${new Date().toLocaleString()}</em><p>${text}</p>`;
        msgs.prepend(div);
        form.reset();
      }
    });

    // 轮播图逻辑
    const slides = document.querySelector('.slides'),
          dotsContainer = document.getElementById('dots');
    let idx = 0, total = slides.children.length;
    // 创建小圆点
    for(let i=0; i<total; i++){
      const dot = document.createElement('div');
      dot.className = 'carousel-dot';
      dot.addEventListener('click', ()=>{ goToSlide(i); });
      dotsContainer.append(dot);
    }
    const dots = dotsContainer.children;
    function goToSlide(i){
      idx = i;
      slides.style.transform = `translateX(-${i*100/total*total}%)`;
      updateDots();
    }
    function updateDots(){
      [...dots].forEach((d,j)=> d.classList.toggle('active', j===idx));
    }
    function nextSlide(){
      idx = (idx+1) % total;
      slides.style.transform = `translateX(-${idx*100}%)`;
      updateDots();
    }
    updateDots();
    setInterval(nextSlide, 4000);

  </script>
</body>
</html>

2. 关键模块详解

2.1 轮播图（Carousel）

HTML：三个 .slide 容器，背景图通过 background-image 引入在线素材。
CSS：.carousel 限制高度与溢出；.slides 使用 flex 布局并通过 transform 滑动；.carousel-dot 实现指示器。
JS：自动播放（setInterval），并支持点击小圆点切换。