saber 酱的抱枕

Fly me to the moon

10/7
2014
学习

字号、pt、px、em对照表和换算方法

由于wp编辑器的字体大小设置是pt单位,于是百度了这个对照表

初号     42pt     56px     3.5em
小初     36pt     48px     3em
        34pt     45px     2.75em
        32pt     42px     2.55em
        30pt     40px     2.45em
        29pt     38px     2.35em
        28pt     37px     2.3em
        27pt     36px     2.25em
一号     26pt     35px     2.2em
        25pt     34px     2.125em
小一     24pt     32px     2em
二号     22pt     29px     1.8em
        20pt     26px     1.6em
小二     18pt     24px     1.5em
        17pt     23px     1.45em
三号   16pt     22px     1.4em
小三    15pt     21px     1.3em
      14.5pt     20px     1.25em
四号     14pt     19px     1.2em
      13.5pt     18px     1.125em
        13pt     17px     1.05em
小四     12pt     16px     1em
        11pt     15px     0.95em
五号   10.5pt     14px     0.875em
        10pt     13px     0.8em
小五      9pt     12px     0.75em
         8pt     11px     0.7em
六号    7.5pt     10px     0.625em
         7pt      9px     0.55em
小六    6.5pt      8px     0.5em
七号    5.5pt      7px     0.4375em
八号      5pt      6px     0.375em

pt (point,磅) 是一个物理长度单位,指的是72分之一英寸。
px (pixel,像素)是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选。Windows系统默认是96dpi,Apple系统默认是72dpi。
em是一个相对长度单位,最初是指字母M的宽度,故名em。现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等。通常1em=16px。
字号是中文字库中特有的一种单位,以中文代号表示特定的磅值pt,便于记忆、表述。
pt和px的换算公式可以根据pt的定义得出:
pt=1/72(英寸), px=1/dpi(英寸)
因此 pt=px*72/dpi,若以Windows下的96dpi来计算,pt=px*72/96=px*3/4

字号、pt、px、em对照表和换算方法

10/7
2014
学习

增强WordPress编辑器

今天转了一篇我们萝莉控心中的满分作文《行走在消逝中》,大篇文字之下大字号显得不适合阅读了,想要改字号吧,wp本身的编辑器无此功能,文本编辑模式也不现实源代码,于是乎去找编辑器插件,换了俩,第一个是TinyMCE Advanced ,但它的字号是pt,用不惯。遂换了第二个CKEditor for WordPress,但这个每次点更新按钮都会被询问“是否离开本页面,如果离开您所做的保存会丢失”,这个操作方式太蛋疼于是继续百度,用了增强原生编辑器的办法。在主题的function.php的最后一个结束符之前加入以下代码:

 = 'fontselect';
$buttons[] = 'fontsizeselect';
$buttons[] = 'cleanup';
$buttons[] = 'styleselect';
$buttons[] = 'hr';
$buttons[] = 'del';
$buttons[] = 'sub';
$buttons[] = 'sup';
$buttons[] = 'copy';
$buttons[] = 'paste';
$buttons[] = 'cut';
$buttons[] = 'undo';
$buttons[] = 'image';
$buttons[] = 'anchor';
$buttons[] = 'backcolor';
$buttons[] = 'wp_page';
$buttons[] = 'charmap';
return $buttons;
}
add_filter("mce_buttons_3", "add_editor_buttons");

现在编辑器多出了第三行了~

可惜字号还是pt,于是只好去百度pt和px的转换去了

其实以前就这么改过,但是不生效,貌似那时候改的是wp自身的文件,而不是主题的文件,晕

增强WordPress编辑器

10/7
2014
ACG

行走在消逝中

loli有三好,身娇腰柔易推倒

(谨以此文献给那些依然坚定地为着伟大的“宅”事业而奋斗的有名的和无名的宅人们。)

“小小失败不过没关系;不管怎样反正都会有办法的。无论什么要求我都愿侍奉主人。‘主人想做什么就做什么吧’……”

不知怎的,我的脑海中忽然想起这首耳熟能详的旋律。虽然也知道现在可不是悠闲的时候,但是不自觉地,我停下笔,暂时止住了试卷上的龙飞凤舞。

“已经……夏天了呢。”阳光毫不吝啬地传递着夏日的气息,我心中生出这样的莫名感叹。

是阿,已经夏天了呢。已经到了Loli​​们用她们可爱的粉唇吸吮着混杂白色汁液,或许会被打上重重马赛克的棍状物的时候了呢。元气型的Loli们不会被烛焰般的炙热推倒,她们永远充满了那样的朝气。无论是穿着深色连身泳装,还是随时会露出底下那可疑的小熊图案的清凉短裙,她们身上那股被称为‘萌’的光芒总是比太阳更耀眼,更吸引人们的眼睛。

