天气预报效果

最新推荐文章于 2022-11-03 15:22:41 发布

qq_34867424

最新推荐文章于 2022-11-03 15:22:41 发布

阅读量224

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/qq_34867424/article/details/105065001

版权

前端开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

																																																																																																																																																																																																																																											@[TOC](这里写自定义目录标题)

前端项目添加天气预报

如何在项目中添加天气预报，API地址如:
http://tianqiapi.com/.

代码实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>	</title>
	<style>	
		div{
			border:1px solid pink;
		}
	</style>
</head>
<body>
	<h3>跳转到插件：<a href="http://tianqiapi.com/">http://tianqiapi.com/</a></h3>
	<h4>示例如下：</h4>

	<div><iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tx&skin=pitaya" frameborder="0" width="100%" height="30" allowtransparency="true"></iframe></div>
	<div><iframe scrolling="no" src="https://www.tianqiapi.com/js/1001.php?skin=pitaya" frameborder="0" width="100%" height="30" allowtransparency="true"></iframe></div>
	<div><iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tw&skin=pitaya" frameborder="0" width="300" height="500" allowtransparency="true"></iframe></div>
	<div><iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tq&skin=pitaya" frameborder="0" width="100%" height="25" allowtransparency="true"></iframe></div>
	<div><iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tg&skin=pitaya" frameborder="0" width="470" height="60" allowtransparency="true"></iframe></div>
	<div><iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tm&skin=pitaya" frameborder="0" width="270" height="24" allowtransparency="true"></iframe></div>
	<div><iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tb&skin=pitaya" frameborder="0" width="350" height="24" allowtransparency="true"></iframe></div>
	<div><iframe scrolling="no" src="https://tianqiapi.com/api.php?style=ts&skin=pitaya" frameborder="0" width="325" height="220" allowtransparency="true"></iframe></div>
	<div><iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tf&skin=pitaya" frameborder="0" width="160" height="24" allowtransparency="true"></iframe></div>
	<div><iframe scrolling="no" src="https://tianqiapi.com/api.php?style=ta&skin=pitaya" frameborder="0" width="260" height="24" allowtransparency="true"></iframe></div>
	<div><iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tp&skin=pitaya" frameborder="0" width="160" height="260" allowtransparency="true"></iframe></div>
	<div><iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tc&skin=pitaya" frameborder="0" width="350" height="24" allowtransparency="true"></iframe></div>

	<div><iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tv&skin=pitaya" frameborder="0" width="255" height="25" allowtransparency="true"></iframe></div>
	<div><iframe scrolling="no" src="https://tianqiapi.com/api.php?style=te&skin=pitaya" frameborder="0" width="200" height="24" allowtransparency="true"></iframe></div>
	<div><iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tk&skin=pitaya" frameborder="0" width="260" height="195" allowtransparency="true"></iframe></div>
	<div><iframe scrolling="no" src="https://tianqiapi.com/api.php?style=ti&skin=pitaya" frameborder="0" width="250" height="270" allowtransparency="true"></iframe></div>
	<div></div>
</body>
</html>

效果：