layui框架和iframe总结 layui框架最简单的iframe版使用

时间:2024-02-16 09:47:57

今日学习
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>

截图如下;