知希网络咨询邮箱 咨询邮箱:1951819139 @ qq.com 知希网络咨询热线 咨询热线:19931803719 知希网络微博
您的位置:北京做网站 > SEO资讯 > Zen-coding–高效的XHTML/CSS代码扩展插件

Zen-coding–高效的XHTML/CSS代码扩展插件

时间:2017-07-26 17:20 来源:互联网 作者:北京做网站 浏览次数:

只需你对CSS的挑选器对比了解,就能够运用简略的类似于CSS挑选器的代码高效的编写出XHTML代码。

象这么一句简略的代码:(div#hea>h1#title>a)就能够迅速的拓展成下面这段XHTML代码:

1 <div id="hea">
2     <h1 id="title"><a href=""></a></h1>
3 </div>

这是怎样完成的?在没搞清楚这是怎样回事的时分,你可能会适当利诱。不要紧,先看看下面的在线演示,感触下zen-coding的强壮的地方:

将鼠标的光标移动到你看到的那句代码的结尾然后按“Ctrl+,”(此处的快捷键在各修改器中都不一样,在这儿是Dreamweaver中的快捷键,Notepad++的快捷键是”Ctrl+E”)就能够看到变化了。

是不是有点古怪,没错,即是这么“奇特”,这个功用一样能够在你的修改器中运用,当然,条件是你得装置zen-coding这个插件。

zen-coding的下载地址:http://code.google.com/p/zen-coding/downloads/list

下载与装置:

下载与你的修改器相对应的版别,zen-coding支撑许多多见的修改器,比方Notepad++,Dreamweaver,Aptana。Notepad++5.6.8和Dreamwaver CS5我都测试过,感受不错。假如你是运用Notepad++的话需要把下载的插件解压到Notepad++的plugins目录下面,然后重新启动就能够看到在菜单栏多了一项Zen Coding。而假如你运用的是Dreamwaver,装置成功后会在指令菜单下多出一项Zen Coding。

怎么运用?

zen-coding的运用本来很简略,先看看简略的一些写法:

div#mod

1 <div id="mod"></div>

div.box

1 <div class="box"></div>

div.box1.box2

1 <div class="box1 box2"></div>

div.box1.box2#hello

1 <div class="box1 box2" id="hello"></div>

上面的写法即是id和class的写法,下面的写法就涉及到层级了:

父级嵌套子级:h1>a

1 <h1><a href=""></a></h1>

多级嵌套:div>h1.title>a

1 <div>
2     <h1 class="title"><a href=""></a></h1>
3 </div>

同辈元素的写法:div>a.text1+a.text2

1 <div><a href="" class="text1"></a><a href="" class="text2"></a></div>

给元素增加特点:a[href]

1 <a href=""></a>

多个一样元素的写法:ul>li*2

1 <ul>
2   <li></li>
3   <li></li>
4 </ul>

按索引生成id:ul>li*#item-$*3

1 <ul>
2   <li id="item-1"></li>
3   <li id="item-2"></li>
4   <li id="item-3"></li>
5 </ul>

多见规划1:ul+

1 <ul>
2   <li></li>
3 </ul>

多见规划2:dl+

1 <dl>
2   <dt></dt>
3   <dd></dd>
4 </dl>

看完了这么多的比方,相信你对zen-coding有了必定的了解了,zen-coding也有许多高档的用法,也能够用在CSS的编写中。

zen-coding也能够把内容给包裹进来,比方写导航条的代码,你能够先把内容写好,然后运用zen-coding拓展成包括内容的代码,在这儿我以Notepad++这个修改器为例,在修改器中先修改好内容,如下图:

接下来运用鼠标将这些内容选中,然后找到Notepad++中的zen-coding菜单,挑选“Wrap with Abbreviation”,这个时分就会弹出一个很小的页面对话框,如图:

1 <ul id="main_nav">
2     <li>
3         <a href="">Home</a>
4         <a href="">About us</a>
5         <a href="">Services</a>
6         <a href="">Contact us</a>
7     </li>
8 </ul>

这么就能够拓展成上面的这段包括了内容的代码,这儿值得注意的是“li*”和“a*”后边并没有跟数量,这么zen-coding就能够依据内容来断定来拓展出多少行代码。

zen-coding应用在CSS中本来也挺简略的,只需记住多见的CSS特点的缩写就行了,比方width的缩写即是w,float的缩写即是fl,编写出缩写后按快捷键就能够拓展成相应的CSS代码。

zen-coding的运用就介绍到这儿,假如你想要了解更具体的阐明,你能够查阅它的官网,也能够留言和北京做网站_知希科技交流。

  • 上一篇:网站优化推广前期要做分析策划
  • 下一篇:做网站需要准备什么资料

  • 转载请注明出处。Zen-coding–高效的XHTML/CSS代码扩展插件 http://www.ezhixi.com/news/340.html
    上一篇链接:http://www.ezhixi.com/news/339.html
    下一篇链接:http://www.ezhixi.com/news/341.html