DDR爱好者之家 Design By 杰米
阅读本文，先仔细阅读网站文章。 Zen Coding 快速编写HTML/CSS代码的实现
复制代码 代码如下:
E
元素名称(div, p);
E#id
使用id的元素(div#content, p#intro, span#error);
E.class
使用类的元素(div.header, p.error.critial). 你也 可以联合使用class和idID: div#content.column.width;
E>N
子代元素(div>p, div#footer>p>span);
E+N
兄弟元素(h1+p, div#header+div#content+div#footer);
E*N
元素倍增(ul#nav>li*5>a);
E$*N
条目编号 (ul#nav>li.item-$*5);
zen coding 替换展现'api'.
zen coding 是一个俄罗斯人写的编辑器(支持大部分现下流行的编辑器)插件，其安装也是非常简单，只要安装插件，然后在项目中拷贝js文件就可以。项目发布时，可删除js文件。它主要任务是把前端工程师从繁琐的html,css结构代码中解放出来，但是里边需要记忆的替换简写非常多，本着眼观十遍不如手动一遍的原则，只能边用边记。
其中的css替换功能也非常的不错。但是里边也有很多冗余无用的替换，本人正在一边使用一边修正原来作者定义在实际生产中不合理的替换。
稍后会一并把zen_settings文件发上来，并对替换的代码做简单的解释说明。
刚开始肯定有点不习惯，这结构还得一边写一边思考。但是习惯后，感觉是非常的便利，可以用“神速”两个字来概括书写时的心情。
至于其它心得体会，本人在使用后会慢慢发出来，以供借鉴。
zen特点是向css选择器进行了深刻的模仿。jquery选择器也是跟css选择符学习的，所以熟悉这二者技术的人会很快上手。其它详细信息关注来源网站。
其中html标签替换学习--源码在其包中zen-settings.js，我列出大部分是常用的，还有一些不常用的没有列出，参考源文件，上一行是手动输入，下一行是按快捷键(alt+E)后zen输出，环境为Aptana 2.0.2：
已经不存在了，文件不可下载。
此文件2009年度最后一次更新，这次更新的主要内容有：
1. width等值后添加单位。
2. 让常用的缩写更加人性化。
3. 还有几个新缩写的添加。
这两天对css替换功能做了疯狂的试验及完善，对其使用频率过高的替换做了简化，对难易记忆的，用重发音区分，这次的变化，也将扩展快捷键改为alt+s，因为本人平常QQ发消息是这两个键，比较习惯，ctlr + enter，左手ctrl 右手enter结合太麻烦，右手ctrl + enter完成时间过长，只好左手完成了。先将经验分享如下，单字母开始为原始元素，下一行为zen扩展输出后元素，依次类推：
在原来zen中css属性与属性值是取首字母冒号然后属性值，我对其写法进行了简化。对常用的属性进行了缩写。比如
复制代码 代码如下:
原来的p是padding，原zen为pos感觉太麻烦，所以缩减为pp，然后是其属性值。
ppa
position:absolute;
ppr
position:relative;
还有类似的：
fl
float:left;
fr
float:right;
cb
clear:both;
db
display:block;
di
display:inline;
dib
display:inline-block;
oh
overflow:hidden;
其它css类：
复制代码 代码如下:
m
margin:;
mt
margin-top:;
mr
margin-right:;
ml
margin-left:;
mb
margin-bottom:;
padding:;
pt,pr,pb,pl同margin
bg
background:url() 0 0 no-repeat;
bg:n
background:none;
bg:x
background:url() 0 0 repeat-x;
bg:y
background:url() 0 0 repeat-y;
bg:ie
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png');
border:1px solid #000;
bd:n
border:none;
bdc
border-color:#000;
c
color:#000;
d
display:block;
f
font-size:12px;
h:;
height:;
w
width:;
d:i
display:inline;
d:b
display:block;
fl
float:left;
fr
float:right;
cl
clear:both;
c:l
clear:left;
c:r
clear:right;
c:n
clear:none;
t
top:;
bt
bottom:;
r
right:;
l
left:;
r
right:;
z
z-index:;
v
visibility:hidden;
o:h
overflow:hidden;
zoo
zoom:1;
m:a
margin:0 auto;
ol
outline:;
q
quotes:;
tc
text-align:center;
tl
text-align:left;
tr
text-align:right;
td
text-decoration:none;
te
text-emphasis:;
to:n
text-outline:none;
whs:n
white-space:normal;
whs:nw
white-space:nowrap;
wob:k
word-break:keep-all;
fz
font-size:12px;
fw
font-weight:bold;
ff
font-family:;
op
opacity:;
c:p
cursor:pointer;
html类：
综合类：div#a+div#b+div.c-$*5+li*10
复制代码 代码如下:
<div id="a"></div>
<div id="b"></div>
<div class="c-11"></div>
<div class="c-22"></div>
<div class="c-33"></div>
<div class="c-44"></div>
<div class="c-55"></div>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
div#width>p#a>p#a>p*10>p#a
复制代码 代码如下:
<div id="width">
<p id="a">
<p id="a">
<p>
<p id="a"></p>
</p>
<p>
<p id="a"></p>
</p>
</p>
</p>
</div>
ul#a>li.c-$*5+li.0>a.title
复制代码 代码如下:
<ul id="a">
<li class="c-1"></li>
<li class="c-2"></li>
<li class="c-3"></li>
<li class="c-4"></li>
<li class="c-5"></li>
<li class="0"><a href="" class="title"></a></li>
</ul>
html:xt
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
aaa
</body>
</html>
更多的
复制代码 代码如下:
cc:ie6
<!--[if lte IE 6]>
aa
<![endif]-->
cc:ie
<!--[if IE]>
<![endif]-->
cc:noie
<!--[if !IE]><!-->
aa
<!--<![endif]-->
link:css
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
a:mail
<a href="mailto:jikeytang@163.com"></a>
meta:utf
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
link
<link rel="stylesheet" href="" />
style
<style type="text/css">body{}</style>
script
<script type="text/javascript">//some coding</script>
script:src
<script type="text/javascript" src="/UploadFiles/2021-04-02/zen_settings.js">img
<img src="/12">iframe
<iframe src="/UploadFiles/2021-04-02/12.html">embed
<embed src="">object
<object data="" type=""></object>
param
<param name="" value="" />
map
<map name=""></map>
area
<area shape="" coords="" href="" alt="" />
form
<form action=""></form>
form:get
<form action="" method="get"></form>
form:post
<form action="" method="post"></form>
label
<label for=""></label>
input
<input type="" />
input:hidden
<input type="hidden" name="" />
input:h
<input type="hidden" name="" />
input:text
<input type="text" name="" id="" />
input:t
<input type="text" name="" id="" />
input:search
<input type="search" name="" id="" />
input:email
<input type="email" name="" id="" />
input:url
<input type="url" name="" id="" />
input:p
<input type="password" name="" id="" />
input:date
<input type="date" name="" id="" />
input:datetime
<input type="datetime" name="" id="" />
input:month
<input type="month" name="" id="" />
input:week
<input type="week" name="" id="" />
input:time
<input type="time" name="" id="" />
input:number
<input type="number" name="" id="" />
input:color
<input type="color" name="" id="" />
input:checkbox
<input type="checkbox" name="" id="" />
input:c
<input type="checkbox" name="" id="" />
input:radio
<input type="radio" name="" id="" />
input:r
<input type="radio" name="" id="" />
input:f
<input type="file" name="" id="" />
input:s
<input type="submit" value="" />
input:i
<input type="image" src="/UploadFiles/2021-04-02/">input:reset
<input type="reset" value="" />
input:button
<input type="button" value="" />
input:b
<input type="button" value="" />
select
<select name="" id=""></select>
option
<option value=""></option>
textarea
<textarea name="" id="" cols="30" rows="10"></textarea>
menu:c
<menu type="context"></menu>
bq
<blockquote></blockquote>
cap
<caption></caption>
optg
<optgroup></optgroup>
opt
<option></option>
fst
<fieldset></fieldset>
leg
<legend></legend>
sect
<section></section>
tarea
<textarea></textarea>
hdr
<header></header>
<!-- expands -->
ol+
<ol>
<li></li>
</ol>
ul+
<ul>
<li></li>
</ul>
dl+
<dl>
<dt></dt>
<dd></dd>
</dl>
map+
<map name=""><area shape="" coords="" href="" alt="" /></map>
table+
<table>
<tr>
<td></td>
</tr>
</table>
tr+
<tr>
<td></td>
</tr>
select
<select name="" id=""></select>
optgroup+
<optgroup><option value=""></option></optgroup>
optg+
<optgroup><option value=""></option></optgroup>
empty
<empty></empty>
常用的快捷键修改为：
Wrap with Abbreviation: alt+x
Toggle Comment: alt+1
Match pair:alt+D
Go to Matching Pair:alt+s
另外是推荐Aptana工具的理由如下：
1. 快捷键支持非常完善。
比如比较常用的删除单行： ctrl + D;
格式化：ctrl + shift + F;
复制单行：ctrl + alt+ pageup
移动单行：alt + pageup
2. js提示是在现下前台可以接受的工具里边是比较强悍的，还有另外一个特点，就是与Firefox中的firebug结合，断点跟踪程序执行流程，即时查看变量的值，是非常不错的。
3. 现下的推荐的最强悍的理由就是与zen coding结合，让你的工作神速如飞。
它的不好之处：
1. 由于工具比较强悍，需要大量的内存消耗，但是以现下的硬件价格，2G的内存基本可以接受。
2. 虽然现在最新版的2.0.2是纯绿色版的，但是安装之前必须要安装sun的jdk，这个东西比较头痛，配置比较多。纯前台人员肯定看的云里雾里的。
3. 内置提供的浏览方式比较慢，纯静态页面，何必那么复杂，直接本地浏览就OK。
注重版权，转载请注明出处http://www.cnblogs.com/jikey/archive/2009/12/19/1628002.html。
复制代码 代码如下:
E
元素名称(div, p);
E#id
使用id的元素(div#content, p#intro, span#error);
E.class
使用类的元素(div.header, p.error.critial). 你也 可以联合使用class和idID: div#content.column.width;
E>N
子代元素(div>p, div#footer>p>span);
E+N
兄弟元素(h1+p, div#header+div#content+div#footer);
E*N
元素倍增(ul#nav>li*5>a);
E$*N
条目编号 (ul#nav>li.item-$*5);
zen coding 替换展现'api'.
zen coding 是一个俄罗斯人写的编辑器(支持大部分现下流行的编辑器)插件，其安装也是非常简单，只要安装插件，然后在项目中拷贝js文件就可以。项目发布时，可删除js文件。它主要任务是把前端工程师从繁琐的html,css结构代码中解放出来，但是里边需要记忆的替换简写非常多，本着眼观十遍不如手动一遍的原则，只能边用边记。
其中的css替换功能也非常的不错。但是里边也有很多冗余无用的替换，本人正在一边使用一边修正原来作者定义在实际生产中不合理的替换。
稍后会一并把zen_settings文件发上来，并对替换的代码做简单的解释说明。
刚开始肯定有点不习惯，这结构还得一边写一边思考。但是习惯后，感觉是非常的便利，可以用“神速”两个字来概括书写时的心情。
至于其它心得体会，本人在使用后会慢慢发出来，以供借鉴。
zen特点是向css选择器进行了深刻的模仿。jquery选择器也是跟css选择符学习的，所以熟悉这二者技术的人会很快上手。其它详细信息关注来源网站。
其中html标签替换学习--源码在其包中zen-settings.js，我列出大部分是常用的，还有一些不常用的没有列出，参考源文件，上一行是手动输入，下一行是按快捷键(alt+E)后zen输出，环境为Aptana 2.0.2：
已经不存在了，文件不可下载。
此文件2009年度最后一次更新，这次更新的主要内容有：
1. width等值后添加单位。
2. 让常用的缩写更加人性化。
3. 还有几个新缩写的添加。
这两天对css替换功能做了疯狂的试验及完善，对其使用频率过高的替换做了简化，对难易记忆的，用重发音区分，这次的变化，也将扩展快捷键改为alt+s，因为本人平常QQ发消息是这两个键，比较习惯，ctlr + enter，左手ctrl 右手enter结合太麻烦，右手ctrl + enter完成时间过长，只好左手完成了。先将经验分享如下，单字母开始为原始元素，下一行为zen扩展输出后元素，依次类推：
在原来zen中css属性与属性值是取首字母冒号然后属性值，我对其写法进行了简化。对常用的属性进行了缩写。比如
复制代码 代码如下:
原来的p是padding，原zen为pos感觉太麻烦，所以缩减为pp，然后是其属性值。
ppa
position:absolute;
ppr
position:relative;
还有类似的：
fl
float:left;
fr
float:right;
cb
clear:both;
db
display:block;
di
display:inline;
dib
display:inline-block;
oh
overflow:hidden;
其它css类：
复制代码 代码如下:
m
margin:;
mt
margin-top:;
mr
margin-right:;
ml
margin-left:;
mb
margin-bottom:;
padding:;
pt,pr,pb,pl同margin
bg
background:url() 0 0 no-repeat;
bg:n
background:none;
bg:x
background:url() 0 0 repeat-x;
bg:y
background:url() 0 0 repeat-y;
bg:ie
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png');
border:1px solid #000;
bd:n
border:none;
bdc
border-color:#000;
c
color:#000;
d
display:block;
f
font-size:12px;
h:;
height:;
w
width:;
d:i
display:inline;
d:b
display:block;
fl
float:left;
fr
float:right;
cl
clear:both;
c:l
clear:left;
c:r
clear:right;
c:n
clear:none;
t
top:;
bt
bottom:;
r
right:;
l
left:;
r
right:;
z
z-index:;
v
visibility:hidden;
o:h
overflow:hidden;
zoo
zoom:1;
m:a
margin:0 auto;
ol
outline:;
q
quotes:;
tc
text-align:center;
tl
text-align:left;
tr
text-align:right;
td
text-decoration:none;
te
text-emphasis:;
to:n
text-outline:none;
whs:n
white-space:normal;
whs:nw
white-space:nowrap;
wob:k
word-break:keep-all;
fz
font-size:12px;
fw
font-weight:bold;
ff
font-family:;
op
opacity:;
c:p
cursor:pointer;
html类：
综合类：div#a+div#b+div.c-$*5+li*10
复制代码 代码如下:
<div id="a"></div>
<div id="b"></div>
<div class="c-11"></div>
<div class="c-22"></div>
<div class="c-33"></div>
<div class="c-44"></div>
<div class="c-55"></div>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
div#width>p#a>p#a>p*10>p#a
复制代码 代码如下:
<div id="width">
<p id="a">
<p id="a">
<p>
<p id="a"></p>
</p>
<p>
<p id="a"></p>
</p>
</p>
</p>
</div>
ul#a>li.c-$*5+li.0>a.title
复制代码 代码如下:
<ul id="a">
<li class="c-1"></li>
<li class="c-2"></li>
<li class="c-3"></li>
<li class="c-4"></li>
<li class="c-5"></li>
<li class="0"><a href="" class="title"></a></li>
</ul>
html:xt
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
aaa
</body>
</html>
更多的
复制代码 代码如下:
cc:ie6
<!--[if lte IE 6]>
aa
<![endif]-->
cc:ie
<!--[if IE]>
<![endif]-->
cc:noie
<!--[if !IE]><!-->
aa
<!--<![endif]-->
link:css
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
a:mail
<a href="mailto:jikeytang@163.com"></a>
meta:utf
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
link
<link rel="stylesheet" href="" />
style
<style type="text/css">body{}</style>
script
<script type="text/javascript">//some coding</script>
script:src
<script type="text/javascript" src="/UploadFiles/2021-04-02/zen_settings.js">img
<img src="/12">iframe
<iframe src="/UploadFiles/2021-04-02/12.html">embed
<embed src="">object
<object data="" type=""></object>
param
<param name="" value="" />
map
<map name=""></map>
area
<area shape="" coords="" href="" alt="" />
form
<form action=""></form>
form:get
<form action="" method="get"></form>
form:post
<form action="" method="post"></form>
label
<label for=""></label>
input
<input type="" />
input:hidden
<input type="hidden" name="" />
input:h
<input type="hidden" name="" />
input:text
<input type="text" name="" id="" />
input:t
<input type="text" name="" id="" />
input:search
<input type="search" name="" id="" />
input:email
<input type="email" name="" id="" />
input:url
<input type="url" name="" id="" />
input:p
<input type="password" name="" id="" />
input:date
<input type="date" name="" id="" />
input:datetime
<input type="datetime" name="" id="" />
input:month
<input type="month" name="" id="" />
input:week
<input type="week" name="" id="" />
input:time
<input type="time" name="" id="" />
input:number
<input type="number" name="" id="" />
input:color
<input type="color" name="" id="" />
input:checkbox
<input type="checkbox" name="" id="" />
input:c
<input type="checkbox" name="" id="" />
input:radio
<input type="radio" name="" id="" />
input:r
<input type="radio" name="" id="" />
input:f
<input type="file" name="" id="" />
input:s
<input type="submit" value="" />
input:i
<input type="image" src="/UploadFiles/2021-04-02/">input:reset
<input type="reset" value="" />
input:button
<input type="button" value="" />
input:b
<input type="button" value="" />
select
<select name="" id=""></select>
option
<option value=""></option>
textarea
<textarea name="" id="" cols="30" rows="10"></textarea>
menu:c
<menu type="context"></menu>
bq
<blockquote></blockquote>
cap
<caption></caption>
optg
<optgroup></optgroup>
opt
<option></option>
fst
<fieldset></fieldset>
leg
<legend></legend>
sect
<section></section>
tarea
<textarea></textarea>
hdr
<header></header>
<!-- expands -->
ol+
<ol>
<li></li>
</ol>
ul+
<ul>
<li></li>
</ul>
dl+
<dl>
<dt></dt>
<dd></dd>
</dl>
map+
<map name=""><area shape="" coords="" href="" alt="" /></map>
table+
<table>
<tr>
<td></td>
</tr>
</table>
tr+
<tr>
<td></td>
</tr>
select
<select name="" id=""></select>
optgroup+
<optgroup><option value=""></option></optgroup>
optg+
<optgroup><option value=""></option></optgroup>
empty
<empty></empty>
常用的快捷键修改为：
Wrap with Abbreviation: alt+x
Toggle Comment: alt+1
Match pair:alt+D
Go to Matching Pair:alt+s
另外是推荐Aptana工具的理由如下：
1. 快捷键支持非常完善。
比如比较常用的删除单行： ctrl + D;
格式化：ctrl + shift + F;
复制单行：ctrl + alt+ pageup
移动单行：alt + pageup
2. js提示是在现下前台可以接受的工具里边是比较强悍的，还有另外一个特点，就是与Firefox中的firebug结合，断点跟踪程序执行流程，即时查看变量的值，是非常不错的。
3. 现下的推荐的最强悍的理由就是与zen coding结合，让你的工作神速如飞。
它的不好之处：
1. 由于工具比较强悍，需要大量的内存消耗，但是以现下的硬件价格，2G的内存基本可以接受。
2. 虽然现在最新版的2.0.2是纯绿色版的，但是安装之前必须要安装sun的jdk，这个东西比较头痛，配置比较多。纯前台人员肯定看的云里雾里的。
3. 内置提供的浏览方式比较慢，纯静态页面，何必那么复杂，直接本地浏览就OK。
注重版权，转载请注明出处http://www.cnblogs.com/jikey/archive/2009/12/19/1628002.html。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
暂无评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
2024年11月24日
2024年11月24日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]