zoukankan      html  css  js  c++  java
  • css之列表数据前加上小方框

    大致结构:

    <template lang="pug">
      .latestNews
            .latestNewsTitle 标题1
            .latestNewsContent
                .News 内容1
                .News 内容2
    </template>
    

      css实现效果:使用::before  对内容前的小方块进行css绘制即可

    .latestNewsContent {
            padding-bottom: 16px;
            .News {
                padding-left: 4px;
                font-size: 12px;
                font-family: DINPro-Medium, DINPro;
                font-weight: 500;
                color: rgba(102, 102, 102, 1);
                line-height: 15px;
                &::before {
                    display: inline-block;
                     4px;
                    height: 8px;
                    background: rgba(30, 147, 243, 1);
                    content: '';
                    /**
        这个指为正的话 小方块就往上, 为负的话,小方块就往下
        */
                    vertical-align: 1px;
                    margin-right: 10px;
                }
            }
        }
    

      

  • 相关阅读:
    .NET 4.6.1 给cookie添加属性
    Blog目录
    1019 数字黑洞
    1018 锤子剪刀布
    1017 A除以B
    1016 部分A+B
    1015 德才论
    1014 福尔摩斯的约会
    1013 数素数
    1012 数字分类
  • 原文地址:https://www.cnblogs.com/yycode01/p/13231641.html
Copyright © 2011-2022 走看看