这,是“moe的季节”呢。 

可是……可是阿,为什么在这样的时刻,我却止不住来自心底的那一阵阵失落呢?

春华秋实,在怎样美丽的花朵,都有结出果实的那一天——更何况,那一朵朵欲开害羞的娇嫩花苞。相比之下,她们的存在时间,更是短得令人落泪。

一部以万年正太为主角的经典名著[1]中写道:“每当一个loli说‘我不相信小妖精’的时候,就有一个小妖精死去。”[2]

作者没有写下去。每当loli们用她们已经不再柔软的语音认真地说出“不再相信妖精”的时候,她们作为loli的一生也已经宣告结束。而脱去了稚气的loli,便如退去了颜色的花朵,将以肉眼看得见的速度枯萎,凋谢。想到不久的将来,loli们或许会成为口中高呼“天下为攻,世界大同”的腐女;抑或成为形容枯槁的欧巴桑,为青菜一毛还是两毛的问题争论半天,任何人都不忍去看,有着多么美丽的笑容的那一只只萌力四射的活泼小loli呵

花开花落。每一年,都有一批loli蜕化成为乙女,向着御姐和人妻迈出无可挽回的一步。她们走了,如樱花的落瓣一样,在灿烂中消逝。那样美丽,又那样令人心碎。

除了心碎,我又能如何呢?

就如同改变不了熵总是在增大这一事实一样,时间总是不知不觉地从我们身边走过——在走过的同时,无声而无情地一点点取走,那所谓“萌”的光环……

但是,但是……

如果没有去年的花落,哪会有第二年的花开?没有loli的凋零,哪有御姐和熟女的妩媚微笑?

时间固然带走了萌萌的loli,但在同时,他又带给了这些(前)loli们更多种萌的可能性。

loli是萌的,但只有loli的世界是不萌的。仅看到loli的成长,而忽略了三无、抚子等唯御姐以上级别方能具备的萌要素,更不符合代表最广大宅人群中利益的全控系宅人的一贯方针。

朝拜御姐,暮推萝莉。春引熟女,冬诱人妻。

在未能身体力行这一系列萌之境界之前,气馁是被我等所谓宅之接班人所不齿的。

心中燃起了不输于蜡滴的滚烫欲火,继续走下去的愿望在此刻无比强烈。

或许,明天你已不再。但我仍将微笑。

微笑着,欣赏loli的消逝,微笑着,展开怀抱,迎接更加和谐的一天。

来源:萌娘百科

行走在消逝中

10/7
2014
学习

百度地图快速生成器

没啥可说的,直接ノ ̄ー ̄)ノ⌒网址

最后复制的代码里复制头部的js、css和body里面的内容就OK了。

后来在某页面下面看到了直接呈现出搜索结果的页面

这个吓了我一跳,百度也没百度出结果,最后自己试出来了,就在分享产生的网址里

最后的3D地图真不错,就是把二维图改成三维图来查看,但是只有大城市的主要地区有。我用这个游览了故宫

百度地图快速生成器

10/7
2014
学习

css3动画过渡效果的实验

之前给本站的一些a链接设置了旋转效果(鼠标经过左侧a元素即可看到),里面用到了一个属性:
transition:all .5s;
意即动画效果的过渡时间为0.5秒。

以前我很好奇一些网站的a标签在鼠标经过的时候会缓慢变色而不是立即变色,刚才忽然想起了这个属性,试了一试果然奏效,即使不是旋转变形这类CSS3的新属性也有效果。

