一、固定位置的iframe代码:
<DIV align=center><IFRAME src="http://weather.265.com/weather.htm " frameBorder=0 marginwidth=0 marginheight=0 scrolling=no style="width168:px;height:50px ;" width=168 height=50 scrolling=no ALLOWTRANSPARENCY="true"></IFRAME></DIV>
效果如下:
说明:这是一个嵌入含有天气预报的应用实例。这个效果最常用。其中:
1、"http://weather.265.com/weather.htm" 为嵌入的网页的地址;
2、width="168px" height="50px "为嵌入的网页的宽度和高度,数值越大,范围越大;要隐藏显示嵌入的内容,可把这两个数值设置为 0 ;
3、scrolling="no" 为嵌入的网页的滚动设置,当内容范围大时,可设置为允许滚动为 scrolling="yes"。 ALLOWTRANSPARENCY="true" 为允许透明设置,把true改为no为不透明。下同;
4、frameBorder=0 为嵌入的网页的边框设置,0 表示无边框,1 表示边框粗细,数值越大边框越粗。下同;
5、marginwidth=0 marginheight=0 设置嵌入网页到边距的距离,0 表示无边距。下同;
新浪博客如何添加代码— 博客美容:如何添加自定义模块
二、 可更改嵌入网页内容的位置的iframe代码:
<DIV style="LEFT: 0px; POSITION: absolute; TOP: 0px" align=center>
<IFRAME src="http://blog.sina.com.cn/edaifengliu" frameBorder=0 width=1024 style="width1024:px;height:12000px ;" scrolling=no height=12000 ALLOWTRANSPARENCY="true"></IFRAME>
</DIV>
(效果略)
说明:这是一个在博客首页里嵌入另一个网页的应用实例,要在首页里使用。其奥妙在于 <DIV style="LEFT: 0px; POSITION: absolute; TOP: 0px" align=center> 中的 style="LEFT: 0px; POSITION: absolute; TOP: 0px" 的设置。这个决定各种网页元素的位置的代码设置可以用来更改各种元素在一个网页中的显示位置。其中:
1、 LEFT: 0px 为的数值决定嵌入的网页内容的靠左的距离,数值越大离网页左边界越远;
2、TOP: 0px 为的数值决定嵌入的网页内容的靠上边的距离,数值越大离网页上边界越远;
3、POSITION: absolute; 为嵌入的网页的设置了绝对的位置,相当重要。另外,相对位置的设置是把absolute该为relative,但这个少用为妙。
另:
点击下面打开该网站,选择“注册博客”:
1、为了视觉能谐调,在该博客中发要在其他博客嵌入的文章前,选择白色背景风格简单的模板,并在发文章时,在源代码编辑状态下,把文章的代码套到下面的代码中再粘贴回去,使文章紧靠页面左上角。代码如下:
其中,蓝色部分 的数值是内容的宽度和高度,要根据被嵌入博客页面的大小,调整到能在被嵌入的博客网页中完全显示的大小(新浪博客宽度不要超过 495px )。
2、内容和效果设置好发表后,获取发表文章的地址,使用下面设置好的嵌入代码把网页嵌入到你的博客中:
<DIV align=center><IFRAME style="WIDTH: 496px; HEIGHT: 1525px " marginWidth=0 marginHeight=0 src="http://blog.cersp.com/7901870/1121792.aspx " frameBorder=0 scrolling=no></IFRAME></DIV>
蓝色部分 为嵌入网页的宽度和高度,设置同上;红色部分 是要嵌入的网页内容。