概述
最近项目里面用到了天气网“7日天气”的功能，本来想趴一个样式的，可是看了看太费劲，索性自己写吧，分享下。
效果
高仿真，有木有，有木有？？？
代码
- css代码：
@charset "utf-8";
.weather-7d{
margin: 0;
padding: 0;
list-style: none;
width: 600px;
box-shadow: 1px 1px 0 #ccc;
li.date-box{
display: inline-block;
width: calc(100% / 7 - 8px);
border: 1px solid #ffffff;
background: white;
position: relative;
text-align: center;
font-size: 12px;
//日期
.date-day{
font-size: 13px;
font-weight: bold;
padding: 5px 0 10px 0;
}
//图标
.weather-icon{
margin: 0;
padding: 0;
list-style: none;
li{
width: 100%;
display: list-item;
text-align: center;
img{
width: auto;
height: 30px;
}
}
}
//天气描述
.weather-desc{
padding: 5px 0;
span{
&.high{
color:orangered;
}
}
}
.weather-wd{
i{
color: #83a2bc;
font-style: normal;
font-size: 15px;
display: inline-block;
&:first-child{
transform:rotate(-90deg);
}
&:last-child{
margin-left: 2px;
transform:rotate(45deg);
}
}
}
&.active{
border: 2px solid #accfe9;
border-radius: 3px;
&:before,
&:after{
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
left: calc(50% - 2px);
z-index: 9;
}
&:before{
border-top-color: #accfe9;
border-width: 9px;
margin-left: -9px;
}
&:after{
border-top-color: white;
border-width: 6px;
margin-left: -6px;
}
}
}
}- html 代码
<ul class="weather-7d">
<li class="date-box active">
<div class="date-day">25日(今天)</div>
<ul class="weather-icon">
<li>
<img src="css/icon1.png">
</li>
<li>
<img src="css/icon1.png">
</li>
</ul>
<div class="weather-desc">晴转多云</div>
<div class="weather-desc">
<span class="high">32℃</span>
/ <span>20℃</span>
</div>
<div class="weather-wd">
<i>➤</i>
<i>➤</i>
</div>
<div class="weather-desc"><3级</div>
</li>
<li class="date-box">
<div class="date-day">25日(今天)</div>
<ul class="weather-icon">
<li>
<img src="css/icon1.png">
</li>
<li>
<img src="css/icon1.png">
</li>
</ul>
<div class="weather-desc">晴转多云</div>
<div class="weather-desc">
<span class="high">32℃</span>
/ <span>20℃</span>
</div>
<div class="weather-wd">
<i>➤</i>
<i>➤</i>
</div>
<div class="weather-desc"><3级</div>
</li>
<li class="date-box">
<div class="date-day">25日(今天)</div>
<ul class="weather-icon">
<li>
<img src="css/icon1.png">
</li>
<li>
<img src="css/icon1.png">
</li>
</ul>
<div class="weather-desc">晴转多云</div>
<div class="weather-desc">
<span class="high">32℃</span>
/ <span>20℃</span>
</div>
<div class="weather-wd">
<i>➤</i>
<i>➤</i>
</div>
<div class="weather-desc"><3级</div>
</li>
<li class="date-box">
<div class="date-day">25日(今天)</div>
<ul class="weather-icon">
<li>
<img src="css/icon1.png">
</li>
<li>
<img src="css/icon1.png">
</li>
</ul>
<div class="weather-desc">晴转多云</div>
<div class="weather-desc">
<span class="high">32℃</span>
/ <span>20℃</span>
</div>
<div class="weather-wd">
<i>➤</i>
<i>➤</i>
</div>
<div class="weather-desc"><3级</div>
</li>
<li class="date-box">
<div class="date-day">25日(今天)</div>
<ul class="weather-icon">
<li>
<img src="css/icon1.png">
</li>
<li>
<img src="css/icon1.png">
</li>
</ul>
<div class="weather-desc">晴转多云</div>
<div class="weather-desc">
<span class="high">32℃</span>
/ <span>20℃</span>
</div>
<div class="weather-wd">
<i>➤</i>
<i>➤</i>
</div>
<div class="weather-desc"><3级</div>
</li>
<li class="date-box">
<div class="date-day">25日(今天)</div>
<ul class="weather-icon">
<li>
<img src="css/icon1.png">
</li>
<li>
<img src="css/icon1.png">
</li>
</ul>
<div class="weather-desc">晴转多云</div>
<div class="weather-desc">
<span class="high">32℃</span>
/ <span>20℃</span>
</div>
<div class="weather-wd">
<i>➤</i>
<i>➤</i>
</div>
<div class="weather-desc"><3级</div>
</li>
<li class="date-box">
<div class="date-day">25日(今天)</div>
<ul class="weather-icon">
<li>
<img src="css/icon1.png">
</li>
<li>
<img src="css/icon1.png">
</li>
</ul>
<div class="weather-desc">晴转多云</div>
<div class="weather-desc">
<span class="high">32℃</span>
/ <span>20℃</span>
</div>
<div class="weather-wd">
<i>➤</i>
<i>➤</i>
</div>
<div class="weather-desc"><3级</div>
</li>
</ul>技术博客
CSDN：http://blog.csdn.NET/gisshixisheng
博客园：http://www.cnblogs.com/lzugis/
在线教程
https://edu.csdn.net/course/detail/7471
Github
https://github.com/lzugis/
联系方式
| 类型 | 内容 |
|---|---|
| 1004740957 | |
| 公众号 | lzugis15 |
| [email protected] | |
| webgis群 | 452117357 |
| Android群 | 337469080 |
| GIS数据可视化群 | 458292378 |