插图和自动编号

来源：互联网发布：frontpage下载qc软件编辑：程序博客网时间：2024/06/02 07:50
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>插图和自动编号</title>    <style>        body{            /*counter-reset:重置一个计数器,属性值是一个标识符,用来代表计数器,计数器默认的计数是从0开始*/            counter-reset: pic;        }        figure{            text-align: center;            /*counter-increment:让某一个计数器,计数加1*/            counter-increment: pic;        }        figcaption::before{            /*content()用来获取某一个计数器的计数*/            content: '图' counter(pic) ": ";        }    </style></head><body>    <figure>        <img src="lry.jpg" alt="刘若英">        <figcaption>刘若英,内地著名女歌手</figcaption>        <figcaption lang="en">Ruoying Liu</figcaption>    </figure>    <figure>        <img src="lry.jpg" alt="刘若英">        <figcaption>刘若英,内地著名女歌手</figcaption>        <figcaption lang="en">Ruoying Liu</figcaption>    </figure>    <figure>        <img src="lry.jpg" alt="刘若英">        <figcaption>刘若英,内地著名女歌手</figcaption>        <figcaption lang="en">Ruoying Liu</figcaption>    </figure>    <figure>        <img src="lry.jpg" alt="刘若英">        <figcaption>刘若英,内地著名女歌手</figcaption>        <figcaption lang="en">Ruoying Liu</figcaption>    </figure></body></html>
0 0