人工智能uu

这个屌丝很懒，什么也没留下！

热门标签

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

作者：人工智能uu | 2024-07-31 02:42:20

踩

html天气预报静态页面

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

页面展示效果：

bVqSAa

HTML

输入城市：

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

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