<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全国城市天气预报</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" href="css/index.css">
<style type="text/css">
.tab{
width: 1200px;
height: 500px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -600px;
margin-top: -250px;
overflow: hidden;
color: rgba(255,255,255,0.8);
}
.tab_head {
width: 100px;
height: 240px;
position: fixed;
left: -100px;
top: 50%;
margin-top: -120px;
z-index: 9
}
.Tomorrow{
width: 1000px;
height: 310px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -500px;
margin-top: -180px;
}
</style>
</head>
<body>
<!-- 背景开始 -->
<video autoplay loop muted>
<source src="video/a0.mp4" type="" >
</video>
<!-- 背景结束 -->
<!-- 头部开始 -->
<div class="header">
<div class="container clearfix">
<div class="header_logo fl">全国城市天气预报</div>
<div class="nav fl">
<ul class="clearfix">
<li><a href="javascript:;">首页</a></li>
<li class="active"><a href="javascript:;">今日天气</a></li>
<li><a href="javascript:;">更多天气</a></li>
<li><a href="javascript:;">新闻资讯</a></li>
<li><a href="javascript:;">联系我们</a></li>
</ul>
</div>
<div class="search clearfix fr">
<span class="location"><a href="map.html" target="_blank">青岛</a></span>
<input type="text" placeholder="请输入地区" value="青岛" id="txt">
<button id="btn" onclick="seach()">切换</button>
</div>
</div>
</div>
<!-- 头部结束 -->
<!-- 伸缩菜单开始 -->
<div class="tab_head" id="div1">
<div class="active">今天天气</div>
<div>未来三天</div>
<div>空气质量</div>
<div>温馨提示</div>
<span>展开</span>
</div>
<!-- 伸缩菜单结束 -->
<!-- 天气区域开始 -->
<div class="tab container clearfix">
<ul class="clearfix">
<li class="show">
<div class="today">
<div class="today_left">
<h1><span class="location">青岛</span>今日天气
<span class="tb_end">[刚刚更新]</span>
</h1>
<div class="td clearfix">
<div id="data" class="fl"></div>
<div id="time" class="fl"></div>
</div>
<div class="weather">
<span class="tmp"></span>℃
<img src="img/1.png" id="img1">
</div>
<div class="weather">
<span class="tmp_min"></span> ~
<span class="tmp_max"></span>℃
</div>
<p>天气：<span class="cond_txt1"></span></p>
<p>空气质量：<span class="qlty"></span></p>
<p>风向：<span class="wind_dir"></span></p>
<p>风力：<span class="wind_sc"></span>级</p>
<h4>温馨提示</h4>
<p><span class="brf">白天天气虽然晴好，但天气凉，您会感觉很冷，不舒适，请注意保暖防寒。</span></p>
</div>
<div class="today_right">
<div>
<p>运动指数</p>
<span class="drsg"></span>
</div>
<div>
<p>洗车指数</p>
<span class="flu"></span>
</div>
<div>
<p>穿衣指数</p>
<span class="sport"></span>
</div>
<div>
<p>钓鱼指数</p>
<span class="trav"></span>
</div>
<div>
<p>防晒指数</p>
<span class="spi"></span>
</div>
<div>
<p>旅游指数</p>
<span class="cw"></span>
</div>
</div>
</div>
</li>
<li>
<div class="Tomorrow clearfix">
<div class="Tomorrow_today">
<h1>今天</h1>
<p class="data1"></p>
<img src="">
<div class="Tomorrow_weather">
<span class="situation">阴</span>
<span class="degrees"></span>
</div>
<div class="wind"></div>
<div class="humidity"></div>
</div>
<div class="Tomorrow_today">
<h1><span></span>明天</h1>
<p class="data1"></p>
<img src="">
<div class="Tomorrow_weather">
<span class="situation">阴</span>
<span class="degrees"></span>
</div>
<div class="wind"></div>
<div class="humidity"></div>
</div>
<div class="Tomorrow_today">
<h1><span></span>后天</h1>
<p class="data1"></p>
<img src="">
<div class="Tomorrow_weather">
<span class="situation">阴</span>
<span class="degrees"></span>
</div>
<div class="wind"></div>
<div class="humidity"></div>
</div>
</div>
</li>
<li><h1 style="text-align: center;font-size: 50px">空气质量空气质量空气质量空气质量空气质量空气质量空气质量空气质量空气质量</h1></li>
<li><h1 style="text-align: center;font-size: 50px">温馨提示温馨提示温馨提示温馨提示温馨提示温馨提示温馨提示温馨提示温馨提示</h1></li>
</ul>
</div>
<!-- 底部开始 -->
<div class="footer">
Design by：
<a href="http://www.lixianliang.top" target="_blank">李先亮</a> 版权所有，违者必究 备案号：
<a href="http://www.beian.miit.gov.cn/" target="_blank">鲁ICP备20000563号</a> 数据来源：
<a href="https://www.heweather.com/" target="_blank">和风天气</a>
</div>
<!-- 底部结束 -->
</body>
</html>
<script src="js/ajax.js"></script>
<script src="js/today.js"></script>
天气.rar （95个子文件） 
js 
map.js 3KB ajax.js 3KB today.js 11KB jquery-1.12.4.js 297KB
map.html 1020B img 
w7.jpg 518KB w5.jpg 530KB
5_2.png 4KB adre.png 6KB w2.jpg 1.11MB w0.jpg 715KB 3.png 4KB w8.jpg 796KB 0.png 4KB 1_1.png 16KB w4.jpg 602KB 5_1.png 4KB w9.jpg 416KB 1.png 17KB w3.jpg 791KB 3_2.png 5KB w6.jpg 683KB 3_1.png 4KB 5.png 4KB 4.png 3KB 2.png 5KB w1.jpg 866KB css reset.css 867B index.css 6KB index0.css 6KB map.css 1KB index.html 7KB icon 309.png 51KB 502.png 23KB 402.png 59KB 500.png 29KB 403.png 65KB 153.png 60KB 317.png 75KB 304.png 60KB 350.png 59KB 400.png 55KB 104.png 58KB 404.png 57KB 405.png 19KB 150.png 46KB 515.png 81KB 303.png 61KB LICENSE 444B 999.png 7KB 154.png 56KB 503.png 33KB 100.png 56KB 318.png 21KB 313.png 54KB 456.png 60KB 310.png 62KB 457.png 59KB 307.png 59KB 305.png 52KB 407.png 61KB 900.png 8KB 306.png 55KB 101.png 72KB 409.png 65KB 311.png 62KB 308.png 10KB 508.png 49KB 510.png 74KB 351.png 61KB 103.png 68KB 102.png 51KB 300.png 60KB 316.png 71KB 406.png 62KB 312.png 62KB 302.png 58KB 499.png 4KB 401.png 55KB 504.png 15KB 507.png 32KB 511.png 27KB 514.png 81KB 314.png 65KB 901.png 7KB 315.png 65KB 410.png 72KB 399.png 5KB 301.png 63KB 509.png 68KB 512.png 33KB 513.png 34KB 501.png 52KB 408.png 63KB video 
a0.mp4 7.37MB资源评论
尘水369
- 粉丝: 1
- 资源: 2
最新资源
- OA办公自动化管理系统（Struts1.2+Hibernate3.0+Spring2+DWR）.rar
- OA办公自动化管理系统（Struts1.2+Hibernate3.0+Spring2+DWR）130224.rar
- shopxx_src.rar
- 聊天系统项目全套技术资料100%好用.zip
- tot-jsp-cms.rar
- s2shDemo.rar
- webdgs.rar
- vijun-1.0-release.rar
- 博客系统网站（JSP+SERVLET+MYSQL）.rar
- 博客系统网站（JSP+SERVLET+MYSQL）130222.rar
- 博客系统(struts+hibernate+spring)130225.rar
- 超市综合管理信息系统.rar
- 数据爬虫项目全套技术资料100%好用.zip
- 车辆管理系统(struts+hibernate+spring+oracle)130225.rar
- 车辆管理系统(struts+hibernate+spring+oracle).rar
- 共创在线考试系统(JSP+SERVLET).rar
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
