制作个天气页面，静态页面做好了，可以没找到合适的api，所以那个js文件没写完。
代码呈上：
<html>
<head>
<meta charset="UTF-8">
<title>天气</title>
<style>
body{
width: 100%;
height: 100%;
margin: 0;
background-color: rgb(114, 173, 224);
background-image: linear-gradient(to bottom,rgb(12,104,188),rgb(114, 173, 224));
}
header{
text-align: center;
color: white;
font-size: 19px;
line-height: 50px;
}
main .icon{
height: 128px;
background-image: url(days/fog.png);
background-repeat: no-repeat;
background-position: center center;
margin: 40px;
}
main .tempers{
text-align: center;
color: white;
font-size: 30px;
font-family: 'Arial';
}
main sup{
font-size: 19px;
}
main .weather{
text-align: center;
color: white;
font-size: 17px;
}
main .wind{
text-align: center;
color: white;
font-size: 13px;
line-height: 200%;
}
main .current{
text-align: center;
color: white;
font-size: 17px;
}
footer{
width:90%;
color: white;
margin: 100px auto;
font-size: 13px;
text-align: center;
}
section{
width: 33.33333333333333333333333333333333333333333333333333333333333333333333333333333333%;
border-right: 1px solid #aaf;
float: left;
box-sizing: border-box;
}
section:nth-child(3){
border: none;
}
section .icon{
height: 60px;
background-image: url(days/qing.png);
background-repeat: no-repeat;
background-size: 60px;
background-position: center center;
margin: 15px 0;
opacity: 0.7;
}
</style>
</head>
<body>
<header>海口市</header>
<main>
<div class="icon"></div>
<div class="tempers"><span>-13-2</span><sup>℃</sup></div>
<div class="weather">小雪</div>
<div class="wind">微风</div>
<div class="current">实时温度：13℃，空气指数 135 轻度污染</div>
</main>
<footer>
<section>
<div class="week">周三</div>
<div class="icon"></div>
<div class="temper">13-5℃</div>
<div class="weather">晴</div>
<div class="wind">微风</div>
</section>
<section>
<div class="week">周四</div>
<div class="icon"></div>
<div class="temper">13-5℃</div>
<div class="weather">晴</div>
<div class="wind">微风</div>
</section>
<section>
<div class="week">周五</div>
<div class="icon"></div>
<div class="temper">13-5℃</div>
<div class="weather">晴</div>
<div class="wind">微风</div>
</section>
</footer>
<script src="jquery.js"></script>
<script src="index.js"></script>
</body>
</html>
素材下载：2017-03-15weather
