• 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>

  • 相关阅读:
    express 项目前后台公用样式 /static/js/bootstrap.min.js
    判断滚动条是否到了底部
    JS如何判断滚动条是否滚到底部
    移动端touch触屏滑动事件、滑动触屏事件监听!
    JS事件监听手机屏幕触摸事件 Touch
    nodejs mysql 连接数据库
    nodejs route的简单使用
    nodejs jade 模板 引擎的使用方法
    nodejs 模板引擎ejs的简单使用(3)
    nodejs 模板引擎ejs的简单使用(2)
  • 原文地址:https://www.cnblogs.com/shixiuxian/p/8523217.html
Copyright © 2020-2023  润新知