JavaScript:天气预报的实现

最新推荐文章于 2024-07-03 22:04:08 发布

爱学习的梵高先生

最新推荐文章于 2024-07-03 22:04:08 发布

阅读量1.8k

点赞数 1

文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_45631296/article/details/115236279

版权

本文介绍了如何利用JavaScript结合CSS和HTML，实现一个天气预报的展示。内容包括两个CSS文件：index.css和reset.css，以及两张图片资源：line.png和logo.png。最终实现了天气预报的视觉效果。

摘要由CSDN通过智能技术生成

1.css文件：
<1>index.css

body {
   
	font-family: 'Microsoft YaHei';
}

.wrap {
   
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	/* background: radial-gradient(#f3fbfe, #e4f5fd, #8fd5f4); */
	/* background:#8fd5f4; */
	/* background: linear-gradient(#6bc6ee, #fff); */
	background: #fff;

}

.search_form {
   
	width: 640px;
	margin: 100px auto 0;
}

.logo img {
   
	display: block;
	margin: 0 auto;
}

.form_group {
   
	width: 640px;
	height: 40px;
	margin-top: 45px;
}

.input_txt {
   
	width: 538px;
	height: 38px;
	padding: 0px;
	float: left;
	border: 1px solid #41a1cb;
	outline: none;
	text-indent: 10px;
}

.input_sub {
   
	width: 100px;
	height: 40px;
	border: 0px;
	float: left;
	background-color: #41a1cb;
	color: #fff;
	font-size: 16px;
	outline: none;
	cursor: pointer;
	position: relative;
}

.input_sub.loading::before {
   
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url('../img/loading.gif');
}

.hotkey {
   
	margin: 3px 0 0 2px;
}

.hotkey a {
   
	font-size: 14px;
	color: #666;
	padding-right: 15px;
}

.weather_list {
   
	height: 200px;
	text-align: center;
	margin-top: 50px;
	font-size