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

截图如下;

 

posted @ 2020-12-14 23:47  nanfengnan  阅读(8127)  评论(0)    收藏  举报