Home > Developer > Web Develop
Html
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8" /> <title></title> <Linkrel= "stylesheet"type= "Text/css"href= "Css/begin.css"/> </Head> <Body> < Section> <H2>Registering personal Information</H2> <ol> <Li>Advance notice Of course progress</Li> <Li>Instant Communication<ol> <Li>Qq</Li> <Li></Li> </ol> </Li> <Li>Courier Pickup Address</Li> </ol> </ Section> < Section> <H2>Familiar with the course production process</H2> < Figure>Course production Process</ Figure> </ Section> < Section> <H2>Watch the Online sample course</H2> < Figure>Dart Language Development</ Figure> < Figure>Docker Knowledge System</ Figure> </ Section> </Body></HTML>
Css
Body{Background-color:#eee;Color:#666;Counter-reset:Xiaobaizhiqian;} Section{width:800px;margin:0 Auto 20px Auto;Background-color:#fff;padding:10px 20px 20px 20px;position:relative;Overflow:Hidden;counter-increment:Xiaobaizhiqian;Counter-reset:Xiaobaizhiqian-pic;}Section P{Line-height:1.5;}Figure::before,li::before,section:before{Font-weight:Bold;Color:#FF5C00;}Section:before{content:" " Novice Task-"counter (Xiaobaizhiqian) " "";Background-color:#35B558;Color:#fff;text-align:Center;position:Absolute;Top:0; Left:0;padding:15px 20px;}@-moz-document Url-prefix (){ Section:before{content: "" "Novice Task-" counter (xiaobaizhiqian,simp-chinese-formal) "" "; }}section H2{position:relative;Top:-20px; Left:168px;}ol{List-style:None;Counter-reset:Xiaobaizhiqian-li;}Li::before{counter-increment:Xiaobaizhiqian-li;content:counters (Xiaobaizhiqian-li, ".") " : ";} Figure{padding:0;margin:0 20px 20px 0;Display:Inline-block;}Figure::before{counter-increment:Xiaobaizhiqian-pic;content:"Figure" Counter (Xiaobaizhiqian-pic,lower-roman);}
Note: To apply the counter on which element, the counter is defined in its parent element, and if there are multiple elements, then the common parent element of these elements defines the counter, as in this case there are multiple sections, if each section is required to use a counter, Then you need to define the counter on the body; For example, in this case, the figure label uses a counter, the counter is defined in the section label, leaving the section label, the figure label counter will start again from 1, if you want to make it coherent, The counter is defined in the body.
To define a counter in a section
Define a counter in body
CSS counter (custom list) Demo
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
