ZenCode常用写法总结

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

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

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

[h2title]例子1[/h2title]

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

[h2title]例子2[/h2title]

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

[h2title]例子3[/h2title]

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

[h2title]例子4[/h2title]

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

[h2title]例子5[/h2title]

(#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>

[h2title]例子6[/h2title]

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

[h2title]例子7[/h2title]

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

[h2title]例子8[/h2title]

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

[h2title]例子9[/h2title]

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>

[h2title]例子10(多个属性用,隔开)[/h2title]

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>

版权声明:
作者:Mr.Seaning
链接:https://www.seaning.com/39.html
来源:IT路人
文章版权归作者所有,未经允许请勿转载。

文章结束,喜欢就分享吧
分享
二维码