用Iframe标签实现菜单与内容的布局

用Iframe标签实现菜单与内容的布局

　　在做项目的时候会考虑一个问题，就是菜单与内容主题的布局划分。一般情况下都是把菜单作为一个单独的部分提取出来，以避免后期对菜单修改的时候，需要对每一个页面都要进行修改（新手很可能会出现，将菜单栏的代码在每一个页面都是会存在的，这样的话，缺点有二：1、代码的冗余很大；2、对菜单的维护很不方便。）这个时候可以使用iframe标签实现页面的控制跳转，菜单栏页面与主体内容显示区，划分出来规划好，不同的页面只需要在菜单页中根据url实现跳转。

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 引入layui的核心的css文件 -->
        <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
        <!-- 引入layui的核心的js文件 -->
        <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
        <!-- 首页的css文件 -->
        <link rel="stylesheet" type="text/css" href="css/index.css"/>
        <!-- 定义鼠标移动时，就会改变颜色 -->
        <style type="text/css">a:hover {background-color: #0088CC;}</style>
    </head>
    <body>
        <div class="layui-layout layui-layout-admin">
          <div class="layui-header">
            <div class="layui-logo layui-hide-xs layui-bg-black" style="font-size: 20px;">博客管理系统</div>
            <ul class="layui-nav layui-layout-right">
              <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;"><i class="layui-icon layui-icon-username" style="font-size: 16px;">我的</i></a>
                <dl class="layui-nav-child">
                  <dd><a href="">更新</a></dd>
                  <dd><a href="">退出</a></dd>
                </dl>
              </li>
              <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                  <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
              </li>
            </ul>
          </div>
          <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
              <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
              <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-child-c">
                  <a href="ceshi.html" style="font-size: 16px;" target="mytarget">查看我的文章</a>
                </li>
                <li class="layui-nav-item layui-nav-child-c">
                    <a href="createNewArticle.html" style="font-size: 16px;"target="mytarget">编写新的文章</a>
                </li>
                <li class="layui-nav-item layui-nav-child-c">
                    <a href="" style="font-size: 16px;"target="mytarget">个人信息维护</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        
        <!-- 内容主体区域（每个页面都可以直接复制粘贴，只是这里的主题内容不一致即可，相对之前的设计很简单） -->
        <div class="layui-body" style="margin-left: 2%;">    
            <iframe frameborder="5" scrolling="yes" name="mytarget" width="97%" height="95%" style="border: 1px solid #000000 ;"></iframe>
        </div>
        
    </body>
</html>

　　划分重点：

                <li class="layui-nav-item layui-nav-child-c">
                  <a href="ceshi.html" style="font-size: 16px;" target="mytarget">查看我的文章</a>
                </li>
        <!-- 内容主体区域（每个页面都可以直接复制粘贴，只是这里的主题内容不一致即可，相对之前的设计很简单） -->
        <div class="layui-body" style="margin-left: 2%;">    
            <iframe frameborder="5" scrolling="yes" name="mytarget" width="97%" height="95%" style="border: 1px solid #000000 ;"></iframe>
        </div>

　　iframe中额name与target搭配结合使用会实现页面的布局，即使后期，添加菜单也是在a标签中，添加一个url标注target。target的目的就是：实现内容的定位。scrolling是设置内容是否可以实现滚动条，name标注了target的接收目标。

 

posted @ 2021-11-08 23:46  心向未来  Views(162)  Comments(0)    收藏  举报