适用于谷歌地图嵌入代码的大小-CSS/HTML



我是CSS和HTML的一个完全的初学者,我正在为培训构建我的第一个基本页面。

我想做的是根据浏览器窗口的大小制作嵌入的谷歌地图比例。你有什么建议?有没有一种方法可以在CSS类中使用嵌入的代码?你会怎么做?

示例谷歌地图代码:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.pt/maps?f=q&amp;source=s_q&amp;hl=pt-PT&amp;geocode=&amp;q=lisbon,+portugal&amp;aq=&amp;sll=39.399872,-8.224454&amp;sspn=36.11675,86.572266&amp;ie=UTF8&amp;hq=&amp;hnear=Lisboa&amp;t=h&amp;z=11&amp;iwloc=A&amp;ll=38.706932,-9.135632&amp;output=embed"></iframe><br /><small><a href="http://maps.google.pt/maps?f=q&amp;source=embed&amp;hl=pt-PT&amp;geocode=&amp;q=lisbon,+portugal&amp;aq=&amp;sll=39.399872,-8.224454&amp;sspn=36.11675,86.572266&amp;ie=UTF8&amp;hq=&amp;hnear=Lisboa&amp;t=h&amp;z=11&amp;iwloc=A&amp;ll=38.706932,-9.135632" style="color:#0000FF;text-align:left">Ver mapa maior</a></small>

因此,一种选择是简单地将宽度和高度属性更改为百分比。

<iframe width="50%" height="50%"...

另一种选择是去掉这些属性,并在样式表中创建一个CSS元素选择器

iframe{width:50%;height:50%;}

如果你添加了一个类属性,比如:

<iframe class="map"...

您可以进一步指定您的类别:

iframe.map{width:50%;height:50%;}

Sitepoint有一个很好的CSS参考:http://reference.sitepoint.com/css

查看这两个链接。第一个显示代码,第二个显示结果

http://www.leapbeyond.com/ric/scuba/appletdemo/FullScreenMapCode.htm

http://www.leapbeyond.com/ric/scuba/appletdemo/FullScreenMap.htm

最新更新