新建html+css+js原生web项目的整体结构

Zoie_ting

已于 2023-03-15 11:17:15 修改

阅读量1.8k

点赞数

分类专栏： javascript和css 文章标签：前端 javascript html css 开发语言

于 2023-02-10 17:23:00 首次发布

本文链接：https://blog.youkuaiyun.com/sxww_zyt/article/details/129253507

版权

javascript和css 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了将Vue实现的页面重构为HTML、CSS和JS的过程，包括目录结构设计，如头部、主体和底部的布局，以及使用iframe处理动态内容。JavaScript部分涉及切换iframe源和显示提示信息的功能，样式方面使用了ElementUI并自定义了样式。文章还提到了每个页面的独立样式和全局样式的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

业余时候想把vue实现的页面用html+css+js重构一下，在这里记录一下流程，以供个人成长和参考。

一、目录结构

1，盘点需要的目录：html页面，css样式，js功能，image图片资源，项目入口文件index.html

2，我们的页面为简单的三部分，如下图所示

index.html为项目入口文件，由于头部是菜单和一些用户的操作，底部是版权或一些用户信息，只有主体部分内容在变化，所以笔者将主体部分用iframe嵌套，头部尾部在index.html中。

二、代码实现

1，index.html部分，头部展示标题和菜单，底部展示版权信息等，iframe展示主体内容，默认展示菜单A

    <body>
      <div id="devtrol" class="layout">
        <div class="header">
          <div class="logo">
           <img class="avatar" src="./images/logo.png" alt="" />
           <span class="title">标题</span>
         </div>
         <div class="nav">
           <div class="nav_drop on" onclick="changeFrame(this,'a.html')">
             菜单A
           </div>
           <div class="nav_drop" onclick="changeFrame(this,'b.html')">
             菜单B
           </div>
         </div>
         <div class="control">
           <div class="ico">
             <img
               src="./images/login.png"
               alt="icon"
               title=""
               onclick="showQrCode()"
             />
             <div class="qr-code-container">
               <span class="icon"></span>
               <div id="qrcode" ref="_qrcode"></div>
             </div>
           </div>
           <div class="ico">
             <i class="el-icon-minus" title="最小化"></i>
           </div>
           <div class="ico">
             <i class="el-icon-full-screen" title="最大化"></i>
           </div>
           <div class="ico close">
             <i class="el-icon-close" title="退出"></i>
           </div>
         </div>
       </div>
       <div class="layout_main">
         <iframe
           id="msgFrame"
           name="msgFrame"
           src="./htmls/a.html"
           frameborder="0"
           scrolling="yes"
         ></iframe>
       </div>
       <div class="layout_footer">
         <div class="footer">
           <div class="left">
             <label>用户名：</label>
           </div>
           <div class="right">
             <span class="leftmr pointer" data-v-fc756330="">  </span>
           </div>
         </div>
       </div>
     </div>
   </body>

2，js部分使用showTip控制提示信息（例如鼠标悬浮、点击等触发提示信息的展示）的显隐，changeFrame修改主体部分的嵌套页面

     let showTip = false;
     function changeFrame(obj, url) {
       let elems = document.getElementsByClassName("nav_drop");
       for (let i = 0; i < elems.length; i++) {
         elems[i].className = "nav_drop";
       }
       obj.className = "nav_drop on";
       document.getElementById("msgFrame").src = "./htmls/" + url + ".html";
     }
     function showQrCode() {
       document.getElementsByClassName("qr-code-container")[0].style = showTip
         ? "display:none"
         : "display:block;";
       showTip = !showTip;
     }

3，样式