利用css以及p元素制作图标

云中漫步ZDC

于 2019-11-07 15:12:05 发布

阅读量278

点赞数

分类专栏：城乡一体化信息栅格平台（cig2.0）文章标签： cig2.0

本文链接：https://blog.youkuaiyun.com/qq_34761452/article/details/102955536

版权

城乡一体化信息栅格平台（cig2.0）专栏收录该内容

3 篇文章

订阅专栏

利用css以及p元素制作图标

在这里插入图片描述

// html部分
<div class="processTitleBox">
              <div>
                <div class="processTitleItem">
                  <p>1</p>
                  资源信息
                </div>
                <img src="@/assets/l-img/icon/resourceInformation.png"/>
              </div>
              <div>
                <div class="processTitleItem">
                  <p style="color: #ccc">2</p>
                  信息项填写
                </div>
                <img src="@/assets/l-img/icon/informationItem.png"/>
              </div>
            </div>

//css部分
.processTitleBox > div {
    display inline-block;
    position relative
  }

  .processTitleItem {
    position absolute;
    left: 30px;
    top: 9px;
    display flex;
    justify-content left
    line-height 30px;
    color #fff
    font-size 18px;

    p {
      margin-right 5px;
      text-align center;
      color #2D81F2;
      width 30px;
      height 30px;
      line-height 30px
      background-color: #fff;
      border-radius 15px;
    }
  }