iframe-标签的运用，简易前端web网页设计

1.iframe简介

2.图片展示

3.代码展示

4.资源下载

1.iframe简介

1.iframe一般用来包含别的页面，例如我们可以在我们自己的网站页面加载别人网站的内容，为了更好的效果，可能需要使iframe透明效果，那么就需要了解更多的iframe属性
2.iframe元素会创建包含另外一个文档的内联框架（即行内框架）
3.iframe标签成对使用，大多用来web页面的设计

2.图片展示

点击左边x#html，右边边框显示相应的*.html页面，只刷新页面，但网址<不>发生改变

3.代码展示

1.index-iframe.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>index-iframe</title><style>* {margin: 0;padding: 0%;}a {text-decoration: none;}/* logo */.toplogo {text-align: center;float: left;width: 13%;height: 60px;background-color: #090e0d;}/* 头部 */.head {float: right;width: 87%;height: 60px;background-color: #090e0d;}.main {width: 100%;height: 500px;background-color: #f7fdfd;}/* 左边 */.main-left {float: left;width: 13%;height: 138%;background-color: #090e0d}.main-left-ul>li {width: 100%;height: 50px;list-style: none;line-height: 50px;font-size: 20px;/* 分界线 */border-bottom: 1px solid #090e0d;}.main-left-ul>li:hover {background-color: #dddddd8e;}.main-left span {color: #f5fafad0;height: 100px;line-height: 40px;font-size: 20px;margin-left: 25%;}/* 右边 */.main-right {float: right;width: 87%;height: 128%;}/* 尾部 */.footer {float: right;width: 87%;height: 50px;background-color: #e4e4e42f;}</style>
</head><body><div class="toplogo"><img src="../excute/image/ym1.ico" alt="error" style="margin-top: 8%;"></div><div class="head"></div><div class="main"><div class="main-left"><ul class="main-left-ul"><li><a href="html2.html" target="iframe0"><span>1#html</span></a></li><li><a href="html1.html" target="iframe0"><span>2#html</span></a></li><li><a href="html2.html" target="iframe0"><span>3#html</span></a></li><li><a href="html1.html" target="iframe0"><span>3#html</span></a></li><li><a href="html1.html" target="iframe0"><span>4#html</span></a></li><li><!-- <a href="html1.html" target="iframe1"><span>5#html</span></a> --></li><!-- <a href="html1.html" target="iframe0"><span>6#html</span></a> --></ul><!-- <a href="html1.html" target="iframe0"><span>7#html</span></a> --></div><div class="main-right"><iframe src="html1.html" frameborder="0" name="iframe0" width="100%" height="100%"></iframe><!-- <iframe src="javascript:;" frameborder="0" name="iframe1" width="100%" height="100%"></iframe> --></div></div><div class="footer"></div>
</body></html>

2.html1-iframe.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>iframe-index1</title>
</head><body><h1>msg{iframe-index1}</h1>
</body></html>

4.资源下载

iframe嵌套web纯前端页面.zip

简易iframe-前端web网页设计(iframe标签运用)相关推荐

前端Web网页设计的项目实现
设计报告课题名称: 网页制作课程设计学院: 计算机工程学院课题名称网页制作课程设计设计时间 12月13日-12月20日设计目的 HTML是构建网页内容的一种重要的语言,是构建 ...
WEB前端之网页设计③----最新最全详解/如何在网页上创建表格
WEB前端之网页设计③--最新最全详解/如何在网页上创建表格一.表格效果图1: <table border="0px" cellspacing="1px" ...
WEB网页设计前端(前台)开发的常用工具推荐
WEB网页设计前端(前台)开发的常用工具推荐最近我在搞网页设计,包括网站建设的前台界面设计和JS代码的编写,弄一个JS的时候把我给郁闷了,在寻找JS如何通过子节点操作父节点的时候找到了以下免费的网站 ...
HTML5期末大作业：网上预订网站设计——火车票网上预订网站(4个页面) HTML+CSS+JavaScript web网页设计实例作业
HTML5期末大作业:网上预订网站设计--火车票网上预订网站(4个页面) HTML+CSS+JavaScript web网页设计实例作业常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. ...
如何高效的学习前端的网页设计？
如何高效的学习前端的网页设计? 那我就针对"高效"为你做一些推荐. 如果你喜欢看图文类的教程那么推荐你菜鸟教程这个网站 https://www.runoob.com/ 对新手入门 ...
div+css静态网页设计 web网页设计实例作业 ——中国茶文化(30页) HTML网页制作作品简单文化网页设计成品 dreamweaver学生网站模板
web网页设计实例作业 --中国茶文化(30页) HTML网页制作作品简单文化网页设计成品 dreamweaver学生网站模板常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. ...
HTML5+CSS期末大作业：运动体育网站设计主题——体育铅球(5页)带注册期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
web网页设计——体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码
web网页设计--体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
文化网页设计成品 web网页设计实例作业 ——古典中国风工艺美术(9页) html+css+javascript网页设计实例
web网页设计实例作业 --古典中国风工艺美术(9页) html+css+javascript网页设计实例常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶 ...

简易iframe-前端web网页设计(iframe标签运用)

iframe-标签的运用，简易前端web网页设计

1.iframe简介

2.图片展示

3.代码展示

4.资源下载

简易iframe-前端web网页设计(iframe标签运用)相关推荐

最新文章

热门文章