整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
iframe语法:
<iframe src="URL"></iframe>
该URL指向不同的网页。
Iframe - 设置高度与宽度
height 和 width 属性用来定义iframe标签的高度与宽度。
属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%").
实例
<iframesrc="demo_iframe.htm"width="200"height="200"></iframe>
Iframe - 移除边框
frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 "0" 移除iframe的边框:
实例
<iframesrc="demo_iframe.htm"frameborder="0"></iframe>
使用iframe来显示目录链接页面
iframe可以显示一个目标链接的页面
目标链接的属性必须使用iframe的属性，如下实例:
实例
<iframesrc="demo_iframe.htm"name="iframe_a"></iframe><p><ahref="http://www.runoob.com"target="iframe_a">RUNOOB.COM</a></p>
HTML iframe 标签
| 标签 | 说明 |
|---|---|
| <iframe> | 定义一个内联的iframe |
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
天我教大家怎么零基础编写html框架
首先建立一个index.html文件，index（为首页的意思）
请大家先看看效果图
网站可分为三个部分
head头
<head></head>
body体
<body><body>
foot脚
<footer></footer>
在刚刚建好的index.html里面写上html标准代码
<!--这为文本类型也是html开始代码-->
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
其次给html写上编码让浏览器知道他是什么编码，不然会出现乱码
<!DOCTYPE html>
<html>
<head>
<!--网站编码为utf-8-->
<meta charset="utf-8">
<!--此为网站标题-->
<title></title>
</head>
<body>
</body>
</html>
在给网站起个标题
<!DOCTYPE html>
<html>
<head>
<!--网站编码为utf-8-->
<meta charset="utf-8">
<!--此为网站标题-->
<title>html框架</title>
</head>
<body>
</body>
</html>
现在我们开始写body体
先建立三个div块
我们给这三个块下个名称
在给这三个div块写上css样式，css样式有三种我们先讲内联，下节课再讲外联
再给css样式写上内容
/*width:为宽度;height :为高;background:为网站背景;（也可以用color表示）css样式要以;结尾*/
现在我们来看看效果
div块靠左，不美观怎么办？
没关系我们写上css让它居中更美观
/*margin:上边距 右边距 下边距 左边距;margin:0 auto; 0就是块离浏览器上边框的距离为0个像素点，auto为块自动居中*/
/*也可以用margin-left：左边距;margin-right: 右边距;margin-top: 上边距;margin-bottom: 下边距;*/
再让我们看看效果吧
是不是居中了
只是这样还不像网站怎办别急我们再给它写上幻灯片的框架和做导航和右内容框架
我们在建三个块分别命名为lmage（图片的意思）left（左）right（右）
我们在给这三个块写上css样式
让我们看看效果吧
让我们再给右内容区写的东西吧
我们再写上四个块
我们给这四个块写上css样式
.kuai1{
width: 50%;
height:50%;
background: #bcdbcd;
}
.kuai2{
width: 50%;
height:50%;
float: left;
background: #cdfcdf;
}
.kuai3{
width: 50%;
height:50%;
background: #defdef;
}
.kuai4{
width: 50%;
height:50%;
background: #efbefb;
}
这是我们会发现板块乱了怎么办，别担心现在教给你新知识那就是浮动代码
/*float:为浮动代码;（意为漂浮起来）*/
/*float:left;(向左浮动)float:right;(向右浮动)*/
让我们看看效果如何把
是不是很漂亮呢
好了现在我们就回顾一下这节课的知识点吧
<!--网站编码为utf-8-->
<meta charset="utf-8">
<!--这为网站标题-->
<title>html框架</title>
/*width:为宽度;height :为高;background:为网站背景;（也可以用color表示）css样式要以;结尾*/
/*margin:上边距 右边距 下边距 左边距;margin:0 auto; 0就是块离浏览器上边框的距离为0个像素点，auto为块自动居中*/
/*也可以用margin-left：左边距;margin-right: 右边距;margin-top: 上边距;margin-bottom: 下边距;*/
/*float:为浮动代码;（意为漂浮起来）*/
/*float:left;(向左浮动)float:right;(向右浮动)*/
<!--这为div（块）-->
<div class="header"></div>
<div class="body">
<div class="lmage"></div>
<div class="left"></div>
<div class="right">
<div class="kuai1"></div>
<div class="kuai2"></div>
<div class="kuai3"></div>
<div class="kuai4"></div>
</div>
</div>
<div class="footer"></div>
<!--class为块名称也可以用//id//,//name//为名称-->
今，CSS框架越来越受欢迎，可以说已经应用到每一个网站上了。作为开发工具，CSS框架一直处于不断进化和改进的状态，因此我们强烈建议您关注眼下的趋势。这篇文章会带您了解2017年最流行的5种CSS框架。
1.Bootstrap
这个框架是GitHub的明星产品之一，被认为是拥有最好的响应性的CSS框架。专为前端开发而设计，有助于构建web设计理念、移动优先项目、网格系统、排版和按钮等。
Bootstrap没有任何附加功能，但是有第三方插件可用，除了常规的HTML元素，还具有其他常见的UI元素。其核心原则是RWD和mobile first。Bootstrap版本3支持各种浏览器(最新版本)，并且自Bootstrap 2开始，框架支持响应式网页设计。Bootstrap 4版本目前正在开发中。
Bootstrap非常受欢迎，但并不是说他比其他的框架要好。大多数人用它是因为它的受欢迎程度，由于这一点，有很多资源可用(如教程，额外的插件等)，使得使用Bootstrap更容易。
2.Foundation
Foundation是一个开源项目，是CSS框架界的另一巨头。众所周知，它得流畅性和响应性非常好，可以用于许多用途：构建网站、创建电子邮件模板、构建移动和web应用程序。
这个框架对用户也非常友好，提供了培训、支持和咨询等服务。还有一些独特的组件(击键，Joyride，Flex视频等)和一些附加组件。其核心原则除了RWD和mobile first，还包括semantic。
Foundation以完美的工作流程和开发人员的大力支持为自己赢得了巨大的利润。它是一个非常专业的框架，并提供了大量可用的教程，用户能够随时了解Foundation。
3.Bulam
Bulam开放源码、免费并且节约开发人员的时间。由于学习起来和使用非常简单，因此最近变得非常流行。
首先，Bulma包含很棒的UI组件，如选标签、导航栏、框和面板等等，因为此框架旨在为用户提供清晰而有吸引力的UI。其次，Bulma非常的模块化，用户可以只导入所需的功能。 最后，这个框架的类可读性很高，这点对于一些开发者来说可能是非常具有吸引力的。
Bulma易于理解和使用简单，同时它具有所有必要的功能，帮助您高效的创建出优质产品。
4. Ulkit
可能没有多少人知道(使用)这个框架，但它与其他类似框架具有相同的功能。
Ulkit是轻量级和模块化的，用于创建快速但功能强大的Web界面。 Ulkit基本上是一组易于定制的组件集合，具有HTML Editor、Flex、其他附加组件和独特的组件。它的核心原则是RWD和mobile first，Ulkit广泛应用于WordPress主题中。使您能够灵活的进行手动定制机制。
5. Semantic UI
从名称就能猜出，Semantic UI旨在使网站构建过程更加语义化。核心特征是利用自然语言原理使代码更易于阅读，更容易理解。
核心原则是标签矛盾、语义和响应能力。这个框架是将语句和类作为可交换的组件来处理，并使用直观的JS和简单的调试。
Semantic UI的好处在于，它提供了组织良好的文档和网站，并提供了使用指南。简而言之，它有3000多个主题变量，50多个UI组件，以及5000多个提交。绝对值得一试。是创建页面漂亮、反应灵敏的网站的不错之选择。
*请认真填写需求信息，我们会在24小时内与您取得联系。
