返回顶部
首页 > 资讯 > 前端开发 > VUE >iframe中如何实现去边框和无边框
  • 255
分享到

iframe中如何实现去边框和无边框

2024-04-02 19:04:59 255人浏览 八月长安
摘要

这篇文章将为大家详细讲解有关iframe中如何实现去边框和无边框,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。<iframe src=”you 

这篇文章将为大家详细讲解有关iframe中如何实现去边框和无边框,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

<iframe src=”you page’s url” width=”100″ height=”30″ frameborder=”no” border=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no” allowtransparency=”yes”></iframe>
<iframe runat="server" src="you page's url" width="750" height="30" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe>

runat="server" 这个最好加上Iframe跳转 asp.net 可在当前iframe中跳转
src 链接到的地址URl
frameborder 是否显示边框(0无边框 1有边框)
scrolling 是否有滚动条(yes有滚动条 no无滚动条)
allowtransparency 背景是否透明(yes透明 no不透明)
iframe并不是很常用的,在标准的网页中非常少用。把iframe解释成“浏览器中的浏览器“是很恰当的。<iframe>也应该是框架的一种形式,它与<frame>不同的是,iframe可以嵌在网页中的任意部分。例如:

<iframe frameborder=0 width=170 height=100 marginheight=0 marginwidth=0 scrolling=no src="move-ad.htm"></iframe>

SRC=URI 嵌入式柜架的页面文件路径
NAME=CDATA 嵌入式柜架的名字
LONGDESC=URI 描述
WIDTH=Length 宽度
HEIGHT=Length 高度
ALIGN=[ top | middle | bottom | left | right ] 对齐方式
FRAMEBORDER=[ 1 | 0 ] 柜架边框
MARGINWIDTH=Pixels 左右空出宽度
MARGINHEIGHT=Pixels 上下空出的高度
SCROLLING=[ yes | no | auto ] 流动条(yes强制显示|no永不显示|auto自动)
Iframe标记的使用格式是:
<Iframe src="URL" width="x" height="x" scrolling="[OPTioN]" frameborder="x" name="main"></iframe>
src:文件的路径,既可是html文件,也可以是文本、ASP等;
width、height:"内部框架"区域的宽与高;
scrolling:当SRC的指定的HTML文件在指定的区域不显不完时,滚动选项,如果设置为NO,则不出现滚动条;如为 Auto:则自动出现滚动条;如为Yes,则显示;
FrameBorder:区域边框的宽度,为了让“内部框架“与邻近的内容相融合,常设置为0。
name:框架的名字,用来进行识别。
<iframe>用于设置文本或图形的浮动图文框或容器

border 
<iframe border="3"></iframe>

设定围绕图文框的边缘宽度

frameboder 
<iframe frameboder="0"></iframe>

设置边框是不否为3维(0=否,1=是)

height,width 
<iframe height="31" width="88"></iframe>

设质边框的宽度和高度

scrolling 
<iframe scrolling="no"></iframe>

是否有滚动条(yes,no,auto)

src 
<iframe src="girl.gif"></iframe>

指定iframe调用的文件或图片(html,htm,gif,jpeg,jpg,png,txt,*.*)
注意事项:
一个浮动框架不需要通过<frameset>元素声明为框架设置的一部分;
WEBTV和Netscape 4.x(4.0 到 4.75)不支持浮动框架。
在HTML4.01严格规范中,<iframe>元素没有被定义。浮动框架可以使用<div>元素和CSS定位方法来模仿实现。
浮动帧标记Iframe的属性:
1、文件位置:
语法:src=url
说明:url为嵌入的HTML文件的位置,可以是相对地址,也可以是绝对地址。
示例:<iframe src="iframe.html">
2、对象名称:
语法:name=#
说明:#为对象的名称。该属性给对象取名,以便其他对象利用。
示例:<iframe src="iframe.html" name="iframe1">
3、ID选择符:
语法:id=#
说明:指定该标记的唯一ID选择符。
示例:<iframe src="iframe.html" id="iframe1">
4、容器属性:
语法:height=# width=#
说明:该属性指定浮动帧的高度和宽度。取值为正整数(单位为像素)或百分数。
height:指定浮动帧的高度;
width:指定浮动帧的宽度。
示例:<iframe src="iframe.html" height=400 width=400>
5、尺寸调整:
语法:noresize
说明:IE专有属性,指定浮动帧不可调整尺寸。
示例:<iframe src="iframe.html" noresize>
6、边框显示:
语法:frameborder=0、1
说明:该属性规定是否显示浮动帧边框。
0:不显示浮动帧边框;
1:显示浮动帧边框。
示例:<iframe src="iframe.html" frameborder=0>
<iframe src="iframe.html" frameborder=1>
7、边框厚度:
语法:border=#
说明:该属性指定浮动帧边框的厚度,取值为正整数和0,单位为像素。为了将浮动帧与页面无缝结合,border一般等于0。
示例:<iframe src="iframe.html" border=1>
8、边框颜色:
语法:bordercolor=color
说明:该属性指定浮动帧边框的颜色。color可以是RGB色(RRGGBB),也可以是颜色名。
示例:<iframe src="iframe.html" bordercolor=red>
9、对齐方式:
语法:align=left、right、center
说明:该属性指定浮动帧与其他对象的对齐方式。
left:居左;
right:居右;
center:居中。
示例:<iframe src="iframe.html" align=left>
<iframe src="iframe.html" align=right>
<iframe src="iframe.html" align=center>
10、相邻间距:
语法:framespacing=#
说明:该属性指定相邻浮动帧之间的间距。取值为正整数和0,单位为像素。
示例:<iframe src="iframe.html" framespacing=10>
11、内补白属性:
语法:hspace=# vspace=#
说明:该属性指定浮动帧内的边界大小。取值为正整数和0,单位为像素。两个属性应同时应用。
hspace:浮动帧内的左右边界大小;
vspace:浮动帧内的上下边界大小。
示例:<iframe src="iframe.html" hspace=1 vspace=1>
12、外补白属性:
语法:marginheight=# marginwidth=#
说明:该属性指定浮动帧的边界大小。取值为正整数和0,单位为像素。两个属性应同时应用。
marginheight:浮动帧的左右边界大小;
marginwidth:浮动帧的上下边界大小。
示例:<iframe src="iframe.html" marginheight=1 marginwidth=1>

