Home > Web Front-end > HTML Tutorial > Teach you how to use iframe to display weather on a web page_html/css_WEB-ITnose

Teach you how to use iframe to display weather on a web page_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:56:49
Original
1332 people have browsed it

Source: http://www.ido321.com/921.html

css:

   1: *{margin:0;padding:0;list-style-type:none;}
Copy after login
   2: a,img{border:0;}
Copy after login
   3: body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
Copy after login
   4:
Copy after login
   5: /* demo */
Copy after login
   6: .demo{width:800px;margin:0 auto;}
Copy after login
   7: .demo div{margin:40px 0 0 0;}
Copy after login

html:

   1: <div class="demo">
Copy after login
   2:
Copy after login
   3:    <div>
Copy after login
   4:        <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>
Copy after login
   5:    </div>
Copy after login
   6:
Copy after login
   7:    <div>
Copy after login
   8:        <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>
Copy after login
   9:    </div>
Copy after login
  10:
Copy after login
  11:    <div>
Copy after login
  12:        <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>
Copy after login
  13:    </div>
Copy after login
  14:
Copy after login
  15:    <div>
Copy after login
  16:        <iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=11" width="500" height="15" frameborder="0"></iframe>
Copy after login
  17:    </div>
Copy after login
  18:
Copy after login
  19:    <div>
Copy after login
  20:        <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>
Copy after login
  21:    </div>
Copy after login
  22:
Copy after login
  23:    <div>
Copy after login
  24:        <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>
Copy after login
  25:    </div>
Copy after login
  26: /div>
Copy after login

Part of the effects:

I made the following effect in the project

Demo address: http://jsfiddle.net/2yfL8x0g/embedded/result/

The next article will tell you how to get the lunar date: http://www.ido321 .com/926.html

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template