H5 天气预报样式_h5 aweweather

作者：秋刀鱼在做梦 | 2024-07-31 02:34:38

踩

h5 aweweather

本文主要是对h5样式和动画的熟练应用。要想实时显示天气预报，请自行百度...

实现的界面是

html


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>天气预报</title>
	<link rel="stylesheet" href="weather.css">
</head>
<body>
	<header>
		<h2>郑州</h2>
	</header>
	<main>
		<img src="days/snow4.png" alt=""/>
		<p style="font-size:32px;">-13 ~ 2</p>
		<p style="font-size:26px;">小雪</p>
		<p style="font-size:20px;">微风</p>
		<p style="font-size:16px;">实时温度:13度  空气质量 13s 轻度污染</p>
	</main>
	<footer>
		<div>
			<p>周二</p>
			<img src="days/sleet.png" >
			<p>13-5</p>
			<p style="font-size:16px;">晴</p>
			<p>微风</p>
		</div>
		<div class="tom1">
			<p>周三</p>
			<img src="days/zhongyu.png">
			<p>13-5</p>
			<p style="font-size:16px;">晴</p>
			<p>微风</p>
		</div>
		<div class="tom2">
			<p>周四</p>
			<img src="days/qing.png">
			<p>13-5</p>
			<p style="font-size:16px;">晴</p>
			<p>微风</p>
		</div>
	</footer>
	<div class="clear"></div>
</body>
<script src="flake.js"></script>
</html>

天气预报的样式


html{
	height: 100%;
}
body{
	height: 100%;
	margin: 0;
	background: linear-gradient(to bottom,cornflowerblue,white) no-repeat;
	font-family: "微软雅黑";
	overflow: hidden; 
}
header{
	text-align: center;
	width: 100%;
	height: 100px;
	color: #fff;
}
main{
	text-align: center;
	color: #fff;
}
/*标签的宽度= 边框的宽度+内容的宽度+内边距
其中 设定的宽度为内容的宽度
当设定的box-size:border-box的时候,标签的宽度就等于设定的宽度*/
footer{
	width: 70%;
	color: #fff;
	padding-top: 100px;
	margin: 0px auto;
}
p{
	line-height: 10px;
}
footer div{
	text-align: center;
	width: 33.33%;
	float: left;
	border-right: 1px solid #fff;
	box-sizing: border-box;
}
footer div:nth-child(3){
	border: 0;
}
/*.tom{
	text-align: center;
	width: 33.33%;
	float: left;
	border-right: 1px solid #fff;
	box-sizing: border-box;
	
}
.tom1{ 
	text-align: center;
	float: left;
	width: 33.33%;
	border-right: 1px solio0-d #fff;
	box-sizing: border-box;
}
.tom2{
	text-align: center;
	float: left;
	width: 33.33%;
	box-sizing: border-box;
}*/
div img{
	height: 64px;
	width: 64px;
}
.clear{
	clear: both;
}

动态雪花的js


function flake(){
	// 创建img标签
	var f = document.createElement("img");
	// 获取浏览器的高度和宽度
	var h = document.documentElement.clientHeight;
	var w = document.documentElement.clientWidth;
	var left =w * Math.random();
	var top = h * Math.random();
	f.src = "flake.png";
	f.style.position = "absolute";
	f.style.left = left + "px";
	f.style.top = top + "px";
	//随机按比例缩放
	f.style.transform = "scale(" + Math.random() / 2 +")";
	f.style.zIndex = "-100";
	// 给body添加img标签
	document.body.appendChild(f);
	function down(){
		top = top + 10;
		left = left + 5;
		if(top > h ) top = -100;
		if(left > w) left = -100;
		f.style.left = left + "px";
		f.style.top = top + "px";	
	}
	setInterval(down,100);
	
}
 flake();
 for(var i=0; i<200;i++){
	  flake();
 }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/秋刀鱼在做梦/article/detail/906590