Home  >  Article  >  Web Front-end  >  iframe displays weather in web page with screenshots of effects

iframe displays weather in web page with screenshots of effects

高洛峰
高洛峰Original
2017-02-25 14:11:411287browse

This article mainly introduces the use of iframe to display weather on web pages. This function is quite practical and easy to implement. Friends who need it can take a look. css:

*{margin:0;padding:0;list-style-type:none;} 
a,img{border:0;} 
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";} 
/* demo */ 
.demo{width:800px;margin:0 auto;} 
.demo p{margin:40px 0 0 0;}


html:

<p class="demo"> 
<p> 
<iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=2&num=5" width="650" height="70" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> 
</p> 
<p> 
<iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=7" style="border:solid 1px red" width="225" height="90" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> 
</p> 
<p> 
<iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=9" width="800" height="60" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> 
</p> 
<p> 
<iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=11" width="500" height="15" frameborder="0"></iframe> 
</p> 
<p> 
<iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=13" width="650" height="221" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> 
</p> 
<p> 
<iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=19" width="800" height="120" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> 
</p> 
</p>


Partial effect:
iframe displays weather in web page with screenshots of effects
I made the following in the project The effect
iframe displays weather in web page with screenshots of effects

For more iframes to display weather in web pages with screenshots of effects, please pay attention to the PHP Chinese website for related articles!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn