怎么在css3在页面中插入内容
程序员文章站
2023-12-22 12:21:34
...
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. 多个标题前加入连续编号
p:before{ content:counter(pCounter); } p{ counter-increment:pCounter; }
B. 在项目符号中追加文字
p:before{ content:"第"counter(pCounter)"段"; }
C. 指定编号样式、种类
p:before{ content:counter(pCounter,upper-alpha)'.'; color:blue; font-size:16px; }
D. 编号嵌套
p:before{ content:counter(pCounter,upper-alpha)'.'; color:blue; font-size:16px; } p{ counter-increment:pCounter; 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继承
以上就是怎么在css3在页面中插入内容的详细内容,更多请关注其它相关文章!