【原】插入項(xiàng)目編號(hào)

融水公子 2018-09-09

展開全文

源代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>插入編號(hào)</title>
  <style>
    h1:before{
      content: counter(jshuqi);/*計(jì)數(shù)器*/
    }
    h1{
      counter-increment:jshuqi ;/*元素追加到h1*/
    }
  </style>
</head>
<body>
<h1>插入編號(hào)</h1>
<p>昨日，記者在“趣住”上隨機(jī)與一位房客私聊，對(duì)方開門見山邀請(qǐng)</p>
<h1>插入編號(hào)</h1>
<p>昨日，記者在“趣住”上隨機(jī)與一位房客私聊，對(duì)方開門見山邀請(qǐng)</p>
<h1>插入編號(hào)</h1>
<p>昨日，記者在“趣住”上隨機(jī)與一位房客私聊，對(duì)方開門見山邀請(qǐng)</p>
<h1>插入編號(hào)</h1>
<p>昨日，記者在“趣住”上隨機(jī)與一位房客私聊，對(duì)方開門見山邀請(qǐng)</p>
<h1>插入編號(hào)</h1>
<p>昨日，記者在“趣住”上隨機(jī)與一位房客私聊，對(duì)方開門見山邀請(qǐng)</p>
<h1>插入編號(hào)</h1>
<p>昨日，記者在“趣住”上隨機(jī)與一位房客私聊，對(duì)方開門見山邀請(qǐng)</p>
</body>
</html>
這是實(shí)現(xiàn)的效果：

2引入文字
更改：
h1:before{
  content:'第' counter(jshuqi)'講';/*計(jì)數(shù)器*/
}
h1{
  counter-increment:jshuqi ;/*元素追加到h1*/
}
3指定編號(hào)的樣式
h1:before{
  content: counter(jshuqi)'.';/*計(jì)數(shù)器*/
  color: #06ff29;
  font-size: 48px;
}
h1{
  counter-increment:jshuqi ;/*元素追加到h1*/
} 
4 編號(hào)種類 upper-alpha大寫字母  
h1:before{
  content: counter(jshuqi,upper-alpha)'.';/*計(jì)數(shù)器*/
  color: #06ff29;
  font-size: 48px;
}
h1{
  counter-increment:jshuqi ;/*元素追加到h1*/
} 
換成阿拉伯?dāng)?shù)字：content: counter(jshuqi,upper-roman)'.';/*計(jì)數(shù)器*/
 
 




 
分享知識(shí)，分享快樂！希望中國站在編程之巔！
               ----融水公子
公眾微信號(hào)：rsgz520
360圖書館館號(hào)：rsgz002.360doc.com