我是CSS和HTML的一个完全的初学者,我正在为培训构建我的第一个基本页面。
我想做的是根据浏览器窗口的大小制作嵌入的谷歌地图比例。你有什么建议?有没有一种方法可以在CSS类中使用嵌入的代码?你会怎么做?
示例谷歌地图代码:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.pt/maps?f=q&source=s_q&hl=pt-PT&geocode=&q=lisbon,+portugal&aq=&sll=39.399872,-8.224454&sspn=36.11675,86.572266&ie=UTF8&hq=&hnear=Lisboa&t=h&z=11&iwloc=A&ll=38.706932,-9.135632&output=embed"></iframe><br /><small><a href="http://maps.google.pt/maps?f=q&source=embed&hl=pt-PT&geocode=&q=lisbon,+portugal&aq=&sll=39.399872,-8.224454&sspn=36.11675,86.572266&ie=UTF8&hq=&hnear=Lisboa&t=h&z=11&iwloc=A&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