概述

最近项目里面用到了天气网“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">
        <p class="date-day">25日(今天)</p>
        <ul class="weather-icon">
            <li>
                <img src="css/icon1.png">
            </li>
            <li>
                <img src="css/icon1.png">
            </li>
        </ul>
        <p class="weather-desc">晴转多云</p>
        <p class="weather-desc">
            <span class="high">32℃</span>
             / <span>20℃</span>
        </p>
        <p class="weather-wd">
            <i>➤</i>
            <i>➤</i>
        </p>
        <p class="weather-desc"><3级</p>
    </li>
    <li class="date-box">
        <p class="date-day">25日(今天)</p>
        <ul class="weather-icon">
            <li>
                <img src="css/icon1.png">
            </li>
            <li>
                <img src="css/icon1.png">
            </li>
        </ul>
        <p class="weather-desc">晴转多云</p>
        <p class="weather-desc">
            <span class="high">32℃</span>
            / <span>20℃</span>
        </p>
        <p class="weather-wd">
            <i>➤</i>
            <i>➤</i>
        </p>
        <p class="weather-desc"><3级</p>
    </li>
    <li class="date-box">
        <p class="date-day">25日(今天)</p>
        <ul class="weather-icon">
            <li>
                <img src="css/icon1.png">
            </li>
            <li>
                <img src="css/icon1.png">
            </li>
        </ul>
        <p class="weather-desc">晴转多云</p>
        <p class="weather-desc">
            <span class="high">32℃</span>
            / <span>20℃</span>
        </p>
        <p class="weather-wd">
            <i>➤</i>
            <i>➤</i>
        </p>
        <p class="weather-desc"><3级</p>
    </li>
    <li class="date-box">
        <p class="date-day">25日(今天)</p>
        <ul class="weather-icon">
            <li>
                <img src="css/icon1.png">
            </li>
            <li>
                <img src="css/icon1.png">
            </li>
        </ul>
        <p class="weather-desc">晴转多云</p>
        <p class="weather-desc">
            <span class="high">32℃</span>
            / <span>20℃</span>
        </p>
        <p class="weather-wd">
            <i>➤</i>
            <i>➤</i>
        </p>
        <p class="weather-desc"><3级</p>
    </li>
    <li class="date-box">
        <p class="date-day">25日(今天)</p>
        <ul class="weather-icon">
            <li>
                <img src="css/icon1.png">
            </li>
            <li>
                <img src="css/icon1.png">
            </li>
        </ul>
        <p class="weather-desc">晴转多云</p>
        <p class="weather-desc">
            <span class="high">32℃</span>
            / <span>20℃</span>
        </p>
        <p class="weather-wd">
            <i>➤</i>
            <i>➤</i>
        </p>
        <p class="weather-desc"><3级</p>
    </li>
    <li class="date-box">
        <p class="date-day">25日(今天)</p>
        <ul class="weather-icon">
            <li>
                <img src="css/icon1.png">
            </li>
            <li>
                <img src="css/icon1.png">
            </li>
        </ul>
        <p class="weather-desc">晴转多云</p>
        <p class="weather-desc">
            <span class="high">32℃</span>
            / <span>20℃</span>
        </p>
        <p class="weather-wd">
            <i>➤</i>
            <i>➤</i>
        </p>
        <p class="weather-desc"><3级</p>
    </li>
    <li class="date-box">
        <p class="date-day">25日(今天)</p>
        <ul class="weather-icon">
            <li>
                <img src="css/icon1.png">
            </li>
            <li>
                <img src="css/icon1.png">
            </li>
        </ul>
        <p class="weather-desc">晴转多云</p>
        <p class="weather-desc">
            <span class="high">32℃</span>
            / <span>20℃</span>
        </p>
        <p class="weather-wd">
            <i>➤</i>
            <i>➤</i>
        </p>
        <p class="weather-desc"><3级</p>
    </li>
</ul>