百度首页“天气预报”静态页面样式资源-CSDN文库

共2个文件

html：1个

css：1个

天气静态页面

5星 · 超过95%的资源需积分: 44 151 浏览量 2015-01-15 17:14:27 上传评论 3 收藏 4KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

百度天气_静态页面.rar （2个子文件）

weather.html 11KB

weather.css 6KB

<!DOCTYPE html> <html> <head>  <meta name="viewport" content="initial-scale=0.8, width=470, height=424, minimum-scale=0.6, maximum-scale=1.0, user-scalable=yes" charset="UTF-8" http-equiv="Content-Type" /> <title>天气预报</title> <link type="text/css" rel="stylesheet" href="weather.css" /> <script type="text/javascript">  </script> </head> <body> <div class="op_weather4_twoicon_container_div"> <div class="op_weather4_twoicon" style="height: 424px;"> <a weath-eff="[]" weath-bg="cloudy" target="_blank" class="op_weather4_twoicon_today OP_LOG_LINK"> <p class="op_weather4_twoicon_date">南京    周四 01月15日农历十一月廿五 (实时：6℃)</p> <div style="background: url(http://www.baidu.com/aladdin/img/new_weath/bigicon/3.png); *background: none; *filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://www.baidu.com/aladdin/img/new_weath/bigicon/3.png)" class="op_weather4_twoicon_icon"></div> <p class="op_weather4_twoicon_temp"> 8 ~ 4<sup>℃</sup> </p> <p class="op_weather4_twoicon_weath">阴转多云</p> <p class="op_weather4_twoicon_wind">北风微风</p>   <p class="op_weather4_twoicon_pm25"> 空气质量<em style="background: #afdb00"><b>60</b> 轻度污染</em> </p> </a> <a weath-eff="{"halo":1}" weath-bg="daytime" target="_blank" style="left: 188px" class="op_weather4_twoicon_day OP_LOG_LINK"> <div class="op_weather4_twoicon_hover"></div> <div class="op_weather4_twoicon_split"></div> <p class="op_weather4_twoicon_date">周五</p> <p class="op_weather4_twoicon_date_day">01月16日</p> <div style="background: url(http://www.baidu.com/aladdin/img/new_weath/icon/5.png); *background: none; *filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://www.baidu.com/aladdin/img/new_weath/icon/5.png)" class="op_weather4_twoicon_icon"></div> <p class="op_weather4_twoicon_temp">12 ~ 0℃</p> <p class="op_weather4_twoicon_weath">多云转晴</p> <p class="op_weather4_twoicon_wind">西北风3-4级</p> </a> <a weath-eff="{"halo":1}" weath-bg="daytime" style="left: 276px" class="op_weather4_twoicon_day OP_LOG_LINK"> <div class="op_weather4_twoicon_hover"></div> <div class="op_weather4_twoicon_split"></div> <p class="op_weather4_twoicon_date">周六</p> <p class="op_weather4_twoicon_date_day">01月17日</p> <div style="background: url(http://www.baidu.com/aladdin/img/new_weath/icon/1.png); *background: none; *filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://www.baidu.com/aladdin/img/new_weath/icon/1.png)" class="op_weather4_twoicon_icon"></div> <p class="op_weather4_twoicon_temp">8 ~ 0℃</p> <p class="op_weather4_twoicon_weath">晴转多云</p> <p class="op_weather4_twoicon_wind">东北风3-4级</p> </a> <a weath-eff="{"halo":1}" weath-bg="daytime" style="left: 364px" class="op_weather4_twoicon_day OP_LOG_LINK"> <div class="op_weather4_twoicon_hover"></div> <div class="op_weather4_twoicon_split"></div> <p class="op_weather4_twoicon_date">周日</p> <p class="op_weather4_twoicon_date_day">01月18日</p> <div style="background: url(http://www.baidu.com/aladdin/img/new_weath/icon/1.png); *background: none; *filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://www.baidu.com/aladdin/img/new_weath/icon/1.png)" class="op_weather4_twoicon_icon"></div> <p class="op_weather4_twoicon_temp">10 ~ -1℃</p> <p class="op_weather4_twoicon_weath">晴</p> <p class="op_weather4_twoicon_wind">西风微风</p> </a>  <div bg-name="cloudy" class="op_weather4_twoicon_bg" style="display:none;background-image:-webkit-linear-gradient(top,#485663,#a1b8ca);background-image:-moz-linear-gradient(top,#485663,#a1b8ca);background-image:-o-linear-gradient(top,#485663,#a1b8ca);background-image:-ms-linear-gradient(top,#485663,#a1b8ca);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=#485663,EndColorStr=#a1b8ca); z-index: 0.01; opacity: 1; height: 424px;"> </div>  <div bg-name="daytime" class="op_weather4_twoicon_bg" style=";background-image:-webkit-linear-gradient(top,#0d68bc,#72ade0);background-image:-moz-linear-gradient(top,#0d68bc,#72ade0);background-image:-o-linear-gradient(top,#0d68bc,#72ade0);background-image:-ms-linear-gradient(top,#0d68bc,#72ade0);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=#0d68bc,EndColorStr=#72ade0); z-index: 2; opacity: 1; height: 424px;"> </div> </div> <div class="op_weather4_xiala"> <div style="display: block;" class="op_weather4_xltabcontent"> <div class="op_weather4_xltab c-clearfix"> <ul> <li data-click="{fm:'beha'}" class="OP_LOG_BTN op_weather4_xlactive"><span class="op_weather4_xlfilter">相关指数</span></li> </ul> </div> <div style="display: block;" class="op_weather4_xlcon"> <ul class="op_weather4_xltop c-clearfix"> <li class="op_weather4_xlzs" onmouseout="disTip('tip_chuanyi','none');" onmouseover="disTip('tip_chuanyi','block');" style="position: relative; z-index: 6;"><div class="op_weather4_xlzstit">穿衣：较冷</div> <div class="op_weather4_xltip" id="tip_chuanyi" onclick="clkTip(this);" style="width: 200px; top: 27px; left: 0px; z-index: 1000; display: none;"> <span class="op_weather4_xlico" style="left: 35px;"></span> <div class="op_weather4_xlcont"> <div class="op_weather4_xltiptitle">穿衣指数：较冷</div> <div class="op_weather4_xltipcontent">建议着厚外套加毛衣等服装。年老体弱者宜着大衣、呢外套加羊毛衫。</div> </div> </div></li> <li class="op_weather4_xlzs" onmouseout="disTip('tip_xiche','none');" onmouseover="disTip('tip_xiche','block');" style="position: relative; z-index: 5;"><div class="op_weather4_xlzstit">洗车：较适宜</div> <div class="op_weather4_xltip" id="tip_xiche" onclick="clkTip(this);" style="width: 200px; top: 27px; left: 0px; z-index: 1000; display: none;"> <span class="op_weather4_xlico" style="left: 35px;"></span> <div class="op_weather4_xlcont"> <div class="op_weather4_xltiptitle">洗车指数：较适宜</div> <div class="op_weather4_xltipcontent">较适宜洗车，未来一天无雨，风力较小，擦洗一新的汽车至少能保持一天。</div> </div> </div></li> <li class="op_weather4_xlzs" onmouseout="disTip('tip_lvyou','none');" onmouseover="disTip('tip_lvyou','block');" style="position: relative; z-index: 4;"><div class="op_weather4_xlzstit">旅游：适宜</div> <div class="op_weather4_xltip" id="tip_lvyou" onclick="clkTip(this);" style="width: 200px; top: 27px; left: 0px; z-index: 1000; display: none;"> <span class="op_weather4_xlico" style="left: 35px;"></span> <div class="op_weather4_xlcont"> <div class="op_weather4_xltiptitle">旅游指

评论收藏

内容反馈