zoukankan      html  css  js  c++  java
  • layui框架和iframe总结 layui框架最简单的iframe版使用

    今日学习
    1.layui前端框架使用 用框架就好了,这样可以专心做后端开发
      1.安装
      去百度搜索 layui官网 -- > 点击下载即可
      2.配置文件
      创建一个web项目(hBuilder下面),在把layui的文件复制进来,主要使用css和js文件
      3.去官网,复制主页文件
      官网-->文档-->布局 (栅格/后台布局) --> 滑到页面最低端代码-->把代码复制下来拷贝到自己项目的index.html文件里面
      4.index.html中引入css和js配置
        1.在index.html的head标签内引入框架的css文件
        <link rel="stylesheet" href="layui/css/layui.css">
        2.在index.html的script的标签内引入框架的js文件
        <script src="layui/layui.js"></script>
      5.分析框架组成
        先了解整体框架有几部分组成,然后看自己用神魔,(做每个小区域的注释 为了清晰框架)
        不用的可以删除,修改信息即可
    2.iframe标签
      1.iframe标签作用用于一个页面嵌套另一个页面 页面嵌套页面-->
      2.用法1
        把java.html页面的内容嵌入到iframe标签所在页面的部分里面
        <iframe name="bodyM" src="java.html"></iframe>
        用法2 和a标签的href,target的属性搭配组合 点击a标签时,把href路径里的页面嵌入到iframe里面
       1.a标签的target的属性
           target='_self'
      <!-- _self 本页面跳转-->
      target的属性 target='_blank'
      <!-- 打开一个新窗口-->
    2.用法实现
      1.先设置iframe的name属性,
      2.然后把target的属性值设置为iframe属性的name值
      3.在a标签里面,href的属性值设置为要在iframe里面嵌入的html页面
    eg:
    把python.html的内容引到java.html的iframe框架里面
    java.html和python.html在同一级目录下
    java.html 内容如下
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>java</title>
    <style>
    #ff{
    border: 3px solid white;
    400px;
    height: 400px;
    margin: 30px auto;
    border-radius: 20px;
    }
    iframe{
    border-radius: 20px;
    }
    </style>
    </head>
    <body>
    <div id="ff">
    <iframe name="bodyM" width="100%" height=""></iframe>
    <a href="python.html" target="bodyM">点击</a>
    </div>
    </body>
    </html>
    python.html文件
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>python</title>
    </head>
    <body>
    python
    </body>
    </html>

    截图如下;

  • 相关阅读:
    JN_0026:FTP连接站点 规避防火墙
    JS_0002:js读取外部json文件
    JQPlug0002:layer Zindex不断增加的问题 弹窗一直置顶
    JQPlug0001:layer父子页面通信,常用打开模版
    Web_0010:Html打包EXE方法
    Web_0009:win系统下注册自己的协议,用于web项目启动本地程序
    ZAB 和 Paxos 算法的联系与区别?
    保证缓存与数据库双写时的数据一致性
    解决 Redis 的并发竞争 Key 问题
    缓存雪崩和缓存穿透
  • 原文地址:https://www.cnblogs.com/nanfengnan/p/14136403.html
Copyright © 2011-2022 走看看