用Html5实现天气预报的原理,HTML5 天气预报应用

jQuery实现输入城市名称，通过yahoo的Weather API来获取当前城市的天气情况。

页面展示效果：

HTML

C

输入城市：

CSS

html,

body {

background-color: #F5F8FC;

height: 100%;

width: 100%;

overflow: hidden;

font-family: 'Open Sans', sans-serif;

}

.info p {

text-align: center;

margin: 10px auto 0px auto;

width: 540px;

color: #4c4c4c;

font-size: 16px;

font-weight: bold;

}

.wrapper {

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

margin: auto;

max-width: 100%;

max-height: 100%;

overflow: auto;

height: 500px;

}

.shadow {

-webkit-box-shadow: 0px 30px 100px 1px rgba(180, 180, 180, 1);

-moz-box-shadow: 0px 30px 100px 1px rgba(180, 180, 180, 1);

box-shadow: 0px 30px 100px 1px rgba(180, 180, 180, 1);

}

.top {

position: relative;

z-index: 0;

background-color: #61c3e6;

height: 300px;

overflow: hidden;

text-align: center;

display: inline-block;

width: 100%;

float: left;

}

.top .btn {

text-align: center;

line-height: 25px;

position: absolute;

color: white;

font-weight: bold;

font-size: 20px;

border-radius: 50%;

border: 1px solid white;

top: 5px;

left: 740px;

cursor: pointer;

text-transform: uppercase;

}

.top img {

position: relative;

z-index: -1;

margin-top: -10px;

margin-bottom: 10px;

width: 275px;

-webkit-filt