演示网站 天气预报手机端ui样式代码
编写代码
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <script type="text/javascript" src="js/jquery.min.js"></script> </head> <body> <!--两个图标库--> <link rel="stylesheet" href="css/font-awesome.css"> <link rel="stylesheet" href="css/weather-icons.min.css"> <link rel="stylesheet" href="css/style.css" /> <div class="wrapper"> <p id="forget">别忘了换衣服。 <strong><a href="">城市!</a></strong></p> <div class="align"> <div class="app"> <div id="main"> <!-- Settings Menu --> <div id="introscreen"><img src="svg/578457.svg"></div> <!---- Settings Button --> <span id="btn-right"> <span></span> <span></span> <span></span> <span></span> </span> <!----End Settings Button --> <!-- Info Message--> <div id="info-msg"> <div class="msg-box"> <h1></h1> <p></p> </div> </div> <!--End Info Message--> <div id="settings" class=""> <p id="settings-info"><i class="fa fa-cog" aria-hidden="true"></i> 设置</p> <div class="search-container"> <label> <input type="text" id="search" placeholder="Search City..." required/> <i class="fa fa-search" aria-hidden="true"></i> <button type="button" id="update-button" placeholder="Update">更新</button> </label> </div> <ul> <li> <div class="text"> <p>温度单位</p> </div> <label class="switch"> <input type="checkbox" id="unit"> <div class="slider"> <p class="left"><i class="c" aria-hidden="true">°C</i></p> <p class="right"><i class="f" aria-hidden="true">°F</i></p> </div> </label> <div class="sub-info">选择两个 °C or °F.</div> </li> <li> <div class="text"> <p>气候条件</p> </div> <label class="switch"> <input type="checkbox" id="atm"> <div class="slider"> <p class="left"><i class="fa fa-check" aria-hidden="true"></i></p> <p class="right"><i class="fa fa-times" aria-hidden="true"></i></p> </div> </label> <div class="sub-info">大气的湿度、压力和能见度。 </div> </li> <li> <div class="text"> <p>日出/日落</p> </div> <label class="switch"> <input type="checkbox" id="sun"> <div class="slider"> <p class="left"><i class="fa fa-check" aria-hidden="true"></i></p> <p class="right"><i class="fa fa-times" aria-hidden="true"></i></p> </div> </label> <div class="sub-info">日落/日出时间和总光照时间。</div> </li> <li> <div class="text"> <p>风条件</p> </div> <label class="switch"> <input type="checkbox" id="wind"> <div class="slider"> <p class="left"><i class="fa fa-check" aria-hidden="true"></i></p> <p class="right"><i class="fa fa-times" aria-hidden="true"></i></p> </div> </label> <div class="sub-info">寒冷、风向和风速。</div> </li> <li> <div class="text"> <p>选择一个主题</p> <div class="row"> <span class="green"></span> <span class="turqoise"></span> <span class="blue"></span> <span class="purple"></span> </div> </div> <div class="sub-info">选择所需主题。按“保存”按钮更新主题！</div> </li> </ul> <button type="button" id="save-button" placeholder="Update">保存</button> </div> <!-- End Settings Menu --> <div id="central"> <div id="top-menu-info"> <p id="location"> <i class="fa fa-map-marker" aria-hidden="true"></i> <span>布加勒斯特</span> </p> </div> <div id="temp-div"> <div id="icon-temp"> <p>晴</p> <i class="wi wi-day-cloudy" aria-hidden="true"></i> </div> <p id="current-temp-big"> <span id="ctb">17</span> <span id="ctbicon">°C</span> </p> </div> <div id="weather-menu"> <span href="#" id="weather-menu-btn"> <i class="fa fa-chevron-up" aria-hidden="true"></i> </span> <ul> <li id="atmli"> <p class="li_title">气候条件</p> <div id="humidity" class="col-1"> <i class="wi wi-humidity" aria-hidden="true"></i> <span>湿度 <br> <span id="hd">NaN</span></span> </div> <div id="pressure" class="col-2"> <i class="wi wi-barometer" aria-hidden="true"></i> <span>气压 <br> <span id="pd">NaN</span></span> </div> <div id="visibility" class="col-3"> <i class="wi wi-day-fog" aria-hidden="true"></i> <span>能见度 <br> <span id="vd">NaN</span></span> </div> </li> <li id="sunli"> <p class="li_title">日出/日落</p> <div id="sunrise" class="col-1"> <i class="wi wi-sunrise" aria-hidden="true"></i> <span>日出 <br> <span id="srd">NaN</span></span> </div> <div id="totallight" class="col-2"> <i class="wi wi-time-4" aria-hidden="true"></i> <span>日光照射<br> <span id="td">NaN</span></span> </div> <div id="sunset" class="col-3"> <i class="wi wi-sunset" aria-hidden="true"></i> <span>日落 <br> <span id="ssd">NaN</span></span> </div> </li> <li id="windli"> <p class="li_title">风条件</p> <div id="chill" class="col-1"> <i class="wi wi-thermometer-exterior" aria-hidden="true"></i> <span>寒冷 <br> <span id="cd">NaN</span></span> </div> <div id="direction" class="col-2"> <i class="wi wi-wind from-270-deg" aria-hidden="true"></i> <span>方向 <br> <span id="dd">NaN</span></span> </div> <div id="speed" class="col-3"> <i class="wi wi-strong-wind" aria-hidden="true"></i> <span>风速 <br> <span id="sd">NaN</span></span> </div> </li> <li id="forecastli"> <p class="li_title">9天的预测 </p> <span class="day_left"> <i class="fa fa-chevron-left" aria-hidden="true"></i> </span> <span class="day_right"> <i class="fa fa-chevron-right" aria-hidden="true"></i> </span> <div class="li_row"> <div class="col-1 day10item"> <i class="wi wi-day-sunny" aria-hidden="true"></i> <span>星期一 <br> 20°C</span> </div> <div class="col-2 day10item" > <i class="wi wi-day-cloudy" aria-hidden="true"></i> <span>星期二 <br> 22°C</span> </div> <div class="col-3 day10item"> <i class="wi wi-day-rain" aria-hidden="true"></i> <span>星期三 <br> 15°C</span> </div> <div class="col-1 day10item"> <i class="wi wi-day-sunny" aria-hidden="true"></i> <span>星期四 <br> 20°C</span> </div> <div class="col-2 day10item" > <i class="wi wi-day-cloudy" aria-hidden="true"></i> <span>星期五 <br> 22°C</span> </div> <div class="col-3 day10item"> <i class="wi wi-day-rain" aria-hidden="true"></i> <span>星期六 <br> 15°C</span> </div> <div class="col-1 day10item"> <i class="wi wi-day-sunny" aria-hidden="true"></i> <span>星期一 <br> 20°C</span> </div> <div class="col-2 day10item" > <i class="wi wi-day-cloudy" aria-hidden="true"></i> <span>星期二 <br> 22°C</span> </div> <div class="col-3 day10item"> <i class="wi wi-day-rain" aria-hidden="true"></i> <span>星期三 <br> 15°C</span> </div> </div> <div id="dotmenu"> <span class="currentday"></span> <span></span> <span></span> </div> </li> </ul> </div> </div> </div> </div> </div> </div>
注册免费下载
抱歉，隐藏内容须成功 评论本文 后刷新可见！
