演示网站 css3卡片样式天气预报app界面
编写代码
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Simple Weather App Design</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="weather-side"> <div class="weather-gradient"></div> <div class="date-container"> <h2 class="date-dayname">星期二</h2><span class="date-day">2019年1月15日</span><i class="location-icon" data-feather="map-pin"></i><span class="location">法国巴黎</span> </div> <div class="weather-container"><i class="weather-icon" data-feather="sun"></i> <h1 class="weather-temp">29°C</h1> <h3 class="weather-desc">晴天</h3> </div> </div> <div class="info-side"> <div class="today-info-container"> <div class="today-info"> <div class="precipitation"> <span class="title">降水量</span><span class="value">0 %</span> <div class="clear"></div> </div> <div class="humidity"> <span class="title">湿度</span><span class="value">34 %</span> <div class="clear"></div> </div> <div class="wind"> <span class="title">风速</span><span class="value">0 km/h</span> <div class="clear"></div> </div> </div> </div> <div class="week-container"> <ul class="week-list"> <li class="active"><i class="day-icon" data-feather="sun"></i><span class="day-name">星期二</span><span class="day-temp">29°C</span></li> <li><i class="day-icon" data-feather="cloud"></i><span class="day-name">星期三</span><span class="day-temp">21°C</span></li> <li><i class="day-icon" data-feather="cloud-snow"></i><span class="day-name">星期四</span><span class="day-temp">08°C</span></li> <li><i class="day-icon" data-feather="cloud-rain"></i><span class="day-name">星期五</span><span class="day-temp">19°C</span></li> <div class="clear"></div> </ul> </div> <div class="location-container"> <button class="location-button"> <i data-feather="map-pin"></i><span>更改位置</span></button> </div> </div> </div> <!--天气图标调用--> <script src="js/feather.min.js"></script> <script src="js/script.js"></script> </body> </html>
注册免费下载
抱歉，隐藏内容须成功 评论本文 后刷新可见！
