技术要点
HTML布局界面。
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<!--引入样式CSS文件-->
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" >
<link href="weather.css" rel="stylesheet" >
<!--引入脚本Javascript文件-->
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
</head>
<body>
...
</body>
</html>
CSS美化界面，设计想要的结构及样式。
html,
body {
background-color: #F5F8FC;
height: 100%;
width: 100%;
overflow: hidden;
font-family: 'Open Sans', sans-serif;
}
...
jQuery实现输入城市名称，通过yahoo的Weather API来获取当前城市的天气情况。
$(function(){
init();
})
function init() {
// 实现code
...
}