后来想起更早之前还试验过一个鼠标经过的时候图片透明度缓变的效果,是用js做的。也用transition属性试验了一下,果然能够实现这个效果,想当初费了多大劲,我真想以头抢地啊。不过css的伪类没有鼠标离开的状态,无法实现透明度缓慢恢复到1,这算是个缺陷吧吧

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>测试过渡效果</title>
</head>
<body>
    <img src="http://www.saber.love/wp-content/uploads/2014/08/head.png" alt="">
    <br>
    <a href="#" id="demo">saber酱可爱无敌</a>
    <style type="text/css">
    	a{font-size: 40px;color: #444;}
		a:hover{color: #1BB40E;transition:all .6s;}
		img:hover{opacity: 0.4;transition:all .5s;}
	</style>
</body>
</html>

看看下面这个例子:

代码如下:

<div class="css3at"></div>
    <style type="text/css">
    	.css3at{ width: 100px;height: 100px;border: 6px solid #F27B33; border-radius: 100px; margin: 0 auto;}
		.css3at:hover{width: 70px; height: 70px;transition:all .5s; }
	</style>

css3动画过渡效果的实验

10/6
2014
软件

更改Dreamweaver的配色方案

点我下载颜色配置文件

最近的网站由于用的是gb2312编码,所以不能使用sublime text2这个编辑器了,只好用回Dreamweaver,但是Dreamweaver的配色方案看得我眼都快瞎了,因为它各种标签代码的颜色区分太小了,找个标签都要瞪着眼看老半天,还让不让人活了。于是我去百度怎样更改Dreamweaver的配色方案,让我泪流满面的是还真的可以改,谢谢苍天谢谢大地!

我用的Dreamweaver是CS6中文版,到如下路径中
C:\Users\%username%\AppData\Roaming\Adobe\Dreamweaver CS6\zh_CN\Configuration\CodeColoring
找到其颜色配置文件:Colors.xml。然后关闭Dreamweaver,将下载的配置文件替换之。

替换之后打开Dreamweaver,发现代码颜色变了,但是背景颜色没有变,需要我们自己到首选项中修改:

这下就OK了~虽然还是很糟糕,不够有比没有强,唉

参考:《提高自身代码阅读能力——代码配色(Dreamweaver、Notepad++)》

更改Dreamweaver的配色方案

10/6
2014
学习

ruby——给文字注音的html标签

今天逛萌娘百科到了“绅士”词条的时候,看到了这么一个注音效果:

研究了代码以及百度之后,明白了这是用一个很少用的html标签做出来的。每注音一个字用一对ruby标签,里面可以包含这么三对标签:
rb:需要注音的字
rt:注音
rp:浏览器不支持ruby方法的时候会把rp标签内的文字显示出来,非必须

注音部分理论上可以随便放东西,除了拼音,片假名什么的也都可以。我也试做了一个dome:

<ruby>
<rb>雪</rb>
<rt>xué</rt>
</ruby>

<ruby>
<rb>见</rb>
<rt>jiàn</rt>
</ruby>

效果如下:

xué jiàn

ps:搜狗拼音中文状态下按V8可以打出带声调符号的字母。

ruby——给文字注音的html标签

10/5
2014
学习

jq控制元素的平滑移动

说到平滑似乎就离不开定时器...这次用的是元素的left值来移动的,本意是想做个模仿桌宠移动的东东,在网页上左右跑。最后似乎也差不多了

只有刚开始的时候隐藏在左侧窗口范围外,造成一个出场效果。之后就左右来回走了。

用到了一个水平翻转图片的css:transform:scaleX(-1);
Read More →

jq控制元素的平滑移动

10/4
2014
其他

虚伪

刚才看《纵横天下》,冰霜把人带走后书生也被迫搬出了工作室。到了南京之后找一个做鱼的老汉当厨师开饭店。他得到了厨艺人才,老汉得到了钱途,俩人一会儿就好的跟亲兄弟似的,“稻花香看我的眼神很奇怪,可能是觉得我好虚伪。 ”。这处也许本来没什么深意,但是我自己越想越悲伤了起来

人要是能不虚伪而好好的活着,谁还愿意去虚伪呢?虚伪都是被这个现实的社会逼的。不虚伪的美好社会只能存在于幻想中,例如东方。今天又是安静和平的一天呢,这样的日子真令人向往。可这只是幻想,就像我幻想成仙一样,从此和saber过上了幸福的生活。可是,现实又如何呢?毫无疑问,我也学会了容忍和虚伪。为了利益,为了更好的生存。这真是悲哀。但是,如果有一个或几个人,你面对他们的时候是真心的,卸下了伪装的,付出一切的,是为了她而奋斗,披上了虚伪的面具的。这样算爱吗?这样是自欺欺人吗?会迷失了本心吗?但愿我不失本心,即使我知道自己虚伪,我也是幸福的

虚伪

10/4
2014
学习 软件

CSS Sprites工具CyotekSpriter

CSS Sprites通常被意译为“CSS图像拼合”或“CSS贴图定位”,是一项把多个背景图片结合到一张png图片上,以背景图片定位来显示的前端技术。如果我们自己来拼合图像,不但过程麻烦,而且各个图像的起点坐标更是要一个个量,这就更繁琐了。而这个软件——CyotekSpriter的出现就把这一流程极度简化了。

现在有小背景图若干,怎样使用CyotekSpriter来拼合成一张图像呢?

方法很简单:把所有图片选中,拖到CyotekSpriter的窗口中就OK了。

看红框处,可以随时调整图像的宽度

左下角的第二项是css,我们看到有许多类选择器,每个选择器都是以图像的原名来命名的,直接给出了图像起点的坐标。鼠标在当行左侧点击即可选中一行,很方便。

这项技术还有个优点:如果有一个区域,鼠标经过的时候其背景图换成另一张图。如果使用两张图来切换,第一次切换的时候要切换的背景图才开始加载,中间有一段时间是没背景图的。如果使用同一张图的定位则没有这个问题。

CSS Sprites工具CyotekSpriter