Home > Developer > Web Develop
Code for HTML
<!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd "><HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"><title>Css_counter</title><style>Body{ /*need a variable or a second parameter an initial value, the second parameter can not, the default is starting from 1, (this unscientific)*/Counter-reset:Test;}Div.num:after{ /*If this element is not set to pseudo-class, there is no effect;*/counter-increment:Test; /*This takes advantage of another CSS3 attribute content*/content:counter (test);Height:40px;}Div.num:before{ /*content properties for CSS3*/content:"This is before PreFix"}div.content{ /*WARN: This content property is invalid;*/content:"Nocontent";}</style></Head><Body> <DL> <DT>Knowledge point 1:</DT> <DD>The Content property in CSS3</DD> <DT>Knowledge Point 2:</DT> <DD>Counter-reset and Counter-increment properties in CSS3</DD> </DL> <Divclass= "num"></Div> <Divclass= "num"></Div> <Divclass= "num"></Div> <Divclass= "num"></Div> <Divclass= "num"></Div> <Divclass= "num"></Div> <Divclass= "num"></Div> <Divclass= "num"></Div> <Divclass= "num"></Div> <Divclass= "num"></Div> <Divclass= "Content"></Div></Body></HTML>
One thing to note is: content and counter can only be used in pseudo-class over there, the usual clear floating also used in pseudo-class content: "";
Reference Links:
Http://www.w3school.com.cn/cssref/pr_gen_counter-reset.asp
http://msdn.microsoft.com/zh-cn/library/gg721754 (v=expression.40). aspx
CSS3 in the counter and content properties, some simple contents display will not need JS to implement the
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
