ZenCode常用写法总结

2020年04月22日 296点热度 8人点赞 0条评论

ZenCoding是一个html简写的语法,可以最快速的生成html

它和js、css有共同的地方就是选择器,它的基本语法如下

#:代表id
.:代表class
>:代表子
+:代表兄弟
[]:代表属性
{}:代表文本内容
$$:一个$代表从1开始,两个代表01

例子1

div#demo
<div id="demo"></div>

例子2

div.demo
<div class="demo"></div>

例子3

.nav>ul.menu>li.list*3
<div class="nav">
    <ul class="menu">
        <li class="list"></li>
        <li class="list"></li>
        <li class="list"></li>
    </ul>
</div>

例子4

.content1+.content2+.content3
<div class="content1"></div>
<div class="content2"></div>
<div class="content3"></div>

例子5

(#one>ui.nav>li.list*2)+(#two>p>span.content)
<div id="one">
    <ui class="nav">
        <li class="list"></li>
        <li class="list"></li>
    </ui>
</div>
<div id="two">
    <p><span class="content"></span></p>
</div>

例子6

span.color{red}
<span class="color">red</span>

例子7

a.to_main[href='www.baidu.com']{百度}
<a href="www.baidu.com" class="to_main">百度</a>

例子8

.one.two.three
<div class="one two three"></div>

例子9

ul.menu>li.item${item_$$}*3
<ul class="menu">
    <li class="item1">item_01</li>
    <li class="item2">item_02</li>
    <li class="item3">item_03</li>
</ul>

例子10(多个属性用,隔开)

form>.control-group>(.radio>(label>input[type="radio",name="only"]{测试$}))*4
<form action="">
    <div class="control-group">
        <div class="radio"><label for=""><input type="radio" name="only">测试1</label></div>
        <div class="radio"><label for=""><input type="radio" name="only">测试2</label></div>
        <div class="radio"><label for=""><input type="radio" name="only">测试3</label></div>
        <div class="radio"><label for=""><input type="radio" name="only">测试4</label></div>
    </div>
</form>

IT路人

一入IT深似海,从此妹子为路人

文章评论