zoukankan      html  css  js  c++  java
  • 伪类的使用之如何在一段文字前面添加一个点

    示例

    HTML内容:

    <div class="sub-cell">

      <p>  

    1.table是个好东西,如果你想使图片和文字对齐,用table的<td>标签控制,可以使他们保持对齐。

    2.table还能解决浮动的居中对齐问题,其实我们用float的话会出现相当多的问题,大多数时候,我觉得可以用table来取代float来控制向右对齐,向左对齐的    问题。

    3.其实表单的对齐用table来控制 ,十分方便。有的时候不同的样式用同一种代码是无法解决的,你可以用width=“100%”或者width=“50px”等不同的方式去试试,也许就能解决。

    以上是我在做项目时自己的总结,如有不对,欢迎大家指正,也可以补充哦。

      </p>

    </div>

    less内容:

    <style>
        .sub-cell {
          background-color: #f7f7f7;
        . px2rem(font-size, 24);
        . px2rem(line-height, 36);
        . px2rem(padding-top, 24);
        . px2rem(padding-right, 40);
        . px2rem(padding-bottom, 32);
        . px2rem(padding-left, 50);
        }
    </style>

    用伪类插入一个点后less代码():

        .sub-cell p{
          background-color: #f7f7f7;
          .px2rem(font-size, 24);
          .px2rem(line-height, 36);
          .px2rem(padding-top,24);
          .px2rem(padding-right, 40);
          .px2rem(padding-bottom, 32);
          .px2rem(padding-left, 50);
          position: relative;
          &::before{
            content :counter(sub-item,disc);
            display: block;
            position: absolute;
            .px2rem(left, 30);
            .px2rem(top, 20);
          }
        }

    前后对比会发现在文字前面加了一个点。

  • 相关阅读:
    关于前端复用的构思
    react-redux单元测试(基于react-addons-test-utils,mocha)
    关于windows下NODE_ENV=test无效的情况解决办法
    javascript柯里化及组合函数~
    如何使用函数式编程?
    redux源码解析-函数式编程
    react案例->新闻移动客户端--(react+redux+es6+webpack+es6的spa应用)
    jQuery高级技巧——性能优化篇
    jQuery高级技巧——DOM操作篇
    使用checkbox实现纯CSS下拉框
  • 原文地址:https://www.cnblogs.com/zhangmei/p/5710701.html
Copyright © 2011-2022 走看看