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>iframe嵌套页面加载慢
  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;
width: 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>
截图如下;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。