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>
截图如下;