zoukankan      html  css  js  c++  java
  • css3在页面中插入内容

    A 使用选择器来插入内容

    h2:before{

      content:"前缀";

    }

    h2:after{

      content:"后缀";

    }

    B 指定个别的元素不进行插入

    h2.sample:before{

      content:none;

    }

    2. 插入图像

    A 在标题前插入图像文件

    h2:before{

      content:url(anwy.jpg);

    }

    B alt属性的值作为图像的标题来显示(用不了)

    img:after{

      content:attr(alt);

      display:block;

      text-align:center;

      margin-top:5px;

      font-size:11px;

      font-weight:bold;

      color:black;

    }

    3. 插入编号

    A 多个标题前加入连续编号

    div:before{

      content:counter(divCounter);

    }

    div{

      counter-increment:divCounter;

    }

    B 在项目符号中追加文字

    div:before{

      content:""counter(divCounter)"";

    }

    C 指定编号样式、种类

    div:before{

      content:counter(divCounter,upper-alpha)'.';

      color:blue;

      font-size:16px;

    }

    D 编号嵌套

    div:before{

      content:counter(divCounter,upper-alpha)'.';

      color:blue;

      font-size:16px;

    }

    div{

      counter-increment:divCounter;

      counter-reset:subDivCounter;

    }

    p:before{

      content:counter(subDivCounter)'.';

      margin-left:15px;

     

      font-size:12px;

    }

    p{

      counter-increment:subDivCounter;

    }

    E 字符串两边添加文字嵌套符号

    h3:before{

      content: open-quote;

    }

    h3:after{

      content: close-quote;

    }

    h3{

      quotes:"""";

    }

     

    disc | circle圆圈 | square正方形 | decimal数字 | decimal-leading-zero 十进制数| lower-roman 小写罗马文字| upper-roman 大写罗马文字| lower-greek小写希腊字母 | lower-latin小写拉丁文 | upper-latin 大写拉丁文| armenian亚美尼亚数字 | georgian乔治亚数字 | lower-alpha小写英文字母 | upper-alpha大写英文字母 | none | inherit继承

  • 相关阅读:
    flutter常用内置动画组件
    flutter中的生命周期函数
    Flutter打开第三方应用
    在windows系统搭建并运行一个Flutter项目
    在windows系统搭建Flutter开发环境
    axios的get请求无法设置Content-Type
    解决vue中使用laydate.js选择日期后再修改其他model时日期会被清空问题
    Git commit时提示错误时    解决办法
    CSS3 @font-face属性
    解决webstorm本地IP访问页面出错的问题
  • 原文地址:https://www.cnblogs.com/durenlong/p/7062992.html
Copyright © 2011-2022 走看看