zoukankan      html  css  js  c++  java
  • phpstorm使用zen coding 快速编辑补全html/css代码

    百科定义:

    使用仿CSS选择器的语法来快速开发HTML和CSS ——由Sergey Chikuyonok开发。

    Zen Coding由两个核心组件组成:一个缩写扩展器(缩写为像CSS一样的选择器)和上下文无关的HTML标签对匹配器。




    类型列表
        1、元素名称
        2、元素#ID
        3、元素.样式名
        4、元素>子元素
        5、元素+平级兄弟元素
        6、元素*N批量倍增
        7、元素$*N条目编号


    如何使用?
        输入规则后,在最后一个字符后面按tab键即可
    元素名称
        div
        <div></div>
    元素#ID
        div#userList
        <div id="userList"></div>
    元素.样式名
        p.title
        <p class="title"></p>
    元素>子元素
        ul>li
        <ul>
            <li></li>
        </ul>
    元素+平级兄弟元素
        div+p+h1
        <div></div><p></p><h1></h1>
    元素*N批量倍增
        div*5
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    元素$*N条目编号
        div#id-$*5
        <div id="id-1"></div>
        <div id="id-2"></div>
        <div id="id-3"></div>
        <div id="id-4"></div>
        <div id="id-5"></div>




    综合案例

        div#container>div.left>ul>li#id$*5+div.right>div>h1.title+div.description+div.content>div.page>ul>li*5

       结果:

        <div id="container">
            <div class="left">
                <ul>
                    <li id="id1"></li>
                    <li id="id2"></li>
                    <li id="id3"></li>
                    <li id="id4"></li>
                    <li id="id5"></li>
                    <div class="right">
                        <div>
                            <h1 class="title"></h1>
                            <div class="description"></div>
                            <div class="content">
                                <div class="page">
                                    <ul>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </ul>
            </div>
        </div>

  • 相关阅读:
    模仿JavaAppArguments.java示例,编写一个程序,此程序从命令行接收多个数 字,求和之后输出结果,写出其的设计思想、程序流程图、源程序代码。
    大道至简第二章读后感
    大道至简第一章读后感
    md5实现
    jdk-动态代理
    使用反射复制对象
    java-二分查找法
    java-base64
    cxf框架使用(一)
    Freemarket学习笔记(一)
  • 原文地址:https://www.cnblogs.com/shixiuxian/p/8523217.html
Copyright © 2011-2022 走看看