• 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>

    截图如下;

  • 相关阅读:
    Leetcode-784 Letter Case Permutation(字母大小写全排列)
    Leetcode-450 Delete Node in a BST(删除二叉搜索树中的节点)
    Leetcode-423 Reconstruct Original Digits from English(从英文中重建数字)
    Leetcode-692 Top K Frequent Words(前K个高频单词)
    Leetcode-355 Design Twitter(设计推特)
    Leetcode-229 Majority Element II(求众数 II)
    Leetcode-557 Reverse Words in a String III(反转字符串中的单词 III)
    LeetCode
    LeetCode
    LeetCode
  • 原文地址:https://www.cnblogs.com/nanfengnan/p/14136403.html
Copyright © 2020-2023  润新知