Home > Article > Web Front-end > iframe displays weather in web page with screenshots of effects
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:
I made the following in the project The effect
For more iframes to display weather in web pages with screenshots of effects, please pay attention to the PHP Chinese website for related articles!