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

06-01 1090阅读

概要

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

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

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

效果图：

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

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

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

完整代码（https://blog.csdn.net/weixin_53920044/article/details/index.html）



  
  
  通用静态网页模板 V6
  
    :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; }
    }
  


  
  
    

      
        
        
☰

      
    

  
  
  
  
    
    
      
作品展示

      

        

          作品1

            
项目 1

            
简介：响应式网页设计示例。

          

        

        

          作品2

            
项目 2

            
简介：交互式用户界面示例。

          

        

        

          作品3

            
项目 3

            
简介：移动 App 界面示例。

          

        

        

          作品4

            
项目 4

            
简介：平面设计作品示例。

          

        

      

    
    
    
      
多媒体展示

      

        
        
      

    
    
    
      
地图导航

      

        
      

    
    
    
      
留言板

      
        
        
        发布留言
      
      

    
  
  
    © 2025 大学生通用模板 V6 版权所有
  
  
    // 导航切换
    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 = `${name} ${new Date().toLocaleString()}
${text}
`;
        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
      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);

2. 关键模块详解

2.1 轮播图（Carousel）
  • HTML：三个 .slide 容器，背景图通过 background-image 引入在线素材。
  • CSS：.carousel 限制高度与溢出；.slides 使用 flex 布局并通过 transform 滑动；.carousel-dot 实现指示器。
  • JS：自动播放（setInterval），并支持点击小圆点切换。
    2.2 作品展示（Portfolio）
    • 结构：.grid + .card，四张在线图片示例。
    • 样式：卡片阴影、悬停浮动效果，优化视觉层次。
      2.3 多媒体展示（Media）
      • 布局：.media 网格布局，适配多种屏幕。
      • 内容：示例视频地址可替换为个人录制或托管的 MP4 链接。
        2.4 地图导航（Map）
        • 嵌入：Google Maps iframe，src 中嵌入中国深圳坐标区域。
        • 样式：.map-container 固定高度、圆角、阴影，保证视觉统一。
          2.5 留言板（Message Board）
          • 表单： 包含姓名和留言两项；
          • 脚本：拦截 submit，在页面前端生成 .message 元素并插入 .messages，无需后端。
免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们。

相关阅读

目录[+]

取消
微信二维码
微信二维码
支付宝二维码