关于“iframe中如何实现去边框和无边框”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

--结束END--

本文标题: iframe中如何实现去边框和无边框

本文链接: https://lsjlt.com/news/80813.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • iframe中如何实现去边框和无边框
    这篇文章将为大家详细讲解有关iframe中如何实现去边框和无边框,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。<iframe src=”you ...
    99+
    2024-04-02
  • iframe的去边框和无边框有什么操作方式
    小编给大家分享一下iframe的去边框和无边框有什么操作方式,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!   <ifr...
    99+
    2024-04-02
  • css如何去掉左边边框
    这篇文章主要介绍了css如何去掉左边边框,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 在css中,可以利用bo...
    99+
    2024-04-02
  • css3如何实现圆角边框和边框阴影
    这篇文章主要讲解了“css3如何实现圆角边框和边框阴影”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css3如何实现圆角边框和边框阴影”吧!border-radius向元素添加圆角边框,cs...
    99+
    2023-07-04
  • css如何实现去掉div边框
    这篇文章给大家分享的是有关css如何实现去掉div边框的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。css去掉div边框的方法是,给div添加border-style属性,并将属性值设置为none,例如【p.no...
    99+
    2023-06-15
  • css3如何实现花边边框
    这篇文章主要介绍“css3如何实现花边边框”,在日常操作中,相信很多人在css3如何实现花边边框问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css3如何实现花边边框”的疑惑...
    99+
    2024-04-02
  • css如何去掉边框
    小编给大家分享一下css如何去掉边框,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!css去掉边框的方法:1、使用“border:none”来去除div的边框;2、...
    99+
    2023-06-14
  • word文本框边框如何去掉
    要去掉Word文本框的边框,可以按照以下步骤操作:1. 选中要去掉边框的文本框。2. 在顶部菜单栏中选择“格式”选项卡。3. 在“格...
    99+
    2023-10-07
    word
  • css3中怎么实现圆角边框和边框阴影
    本篇文章为大家展示了css3中怎么实现圆角边框和边框阴影,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。border-radius向元素添加圆角边框,css3中的。I...
    99+
    2024-04-02
  • css3如何实现边框
    这篇文章将为大家详细讲解有关css3如何实现边框,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在CSS3中.边框多了4种新特性 1.Border-color(设置边框颜色...
    99+
    2024-04-02
  • html如何去掉input边框
    这篇文章主要介绍html如何去掉input边框,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 去掉input边框的方法:1、使用style属性设置“bor...
    99+
    2024-04-02
  • android dialog边框去除白色边框实现思路及代码
    使用样式文件,在values 目录下新建styles.xml文件,编写如下代码: 代码如下: Code highlighting produced by Actipro Co...
    99+
    2022-06-06
    dialog Android
  • css如何去掉输入框的边框
    这篇文章主要介绍css如何去掉输入框的边框,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!css去掉输入框的边框的方法:首先打开相应的HTML代码文件;然后在input标签中直接添加css样式为“style="...
    99+
    2023-06-14
  • css如何去掉元素边框的某一边
    小编给大家分享一下css如何去掉元素边框的某一边,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 方法...
    99+
    2024-04-02
  • css边框变圆角边框怎么实现
    这篇文章主要介绍css边框变圆角边框怎么实现,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 写法:1、给边框添加“border-radius:圆角值;”样...
    99+
    2024-04-02
  • css如何去除表格边框
    这篇文章主要为大家展示了“css如何去除表格边框”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css如何去除表格边框”这篇文章吧。 ...
    99+
    2024-04-02
  • html如何去掉button的边框
    这篇文章主要讲解了“html如何去掉button的边框”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“html如何去掉button的边框”吧! ...
    99+
    2024-04-02
  • css如何去除图片边框
    小编给大家分享一下css如何去除图片边框,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!css是什么意思css是一种用来表现HTML或XML等文件样式的计算机语言,...
    99+
    2023-06-14
  • potpalayer无边框如何设置
    本篇内容介绍了“potpalayer无边框如何设置”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!potpalayer无边框的设置方法:首先,...
    99+
    2023-06-30
  • IE下如何去掉iframe边框且兼容IE7\IE8\IE6以下
    IE下如何去掉iframe边框且兼容IE7\IE8\IE6以下,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。 【...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作