• 当前标签:自动编号

程序开发 H5学习之点缀、自动编号

点缀: <html> <head> <meta charset="UTF-8"> <title>点缀</title> <style> div::before{ content: '这是前缀...'; color: red; font-size: 18px; } div::after{ content: '这是后缀...'; color: green; font-size: 18px; } </style> <body> <div>这里是内容需要增加点缀 点缀不是内容的一部分</div> <!--内容点缀的技术比较常用--> <!--1.点缀的部分不是内容 如果直接写在内容中则会污染内容 导致百度搜索等提取网页受到干扰 2.有时候无法直接修改HTML标签及其中的内容 如标签及其内容是通过服务端程序生成的 这是通过这种技术可以向标签中注入 3.点缀可以使用样式控制 但点缀中使用HTML标签无效 会直接显示尖括号--> </body> </html> 自动编号: <html> <head> <meta charset="UTF-8"> <title>自动编号</title> <style> body{ /*counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。*/ /*conuter 计数 reset 重置*/ counter-reset: myh2 -1; /*自定义名+空格+初始值*/ } h2:before{ /*counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。*/ /*increment 增加*/ counter-increment: myh2; /*CSS counter计数器(content目录序号自动递增)详解 http://www.zhangxinxu.com/wordpress/2014/08/css-counters-automatic-number-content/ */ content: counter(myh2)':'; } section{ counter-reset: myh3; } h3{ padding-left: 40px; } h3:before{ counter-increment: myh3; content: counter(myh2)'.'counter(myh3)':'; } section>section{ counter-reset: myh4; } h4{ padding-left: 80px; } h4:before{ counter-increment: myh4; content: counter(myh2)'.'counter(myh3)'.'counter(myh4)':'; } </style> <body> <h1>个人简历</h1> <h2>基本信息</h2> <section> <h2>专业技能</h2> <section> <h3>精通HTML5</h3> <h4>HTML基本架构</h4> <h4>文本标签</h4> <h4>其他高级标签</h4> </section> <section> <h3>精通CSS3</h3> <h4>样式</h4> <h4>字体</h4> </section> <h3>精通JavaScript</h3> <h3>精通大数据</h3> </section> <h2>求职意向</h2> <h2>项目经验</h2> <h2>教育经历</h2> </body> </html>

2017-04-12 23:29:12 66 0 0
阅读详情
  • 1
前往