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>

发送评论编辑评论

发送评论 编辑评论

推荐文章

发送评论编辑评论