`
aideehorn
  • 浏览: 261386 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

DIV 和 iframe的边边

阅读更多

<iframe src="top.html" frameborder="0"    scrolling="no" width="100%" height="80px" style="border:0;"></iframe>

<iframe src="yd.swf" name="ifraComment" width="550" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
style="border-style: none #ffffff solid">
</iframe>

 

----------

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

<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定位方法来模仿实现。

-----------------------

 

 

div属性

 

主要设置如下:

  overflow(溢出控制):visible(默认,可见)、auto(自动)、scroll(显示滚动条);

  width(宽度):数值;

  height(高度):数值;

  color(字体颜色):色彩代码;

  font-size(字体大小):数值;

  line-height(行高):数值;

  border(边框):宽度、类型和颜色,类型主要支持以下几种:none,dotted,dashed,solid,double,groove,ridge,inset,window-inset,outset;

  font-weight(字体粗细):normal、bold、bolder、lighter;

  font-family(字体类型):Arial、Tahoma、Verdana、仿宋_GB2312、黑体、楷体_GB2312、隶书、宋体、幼圆;

  background(背景颜色):色彩代码;

   scrollbar-base-color,scrollbar-face-color,scrollbar-track-color,scrollbar -darkshadow-color,scrollbar-highlight-color,scrollbar-shadow-color,scrollbar -3dlight-color,scrollbar-arrow-color(滚动条各部分的颜色):色彩代码;

  filter:chroma(COLOR=转换成透明的颜色)(chroma过滤器):色彩代码,该颜色将转换成透明效果;

  word-break(断字):normal(默认,正常断字)、keep-all(严格不断字)、break-all(严格断字);

  direction(文字方向):ltr(默认,从左向右)、rtl(从右向左)。

-------

HTML中的Div分区属性

基本属性:width, height, left, top, background-color(当设置为transparent时表示透明)
2、定位属性:position: absolute/relative
absolute时,位置固定;relative时,位置会随着内容的实际情况进行浮动
3、显示属性:display: block/none
block为默认状态,表示显示;none为隐藏
4、优先属性:z-index:n
n表示一个整数(正负均可),有多个Div时n越大,则越靠前显示;
z-index可以理解为z轴的坐标(x,y轴控制左右、上下方位,z轴控制层叠div的前后方位)
只有用绝对定位(position:absolute)时,属性z-index才起作用;
未设置绝对定位(position:absolute)的div,其z-index永远为0;
未设定优先属性(z-index)的div,按照声明的顺序层叠,后声明的盖住先声明的,如果有两个Div属于父子关系,则子div覆盖父div;
5、透明属性:opacity:0.3;(firefox专用);filter:alpha(opacity=30)(IE专用)
两者一起用的时候就将两种主流浏览器都兼容了;上面例子是将Div的透明度设置为30%,可以看出两者的设置稍有不同;Div的文本与背景色均能被透明化!

分享到:
评论

相关推荐

    div被iframe遮住的几种情况及解决方法

    在前端开发过程中,DIV元素被IFRAME遮挡是一个常见的问题,尤其是当页面布局复杂或存在多层嵌套的...通过了解这些知识点,开发人员可以更加灵活地处理DIV和IFRAME在页面布局中可能出现的遮挡问题,提高页面的用户体验。

    用DIV仿iframe框架布局效果

    在这种情况下,我们可以利用CSS和JavaScript来“仿iframe”,通过DIV元素实现相同的功能。这个主题,“用DIV仿iframe框架布局效果”,将深入探讨如何使用纯前端技术来模拟一个可独立滚动的内容区域。 首先,我们...

    div覆盖 iframe

    在IT行业中,网页布局和页面嵌套经常涉及到各种技术,如`div`和`iframe`。标题"div覆盖iframe"暗示了一个应用场景,即利用`div`元素覆盖在`iframe`之上,实现特定的页面展示效果。`div`是HTML中的一个基础容器元素,...

    div,iframe拖动功能

    在网页开发中,实现元素的拖动功能是一项常见的交互设计,尤其在构建用户界面时,如div和iframe的拖动可以提升用户体验。本教程将详细讲解如何为div和iframe元素添加拖动功能。 首先,我们需要了解HTML中的div和...

    html div+Iframe

    在Web开发中,`div`通常用作容器,用于组织和控制页面布局,而`iframe`则允许我们在一个页面中嵌入另一个独立的网页或者任何其他可网页化的资源。 ### `div`元素详解 `div`(division)是一个块级元素,它的主要...

    javascript浮动div,可拖拽div,遮罩层(div和iframe实现)

    - 通过 `style.left` 和 `style.top` 或 `style.pixelLeft` 和 `style.pixelTop` 属性动态设置 Div 的位置。 ### 二、可拖拽 Div 的实现原理 可拖拽 Div 指的是用户可以手动拖动 Div 在页面中的位置。这一功能...

    javascript窗体类似div窗体iframe+div窗体

    在标题中提到的"iframe+div窗体",是指使用IFrame(内联框架)和div元素结合的方式,来实现类似独立窗体的效果。 IFrame是一种HTML标签,它可以在一个HTML文档中嵌入另一个HTML文档。这使得开发者能够在一个页面中...

    DIV CSS iframe 实现的主页布局

    通过Div+CSS 结合Jquery制作的具有左侧菜单、导航菜单、下拉菜单、自动适应窗口大小、自动控制iframe高度,动态修改CSS样式,利用CSS的expression表达式,自动调整div大小,实现div左侧跟随的诸多布局应用。

    多个iframe,其中一个的div能够处于最上层显示

    若要使某个 `iframe` 中的 `div` 显示在其他 `iframe` 之上,我们必须同时调整 `iframe` 和其内的 `div` 的 `z-index`。 步骤如下: 1. 首先,为包含需要置于最上层的 `div` 的 `iframe` 添加一个唯一的 ID,例如 ...

    div+css代替iframe框架并带全屏遮罩加载特效

    然而,随着Web技术的发展,`div+css`布局方式因其灵活性和高效性逐渐成为主流,许多开发者开始寻找用`div+css`替代`iframe`的方法。本文将详细介绍如何使用`div+css`构建框架,并实现全屏遮罩加载特效。 首先,理解...

    div嵌套html不用iframe

    最近在做作业中需要在不用iframe的情况下嵌套页面,所以只好在div中嵌套,用的是jquery方法。 复制代码代码如下: [removed] $(document).ready(function() { $(“#button”).click(function() { $(“#content”)....

    div+iframe弹出窗口:可最大化、最小化,可拖拽,带遮罩功能

    div+iframe做出的弹出窗口,效果等同于模态窗口。弹出窗口可最大化、最小化,可拖拽。带遮罩功能。 解决替换模态窗口,避免模态调模态出现的一系列问题:session丢失,提交返回,调父类方法层级多了或者多页面调的...

    多个iframe,显示其中一个frame中的div,并处于最上层显示

    在网页设计和开发中,有时候我们需要处理多个`iframe`(内联框架)并实现特定的交互效果,例如只显示其中一个`iframe`中的`div`元素,并确保它在所有其他元素之上,即处于最上层显示。这样的需求通常出现在需要创建...

    html5 div模仿iframe布局框架

    使用div标签来给网页划分框架模板。这个框架可以嵌套在任何div标签内,或者iframe框架内

    js弹出div层模拟alert(可以在iframe中使用)

    我们检查当前窗口是否在iframe内,如果是,我们将自定义的div层添加到iframe的body元素中,以确保它覆盖整个页面,而不仅仅是iframe的内容。 现在,你可以像使用原生alert一样使用这个自定义的弹出层: ```...

    以div代替frameset,用css实现仿框架布局

    如果需要实现类似`frameset`的交互效果,可以结合`div`和`iframe`一起使用。 总的来说,通过熟练运用`div`和CSS,我们可以创建出与`frameset`类似甚至更灵活的布局,同时避免了`frameset`带来的问题。这要求开发者...

    拖拽一个iframe中的div 在另一个iframe页面中显示

    标题 "拖拽一个iframe中的div 在另一个iframe页面中显示" 描述了在Web开发中一个交互性的技术,涉及跨框架(iframe)通信和DOM操作。这个技术主要应用于创建富交互的用户界面,允许用户在不同的iframe之间传递和操作...

    可爱的iframe+div

    博主XXiongdi在他们的iteye博客中分享了如何结合使用iframe和div来解决实际问题或者创建特定效果。访问博文链接(https://xxiongdi.iteye.com/blog/407282)可以获取更多详细信息和实战经验。 在提供的文件列表中,...

    Div iFrame 做的面向对象小窗口

    通过综合运用 `Div` 和 `iFrame`,我们可以创建出具有丰富交互和定制功能的面向对象小窗口,为用户提供更高效、便捷的网页体验。在实际开发中,应根据项目需求和用户习惯进行细致的设计和实现。

Global site tag (gtag.js) - Google Analytics