码迷,mamicode.com
首页 > Web开发 > 详细

html记录

时间:2017-12-12 22:01:07      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:comm   block   add   back   body   gpo   day   ext   inline   

1.如果li横排用display:inline-block; 则li之间不能有间隔 必须连着一起,所以才一般用float:left;

.today-wrap{
  position: relative;
  background: $white;
  height: 220px;
  padding-top: 40px;
  padding-bottom:40px;
  li{
    float: left;
    width: 50%;
    &:last-child{
      &:before{
        content: ‘‘;
        position: absolute;
        left:50%;
        width: 1px;
        height: 80%;
        top:20px;
        background:$grey;
      }
    }
  }
  .today-recommend{
    text-align: center;
    color: $blue;
    .recommend-num{
      font-size: 56px;
    }
    .recommend-unit{
      font-size: 24px;
    }
    .recommend-name{
      font-size: 26px;
      color:$grey;
    }
  }

}

  

<div class="today-wrap">
        <ul>
            <li class="today-recommend">
                <a href="#">
                    <div>
                        <span class="recommend-num">32</span>
                        <span class="recommend-unit">笔</span>
                    </div>
                    <div class="recommend-name">
                        今日推广订单
                    </div>
                </a>
            </li>
            <li class="today-recommend">
                <a href="#">
                    <div>
                        <span class="recommend-num">260.00</span>
                        <span class="recommend-unit">元</span>
                    </div>
                    <div class="recommend-name">
                        今日获得收益
                    </div>
                </a>
            </li>
        </ul>

    </div>

  

html记录

标签:comm   block   add   back   body   gpo   day   ext   inline   

原文地址:http://www.cnblogs.com/tonnytong/p/8028829.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!